Chargement spéculatif WordPress : régler ou désactiver

Si vous gérez un site WordPress ou WooCommerce, voici comment vérifier, ajuster ou désactiver le chargement spéculatif. Activée par défaut depuis WordPress 6.8, cette fonction permet à Chrome et à Edge de télécharger la page suivante un peu avant la fin du clic. Elle ne vise que les visiteurs non connectés. Vous avez peut-être remarqué dans vos journaux des requêtes inexpliquées, ou vous voulez qu’on passe plus vite d’une page à l’autre. La configuration par défaut convient à presque tous les sites. Le navigateur ne télécharge une page qu’au moment où quelqu’un appuie sur un lien, donc presque chaque requête anticipée devient une vraie visite. Gardez-la active, excluez les quelques URL qui affichent des données propres au visiteur ou qui modifient quelque chose à l’ouverture, et désactivez-la avec un seul filtre seulement si quelque chose cesse de fonctionner.

Ce que vous allez accomplir

• Confirmer si le chargement spéculatif est actif sur votre site, et avec quels réglages.
• Observer un préchargement dans Chrome DevTools et le reconnaître dans le journal d’accès du serveur grâce à son en-tête de requête Sec-Purpose: prefetch.
• Exclure le panier, la caisse, le compte client et les URL « d’action » des extensions avec une petite extension must-use.
• Décider s’il vaut la peine d’augmenter l’empressement ou de passer au prérendu, selon des conditions claires plutôt qu’au jugé.
• Désactiver complètement la fonction, d’une façon que l’extension Speculative Loading ne peut pas annuler.

Prérequis

• WordPress 6.8 ou plus récent. Lancez wp core version ou consultez Tableau de bord > Mises à jour. Les constantes de wp-config.php de l’étape 5 demandent WordPress 7.1 ou plus récent.
• Des permaliens lisibles. Sous Réglages > Permaliens, tout réglage autre que « Simple » convient. Avec les permaliens simples, WordPress désactive la fonction par défaut.
• Un navigateur basé sur Chromium (Chrome, Edge ou Opera) pour les tests. Firefox et Safari ignorent les règles, donc ils n’affichent rien.
• Un accès SSH ou aux fichiers de wp-content/mu-plugins/, le dossier des extensions must-use. L’administration en français les affiche sous « Automatiques » : ce sont des fichiers PHP que WordPress charge à chaque requête et qu’on ne peut pas désactiver depuis l’administration.
• WP-CLI, qui permet de piloter WordPress depuis le terminal, est utile mais facultatif. Chaque vérification a une solution de rechange avec le navigateur ou curl.

Comment ça fonctionne

Le chargement spéculatif repose sur l’API Speculation Rules, une fonction des navigateurs qui permet à une page d’indiquer quels liens le navigateur peut charger à l’avance. WordPress insère une seule règle sous forme de bloc <script type="speculationrules"> dans le pied de page. Les navigateurs qui ne la prennent pas en charge sautent ce bloc, donc rien ne change pour eux.

WordPress n’insère la règle que si deux conditions sont réunies : personne n’est connecté, et le site utilise des permaliens lisibles. Vous ne la verrez donc jamais sur votre propre site tant que vous êtes connecté à wp-admin. Un client WooCommerce qui a un panier mais pas de compte reste non connecté, donc il la reçoit.

La règle vise tous les liens du même site, sauf ceux-ci, que WordPress exclut toujours :

• /wp-login.php et tout autre fichier /wp-*.php, ainsi que tout ce qui se trouve sous /wp-admin/. Les liens de déconnexion passent par wp-login.php, donc ils ne sont jamais préchargés.
• Les fichiers des dossiers de téléversements, de wp-content, des extensions et du thème.
• Toute URL avec des paramètres, comme ?add-to-cart=42, quand les permaliens lisibles sont actifs.
• Les liens avec rel="nofollow". WooCommerce l’ajoute aux boutons d’ajout au panier des listes de produits.
• Les liens qui portent la classe no-prefetch, ou qui se trouvent dans un élément qui la porte.

Deux réglages décident de ce que fait le navigateur avec un lien admissible. Le mode est soit le préchargement (prefetch, qui télécharge seulement le HTML), soit le prérendu (prerender, qui télécharge la page et l’affiche dans un onglet caché en exécutant son JavaScript). L’empressement (eagerness) indique à quel moment le navigateur agit. Par défaut, WordPress utilise le préchargement avec l’empressement conservateur.

Chrome plafonne aussi ces niveaux à deux spéculations à la fois par page et abandonne la plus ancienne quand une troisième commence. Ce plafond garde la charge supplémentaire modeste, même avec le niveau eager.

Ce que voient votre serveur, votre cache et votre analytique

Un préchargement est une requête GET ordinaire, avec les témoins du visiteur et un seul en-tête de plus, Sec-Purpose: prefetch. Un prérendu envoie Sec-Purpose: prefetch;prerender. Quand le visiteur termine son clic, le navigateur utilise la réponse qu’il a déjà. Une visite normale produit donc habituellement une seule ligne dans le journal d’accès, et cette ligne est le préchargement. Ne retirez pas les requêtes Sec-Purpose des statistiques tirées des journaux : vous enlèveriez de vraies pages vues en même temps que celles qui n’ont pas servi.

Les caches de page et les CDN (réseaux de diffusion de contenu, qui servent des copies de vos pages depuis des serveurs proches du visiteur) traitent le préchargement comme n’importe quelle requête. Une page en cache ne coûte rien de plus. Une page hors cache exécute PHP comme d’habitude, ce qui compte pour les clients WooCommerce invités dont le témoin de panier contourne le cache. Le préchargement n’exécute jamais le JavaScript de la page, donc des outils comme Google Analytics ne le comptent pas. Le prérendu, lui, l’exécute : c’est pourquoi le comportement de l’analytique est la question principale avant de changer de mode. Pour le côté cache, voyez cache de page, cache d’objets et cache du navigateur dans WordPress.

Étapes détaillées

1. Lisez la configuration active. Depuis le dossier racine du site, lancez :

   wp option get permalink_structure
   wp eval 'echo wp_json_encode( wp_get_speculation_rules_configuration() ), PHP_EOL;'

   Exemple de sortie :

   /%postname%/
   {"mode":"prefetch","eagerness":"conservative"}

   WP-CLI s’exécute comme un visiteur non connecté, donc c’est ce que reçoivent les visiteurs anonymes. Si la deuxième ligne affiche null, la fonction est désactivée : soit les permaliens sont simples (première ligne vide), soit une extension ou un thème renvoie null dans le filtre wp_speculation_rules_configuration. Si elle affiche prerender et moderate, l’extension Speculative Loading est fort probablement active. Avec WordPress 7.1 ou plus récent, un réglage par défaut fixé par l’hébergeur peut aussi en être la cause (voyez l’étape 5).

2. Repérez la règle dans le HTML de la page. Utilisez une requête non connectée :

   curl -s https://www.example.com/ | grep -A1 'type="speculationrules"'

   Exemple de sortie :

   <script type="speculationrules">
   {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/storefront/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}

   Si rien ne s’affiche, la page n’a pas de règle. Si l’étape 1 montrait une configuration mais que curl ne trouve rien, vous regardez probablement une page mise en cache avant WordPress 6.8. Videz le cache de page et réessayez.

3. Observez un préchargement dans Chrome DevTools. Ouvrez le site dans une fenêtre privée pour être déconnecté. Ouvrez DevTools, allez dans Application, puis sous Services d’arrière-plan choisissez Chargements spéculatifs. Si votre DevTools est en anglais, ces libellés sont Background services et Speculative loads. Rechargez la page, car le panneau n’enregistre que ce qui se passe pendant qu’il est ouvert. L’onglet Règles liste l’ensemble de règles et l’onglet Spéculations liste les URL admissibles avec leur état. Appuyez sur un lien du menu sans relâcher : son état quitte « Non déclenchée » dès que le préchargement démarre. Dans le panneau Réseau, sélectionnez cette requête et ouvrez En-têtes. Vous devriez voir Sec-Purpose: prefetch sous En-têtes de requête.

4. Excluez le panier, la caisse, le compte client et les URL d’action. Créez wp-content/mu-plugins/speculative-loading-rules.php :

   <?php
   /**
    * Plugin Name: Speculative loading exclusions
    */
   add_filter( 'wp_speculation_rules_href_exclude_paths', function ( $paths ) {
   	$paths[] = '/cart/*';
   	$paths[] = '/checkout/*';
   	$paths[] = '/my-account/*';
   	return $paths;
   } );

   Ces pages affichent des données qui appartiennent à un seul client et contournent habituellement le cache de page, donc chaque spéculation exécute PHP. Avec le réglage par défaut, le coût reste faible, puisqu’un appui est presque toujours suivi du clic. Il augmente dès que vous relevez l’empressement, et en prérendu les scripts de la caisse s’exécuteraient avant même que le client voie la page. Les exclure dès maintenant rend l’étape 5 sans risque.

   Utilisez les identifiants de pages réels de votre boutique, affichés sous WooCommerce > Réglages > Avancé > Installation des pages. Une boutique installée en français utilise habituellement /panier/, /commande/ et /mon-compte/ : remplacez les chemins en conséquence. Les chemins sont relatifs à la page d’accueil du site. WordPress ajoute lui-même le préfixe du sous-dossier si le site est installé dans un sous-dossier. Ajoutez toute URL d’extension qui modifie quelque chose à l’ouverture et qui n’a pas de paramètres. Un lien hypothétique de liste de souhaits comme /wishlist/add/42/ demanderait '/wishlist/*'. Vérifiez ensuite le fichier et videz le cache de page :

   php -l wp-content/mu-plugins/speculative-loading-rules.php

   Sortie attendue : No syntax errors detected in wp-content/mu-plugins/speculative-loading-rules.php. Pour exclure un seul lien, ajoutez-lui plutôt la classe CSS no-prefetch. Dans l’éditeur de blocs, c’est Avancé > Classe(s) CSS additionnelle(s) sur un bloc Bouton ou Groupe.

5. Changez le mode ou l’empressement seulement en connaissance de cause. Restez sur le défaut sauf si ces deux conditions sont vraies : les pages anonymes sont servies par un cache de page, et l’étape 4 est faite. Le niveau moderate devient alors une hausse raisonnable. Ajoutez ceci à la même extension must-use :

   add_filter( 'wp_speculation_rules_configuration', function ( $config ) {
   	if ( is_array( $config ) ) {
   		$config['eagerness'] = 'moderate';
   	}
   	return $config;
   } );

   La vérification is_array() garde la fonction désactivée pour les utilisateurs connectés. Avec WordPress 7.1 ou plus récent, un hébergeur peut plutôt définir define( 'WP_SPECULATIVE_LOADING_DEFAULT_EAGERNESS', 'moderate' ); dans wp-config.php, ou une variable d’environnement du même nom. WP_SPECULATIVE_LOADING_DEFAULT_MODE fonctionne de la même façon pour le mode. Les deux changent seulement ce que devient la valeur « auto » de WordPress, donc le filtre d’une extension garde toujours le dernier mot. N’utilisez prerender qu’après avoir confirmé que votre analytique, vos publicités et vos fenêtres de clavardage attendent que la page soit affichée. La documentation de Chrome sur le prérendu explique comment le vérifier. Si l’extension Speculative Loading est installée, elle applique ses propres réglages depuis Réglages > Lecture (prérendu et moderate par défaut) : changez-les là ou désactivez-la.

6. Enregistrez l’en-tête dans le journal d’accès. Les formats de journal par défaut n’incluent pas Sec-Purpose. Sur nginx, ajoutez un format dans le bloc http et utilisez-le dans le bloc server du site :

   log_format specl '$remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent "$http_referer" "$http_user_agent" "$http_sec_purpose"';
   access_log /var/log/nginx/access.log specl;

   Sur Apache, l’équivalent est LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" \"%{Sec-Purpose}i\"" specl, en faisant pointer la ligne CustomLog du site vers specl. Sous cPanel, les journaux par domaine utilisent un format géré par WHM : servez-vous plutôt de DevTools comme à l’étape 3. Lancez nginx -t && systemctl reload nginx et attendez-vous à voir syntax is ok et test is successful.

Valider que ça fonctionne

Faites ces trois vérifications après chaque changement, en vidant d’abord le cache de page.

curl -s https://www.example.com/ | grep -o '"/cart/\*"'

Sortie attendue : "/cart/*". Cela prouve que votre exclusion se rend jusqu’au HTML que reçoivent les visiteurs.

Ensuite, dans une fenêtre privée de Chrome avec le panneau Chargements spéculatifs ouvert, appuyez sur un lien vers le panier. Il ne devrait afficher aucune spéculation, alors qu’un lien vers un article ou un produit en affiche encore une.

Enfin, comptez les lignes de préchargement dans le journal (format nginx de l’étape 6) :

grep -c '"prefetch"$' /var/log/nginx/access.log

Exemple de sortie : 318. Un total supérieur à zéro prouve que les visiteurs sous Chromium préchargent. Avec l’empressement conservateur, presque chacune de ces lignes est aussi une vraie page vue, donc un bond soudain après la mise à jour d’une extension indique un empressement relevé.

Dépannage

• Aucune règle dans le HTML. Vérifiez dans l’ordre : vous avez testé en étant connecté, les permaliens sont simples, une copie en cache date d’avant le changement, ou une extension renvoie null dans wp_speculation_rules_configuration. L’étape 1 vous dit lequel.
• La règle est là, mais DevTools n’affiche rien. Chrome saute la spéculation quand Précharger les pages est désactivé dans chrome://settings/performance, ce que font aussi certains bloqueurs de publicité comme uBlock Origin. Une politique de sécurité du contenu stricte (CSP, un en-tête qui limite les scripts autorisés) sans 'unsafe-inline' bloque la règle intégrée, et la console affiche une erreur CSP. Ajoutez l’empreinte (hash) du script à script-src, ou ajoutez votre nonce (le jeton aléatoire que votre politique émet pour chaque page) avec le filtre wp_inline_script_attributes.
• Beaucoup de préchargements inutilisés ou une charge PHP accrue. Quelque chose a relevé l’empressement. Cherchez l’extension Speculative Loading (récupérez la page avec curl et cherchez speculation-rules dans sa balise meta generator) ou une autre extension qui filtre la configuration. Revenez au niveau conservateur ou améliorez le taux de succès du cache de page. Voyez la recette des témoins de contournement WooCommerce pour les paniers invités derrière Cloudflare.
• Des réponses 503 sur les préchargements derrière Cloudflare. La fonction Speed Brain de Cloudflare ajoute sa propre règle de préchargement conservatrice au moyen d’un en-tête Speculation-Rules. Sa documentation indique que les préchargements qui échouent reçoivent une réponse 503. Le navigateur abandonne alors ce préchargement et charge la page normalement.
• Un panier périmé ou un changement d’état que personne n’a demandé. Une URL sans paramètres qui affiche ou modifie des données propres au visiteur est spéculée. Ajoutez-la à la liste d’exclusions de l’étape 4.

Quand ce n’est pas la bonne approche

Le chargement spéculatif accélère seulement la deuxième page d’une visite et les suivantes. Il ne fait rien pour la première page ni pour un serveur qui répond lentement : un site lent a d’abord besoin de travail côté serveur et cache.

Désactivez-le quand votre politique CSP ne peut pas autoriser la règle intégrée, ou quand le site dépend de liens GET qui modifient des données et que vous ne pouvez pas les lister. Placez ceci dans l’extension must-use :

add_filter( 'wp_speculation_rules_configuration', '__return_null', 100 );

La priorité 100 s’exécute après le filtre de l’extension Speculative Loading, qui utilise la priorité par défaut de 10, donc l’extension ne peut pas la réactiver. Videz le cache de page, puis refaites l’étape 2 : si rien ne s’affiche, la fonction est désactivée. Plus de contexte se trouve dans la note de développement de WordPress 6.8.

Un WordPress qui rapporte vraiment mérite un opérateur — Stack Harbor opère cette pile sous WordPress Entreprise ; réservez une consultation d’infrastructure.