Speculation Rules : prefetch et prerender pour le e-commerce

Sur un site e-commerce, le clic sur une fiche produit prend en moyenne 800 ms à 2 s avant le premier affichage. Les Speculation Rules permettent de ramener ce temps à quasi zéro – en préchargeant la page avant même que l'utilisateur ne clique.

Le principe : anticiper le prochain clic

Les Speculation Rules sont une API déclarative intégrée à Chrome depuis la version 121. Elles remplacent l'ancien <link rel="prefetch"> par un mécanisme plus puissant et plus contrôlable. Deux niveaux d'anticipation existent :

• Prefetch télécharge le HTML et les sous-ressources critiques de la page cible. Le rendu se fait au clic.

• Prerender va plus loin : le navigateur construit le DOM complet en arrière-plan. Au clic, la page s'affiche instantanément.

L'implémentation tient en un bloc JSON dans un tag <script type="speculationrules"> :

<script type="speculationrules">
{
  "prerender": [
    { "where": { "selector_matches": ".product-card a" }, "eagerness": "moderate" }
  ]
}
</script>

Le paramètre eagerness contrôle le déclenchement : conservative attend le hover, moderate anticipe un peu plus, eager précharge immédiatement.

Rayban : un des premiers à déployer en production

Dès Janvier 2025, Rayban a expérimenté l'ajout de Speculation Rules sur leur site e-commerce. Très en avance sur l'implémentation, ils ont partagé un grand nombre d'informations techniques et business avec Google dans le cadre de la rédaction d'un article posté sur le blog web.dev.

Performance technique (vitesse)

L'objectif était de rendre le passage des listes de produits (PLP) aux fiches produits (PDP) quasi instantané. Le LCP (Largest Contentful Paint) s'est vu amélioré de 43 % sur mobile et desktop, passant de 4,69s à 2,66s sur mobile et de 3,03s à 1,74s sur desktop.

Impact business (engagement et ventes)

C'est ici que le retour d'expérience est le plus frappant, car il prouve que la vitesse "ressentie" booste directement l'achat :

• Le taux de conversion a tout simplement doublé (+101 % sur mobile et +156 % sur desktop).

• Le taux de sortie (Exit Rate) a diminué de 13%.

• Les pages vues par session ont augmenté de 52 % sur mobile et 65 % sur desktop, prouvant que les utilisateurs naviguent beaucoup plus volontiers quand les pages s'affichent instantanément.

Ce que j'ai mis en place pour Chanel

Chez Chanel, le contexte était différent. Le site est très visuel, avec des assets lourds – images haute résolution, vidéos. Le prerender complet aurait consommé trop de bande passante. Nous avons opté pour une approche hybride :

• Prefetch sur les PLP pour les 6 premières fiches produits visibles
• Preload des PLPs les plus consultées du méga-menu, en se basant sur les données d'Analytics.

Le gain mesuré sur le terrain : –380 ms sur le LCP au P75 pour les pages concernées. L'impact sur les taux de conversion s'est mesuré instantanément.

Quand les Speculation Rules apportent-elles un vrai gain ?

Tous les sites n'en tirent pas le même bénéfice. Les cas où le gain est le plus net :

• PLP → PDP avec des fiches produits prévisibles – les 3 à 6 premiers résultats captent la majorité des clics
• Méga menus vers des catégories phares – le parcours est très prédictible
• Pages éditoriales avec des CTA vers des landing pages fixes
• Moteur de recherche interne – prefetch du premier résultat

En revanche, sur un checkout multi-step ou un configurateur produit, les Speculation Rules n'apportent rien. Le parcours est linéaire et la page suivante dépend d'un formulaire côté serveur.

Les pièges à éviter

Le prerender consomme de la mémoire et du CPU. Chrome limite à 2 prerenders simultanés en moderate, 10 en eager. Dépasser ces limites ne déclenche pas d'erreur – les anciennes spéculations sont simplement abandonnées.

• Ne jamais prerender une page avec des effets de bord (ajout au panier, tracking de conversion)
• Monitorer l'impact sur la bande passante via PerformanceObserver avec le type speculation-rules
• Tester sur des connexions 3G lentes – un prefetch de 500 Ko sur du réseau limité peut ralentir la page en cours
• Vérifier la compatibilité : Chrome 121+ uniquement. Safari et Firefox ignorent silencieusement le tag.

Mesurer l'impact réel

Le CrUX ne capture pas directement les gains de speculation – les métriques LCP/FCP sont mesurées sur le chargement initial, pas sur les navigations soft. Pour mesurer l'effet, il faut instrumenter côté RUM :

performance.getEntriesByType("navigation").forEach(entry => {
  if (entry.activationStart > 0) {
    console.log("Page prerendered, activation delay:", entry.activationStart);
  }
});

La propriété activationStart est non-nulle quand la page a été prérendue. C'est le seul moyen fiable de quantifier le pourcentage de navigations qui bénéficient du prerender.

Les Speculation Rules ne remplacent pas les optimisations classiques – un mauvais TTFB reste un mauvais TTFB, prerender ou pas. Mais sur un site déjà bien optimisé, elles effacent le dernier point de friction : le temps de transition entre pages.