Accélérez votre site WordPress avec le Speculative Loading – Nouveauté WordPress 6.8

La version 6.8 de WordPress introduit une innovation majeure en matière de performance : le speculative loading (chargement spéculatif). Cette fonctionnalité permet de charger certaines pages de votre site avant même que l’utilisateur ne clique dessus, ce qui réduit considérablement le temps de chargement perçu.

Grâce à l’API Speculation Rules, WordPress peut désormais anticiper la navigation de vos visiteurs pour leur offrir une expérience plus fluide et rapide.

Qu’est-ce que le speculative loading ?

Le speculative loading repose sur une technologie de la plateforme web appelée Speculation Rules API. Elle permet de définir des règles pour précharger (prefetch) ou pré-rendre (prerender) certaines pages, en fonction du comportement de l’utilisateur.

Autrement dit, WordPress peut charger en arrière-plan les pages les plus susceptibles d’être visitées, même avant que le clic n’ait lieu.

Une fonctionnalité testée et approuvée

Avant d’être intégrée au noyau de WordPress, cette technologie a été testée sur plus de 50 000 sites via une extension dédiée. Les résultats sont clairs : les sites utilisant le speculative loading ont vu leur taux de réussite du LCP (Largest Contentful Paint) s’améliorer d’environ 1,9 % en médiane – une amélioration significative.

Aujourd’hui, plus de 8 % des navigations Chrome utilisent déjà cette API. Des acteurs majeurs comme Cloudflare l’intègrent déjà dans leurs services de performance.

Fonctionnement par défaut dans WordPress

WordPress active par défaut le speculative loading pour les visiteurs non connectés, si les permaliens jolis sont activés. Le comportement par défaut est un préfet conservateur : il ne s’active que lorsque l’utilisateur commence à cliquer sur un lien.

Ce paramétrage reste performant tout en évitant les risques de chargement inutile.

Personnalisation du comportement

WordPress permet de personnaliser finement ce chargement anticipé avec des filtres PHP.

• Exclure certaines URLs (ex. : page panier)
• Changer entre prefetch et prerender
• Définir l’agressivité (conservateur, modéré, agressif)
• Cibler des classes CSS spécifiques

Exemple : exclure les pages de type /panier/ du speculative loading

add_filter(
    'wp_speculation_rules_href_exclude_paths',
    function ( $href_exclude_paths ) {
        $href_exclude_paths[] = '/panier/*';
        return $href_exclude_paths;
    }
);

Prerender : attention aux effets secondaires

Le prerender exécute même le JavaScript de la page visée. Cela peut poser problème si des actions sont déclenchées trop tôt (ex. : ajout au panier, suivi d’événement, etc.).

Exclure certaines URLs uniquement du prerender :

add_filter(
    'wp_speculation_rules_href_exclude_paths',
    function ( $href_exclude_paths, $mode ) {
        if ( 'prerender' === $mode ) {
            $href_exclude_paths[] = '/espace-personnalise/*';
        }
        return $href_exclude_paths;
    },
    10,
    2
);

Activer le speculative loading sans permaliens jolis

Par défaut, WordPress désactive cette fonctionnalité si les permaliens ne sont pas configurés. Vous pouvez forcer son activation :

add_filter(
    'wp_speculation_rules_configuration',
    function ( $config ) {
        if ( ! $config && ! get_option( 'permalink_structure' ) ) {
            $config = array(
                'mode'      => 'auto',
                'eagerness' => 'auto',
            );
        }
        return $config;
    }
);

Créer des règles personnalisées

Pour aller plus loin, vous pouvez créer vos propres règles de speculation :

add_action(
    'wp_load_speculation_rules',
    function ( WP_Speculation_Rules $speculation_rules ) {
        $speculation_rules->add_rule(
            'prerender',
            'mon-prerender-modere',
            array(
                'source'    => 'list',
                'urls'      => array(
                    '/produit-vedette/',
                    '/offre-exclusive/',
                ),
                'eagerness' => 'moderate',
            )
        );
    }
);

Ou encore, via des classes CSS :

add_action(
    'wp_load_speculation_rules',
    function ( WP_Speculation_Rules $speculation_rules ) {
        $speculation_rules->add_rule(
            'prerender',
            'optin-prerender-css',
            array(
                'source'    => 'document',
                'where'     => array(
                    'selector_matches' => '.prerender-optin, .prerender-optin a',
                ),
                'eagerness' => 'moderate',
            )
        );
    }
);

Désactiver le chargement sur certains blocs

Dans Gutenberg, ajoutez les classes no-prefetch ou no-prerender dans le champ « Classes CSS supplémentaires » pour désactiver le comportement sur certains blocs spécifiques.

Conclusion

Le speculative loading est une nouveauté puissante de WordPress 6.8. Facile à implémenter, flexible, et pensée pour booster les performances, surtout sur mobile.

Chez Peaks – Agence Web, nous utilisons les dernières technologies WordPress pour accélérer les sites de nos clients tout en améliorant leur expérience utilisateur.

Vous voulez un site WordPress plus rapide ? Discutons ensemble de vos objectifs !