Le moyen le plus efficace d'accélérer une page, c'est de la charger avant que l'utilisateur ne la demande. Les speculation rules permettent exactement cela : en quelques lignes de JSON, vous indiquez au navigateur quelles pages il peut précharger, voire afficher en arrière-plan, pour qu'elles s'ouvrent instantanément au moment du clic. WordPress les active même par défaut depuis sa version 6.8. Voici comment les utiliser sans gaspiller les ressources de vos visiteurs ni de votre serveur.
Prefetch et prerender : deux niveaux d'anticipation
L'API propose deux actions :
prefetch: le navigateur télécharge à l'avance le document HTML de la page suivante. Au clic, il n'a plus qu'à charger les ressources (CSS, images) et à afficher la page ;prerender: le navigateur charge et affiche complètement la page dans un onglet invisible, scripts compris. Au clic, la page apparaît immédiatement.
Le prérendu offre le gain le plus spectaculaire, mais il consomme davantage de mémoire, de bande passante et de ressources serveur. Le préchargement simple est plus économe et convient à la plupart des sites.
La syntaxe des speculation rules
Les règles se déclarent dans une balise <script type="speculationrules"> contenant du JSON :
<script type="speculationrules">
{
"prerender": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/admin/*" } },
{ "not": { "href_matches": "/panier/*" } },
{ "not": { "selector_matches": ".no-prerender" } }
]
},
"eagerness": "moderate"
}]
}
</script>
Ces règles dites « de document » s'appliquent à tous les liens de la page qui correspondent aux conditions : toutes les pages internes, sauf l'administration, le panier et les liens portant la classe no-prerender. On peut aussi fournir une simple liste d'adresses avec la clé urls, utile quand on sait précisément quelle sera la page suivante (l'étape 2 d'un formulaire, par exemple).
Choisir le bon niveau d'anticipation
Le paramètre eagerness détermine à quel moment le navigateur se lance :
| Valeur | Déclenchement | Usage |
|---|---|---|
immediate | Dès que la règle est lue | Liste d'URL très probables |
eager | Très tôt, au moindre signal d'intérêt | Pages très consultées |
moderate | Au survol prolongé d'un lien sur ordinateur, à l'appui sur mobile | Bon compromis par défaut |
conservative | Au moment où l'on appuie sur le lien | Le plus économe |
moderate, un visiteur qui laisse sa souris quelques instants sur un lien déclenche le prérendu : il s'écoule en général quelques centaines de millisecondes avant le clic, ce qui suffit souvent à rendre la navigation instantanée. Le comportement exact sur mobile évolue d'une version de Chrome à l'autre : consultez la documentation de Chrome for Developers pour le détail.
Les pièges à éviter
Ne jamais anticiper une action
Un lien qui déclenche une action côté serveur ne doit pas être préchargé : déconnexion, ajout au panier, suppression, désinscription d'une newsletter. Le navigateur exécuterait l'action sans que l'utilisateur ait cliqué. C'est une raison de plus pour que ces actions passent par des formulaires en POST plutôt que par de simples liens. Excluez aussi les pages personnalisées dont le contenu change selon la session.
Les statistiques faussées
Une page prérendue mais jamais affichée ne doit pas être comptée comme une visite. Les outils de mesure récents le gèrent, mais vérifiez le vôtre. Pour vos propres scripts, la propriété document.prerendering et l'événement prerenderingchange permettent d'attendre l'affichage réel :
function trackPageView() {
// envoi de la page vue à votre outil de statistiques
}
if (document.prerendering) {
document.addEventListener('prerenderingchange', trackPageView, { once: true });
} else {
trackPageView();
}
La charge serveur
Chaque préchargement est une requête réelle sur votre serveur. Avec un niveau eager sur toutes les pages, un site à fort trafic peut voir sa charge augmenter sensiblement. Commencez par moderate ou conservative, et surveillez vos journaux. Côté serveur, les requêtes de préchargement portent l'en-tête Sec-Purpose: prefetch (avec ;prerender pour le prérendu), ce qui permet de les identifier.
Compatibilité navigateurs
Les speculation rules sont prises en charge par Chrome et Edge depuis plusieurs années (les règles de document depuis la version 121). Firefox et Safari travaillent sur le préchargement, mais leur prise en charge reste partielle ou en cours de développement, selon Can I use. Le prérendu est pour l'instant propre aux navigateurs basés sur Chromium.
Ce n'est pas un problème : un navigateur qui ne comprend pas la balise l'ignore. Les speculation rules sont une amélioration progressive, sans risque pour les autres visiteurs, et Chrome représente une grande partie du trafic de la plupart des sites.
Dans WordPress
Depuis WordPress 6.8, le cœur ajoute automatiquement des speculation rules en mode prefetch avec un niveau conservative, en excluant l'administration et les URL avec paramètres. L'extension officielle Speculative Loading, issue de l'équipe performance de WordPress, permet de passer au prérendu ou de changer le niveau d'anticipation. C'est un bon complément aux autres réglages de ma checklist de maintenance WordPress.
Un gain réel sur l'expérience
Les speculation rules n'améliorent pas le score Lighthouse d'une page isolée, puisqu'elles agissent sur la page suivante. En revanche, elles améliorent les données de terrain : les visiteurs qui naviguent d'une page à l'autre obtiennent un LCP proche de zéro sur les pages prérendues, ce qui se reflète dans vos Core Web Vitals. Associées aux view transitions, elles rendent la navigation d'un site classique aussi fluide que celle d'une application.
Vous voulez accélérer la navigation de votre site ? Je peux mettre en place les speculation rules et les autres optimisations adaptées à votre CMS : voir mes services.
