Chargement spéculatif

Qu'est-ce que le chargement spéculatif ?

Le chargement spéculatif (speculative loading) consiste pour le navigateur à télécharger, voire à afficher entièrement, une page que l'utilisateur n'a pas encore ouverte, en pariant qu'il s'y rendra ensuite. Si le pari est gagné, la navigation suivante paraît quasi instantanée. S'il est perdu, la bande passante et la mémoire sont gaspillées. Sur le web aujourd'hui, la manière standard de le demander est la Speculation Rules API.

Prise en charge et statut

Soyez prudent avant de vous y fier. MDN classe la Speculation Rules API comme expérimentale et non Baseline, car elle ne fonctionne pas dans certains des navigateurs les plus utilisés. La documentation de Chrome indique une prise en charge dans Chrome et Edge (prérendu à partir de la version 109), aucune dans Firefox, et dans Safari seulement derrière un flag. Chrome précise lui-même que les pages prérendues doivent être traitées comme une suggestion et une amélioration progressive. Concevez le site pour qu'il fonctionne sans elle, et voyez la spéculation comme un bonus pour les navigateurs compatibles. Consultez les tableaux de compatibilité à jour de MDN et de developer.chrome.com avant de vous fier à un détail ci-dessous.

Fonctionnement : prefetch et prerender

Vous déclarez les règles dans un bloc <script type="speculationrules"> ou dans un fichier JSON externe désigné par l'en-tête HTTP Speculation-Rules. Deux actions comptent :

• Prefetch télécharge le corps de la réponse du document cible, mais pas ses sous-ressources. C'est peu coûteux, et le résultat est gardé en mémoire pour la navigation suivante.
• Prerender charge et affiche la page entière, JavaScript et sous-ressources compris, dans un onglet invisible. L'activer au clic est quasi instantané, mais cela coûte de la mémoire et de la bande passante : MDN conseille donc de l'utiliser avec parcimonie. Les URL prérendues sont aussi préchargées.

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/pricing" }, "eagerness": "moderate" }
  ],
  "prefetch": [
    { "urls": ["/docs", "/blog"], "eagerness": "conservative" }
  ]
}
</script>

Les règles existent sous deux formes : une liste d'urls explicites, ou des règles de document (where) qui ciblent les liens présents dans la page. Le réglage eagerness indique quand démarrer. Selon MDN, immediate démarre dès que possible, eager au moindre signe d'intention, moderate quand un lien est survolé ou ciblé un moment et conservative quand l'utilisateur commence à cliquer. Les règles de liste utilisent immediate par défaut, les règles de document conservative. Si votre site applique une Content Security Policy, les règles en ligne exigent 'inline-speculation-rules' ou un hash ou nonce dans script-src. Pour détecter la prise en charge, utilisez HTMLScriptElement.supports("speculationrules").

Limites et règles

• Le prérendu est limité par défaut aux pages de même origine. Le prérendu inter-origines d'un même site exige l'accord de la cible, et le prérendu entre sites différents n'est pas possible pour l'instant (MDN).
• Le prefetch entre sites ne fonctionne que si l'utilisateur n'a aucun cookie pour le site de destination.
• Une réponse non 2xx (après redirections) empêche le prefetch et le prerender.
• Chrome garde un prefetch environ cinq minutes : la spéculation peut donc servir un contenu légèrement périmé.
• Le navigateur peut ignorer la spéculation, par exemple avec Save-Data, une batterie faible en mode économie d'énergie ou des limites de mémoire (developer.chrome.com).

Lien avec les anciens indices

Les speculation rules sont conçues pour remplacer <link rel="prerender">, obsolète et propre à Chrome. Pour précharger des pages entières, MDN indique qu'il faut les préférer à <link rel="prefetch"> là où elles sont prises en charge, tandis que <link rel="prefetch"> reste nécessaire pour les sous-ressources. Voir le préchargement de ressources et les indices de ressources (resource hints). Ne confondez pas le prérendu du navigateur avec le prérendu à la compilation, qui génère du HTML statique à l'avance de votre côté.

Erreurs courantes

• Spéculer sur des URL à effets de bord. Déconnexion, ajout au panier, codes à usage unique et compteurs d'usage ne doivent pas s'exécuter lors d'un chargement spéculatif. MDN suggère de vérifier l'en-tête Sec-Purpose (prefetch ou prefetch;prerender) et de différer l'effet.
• Compter les prérendus comme des visites. L'analytique et les impressions publicitaires peuvent se déclencher sur une page que personne n'a vue. Différez-les jusqu'à l'activation avec document.prerendering et l'événement prerenderingchange.
• Tout prérendre. Utilisez conservative ou moderate et ne prérendez que les pages très susceptibles d'être visitées.
• S'y fier. Sans prise en charge dans Firefox ou Safari, le premier clic sur ces navigateurs reste un chargement normal.
• Oublier la fenêtre de cache. Un contenu qui doit être à jour demande de l'attention, ou Clear-Site-Data avec prefetchCache ou prerenderCache.

Chargement spéculatif et tests de performance

La spéculation aide la page suivante : elle se voit comme une navigation plus rapide, souvent sur le Largest Contentful Paint, sur les pages qui ont été spéculées. Un test de laboratoire qui ouvre une URL à froid n'en profite en général pas, et mesure la base que vous devez toujours optimiser. Gardez d'abord cette base en bonne santé. Le suivi de la vitesse de page LoadFocus lance des audits Lighthouse depuis 25 régions cloud et suit les Core Web Vitals dans le temps, et le vérificateur gratuit de Core Web Vitals donne un instantané rapide. Pour les bases des pages lentes, voir comment corriger les pages lentes à charger (en anglais).

Questions fréquentes : chargement spéculatif

La Speculation Rules API est-elle prise en charge par tous les navigateurs ?

Non. MDN la classe comme expérimentale et non Baseline. D'après la documentation de Chrome, Chrome et Edge la prennent en charge, Firefox non, et Safari seulement derrière un flag. Utilisez-la comme amélioration progressive.

Quelle différence entre prefetch et prerender ?

Prefetch télécharge uniquement le HTML de la page. Prerender charge et affiche la page entière, JavaScript compris, dans un onglet caché pour l'afficher instantanément au clic.

Le chargement spéculatif a-t-il un coût ?

Oui. Une spéculation inutilisée gaspille bande passante, mémoire et CPU, chez le visiteur comme sur votre serveur. Ne prérendez que les pages très susceptibles d'être visitées.

Peut-il perturber mon analytique ?

Oui, si votre analytique se déclenche au chargement. Une page prérendue exécute ses scripts avant que l'utilisateur ne la voie : différez donc le suivi des pages vues jusqu'à l'activation.

Est-ce la même chose que le chargement différé ?

Non. Le chargement différé retarde des ressources dont la page actuelle n'a peut-être pas encore besoin. Le chargement spéculatif récupère les ressources d'une page que l'utilisateur pourrait ouvrir ensuite.