Speculation Rules API

Définition

API navigateur qui déclare, en JSON dans une balise <script type="speculationrules"> ou un en-tête HTTP, quelles pages précharger (prefetch) ou pré-rendre entièrement en arrière-plan (prerender) : au clic, la navigation est instantanée. Le niveau d'agressivité (eagerness) va de « immédiate » à « conservative » (au survol ou au mousedown). Supportée par les navigateurs Chromium ; MDN la classe encore en disponibilité limitée.

Analogie

Le serveur qui commence à préparer le dessert dès qu'il vous voit regarder la carte : si vous commandez, il arrive tout de suite ; sinon, une petite perte.

Exemple de code

<!-- Pré-rendu des liens produit quand l'utilisateur les survole -->
<script type="speculationrules">
{
  "prerender": [{
    "where": { "and": [
      { "href_matches": "/produit/*" },
      { "not": { "selector_matches": ".no-prerender" } }
    ]},
    "eagerness": "moderate"
  }],
  "prefetch": [{ "urls": ["/panier", "/compte"], "eagerness": "conservative" }]
}
</script>

Cas d'usage

Sites de contenu ou e-commerce où la page suivante est prévisible ; gain direct sur le LCP des navigations internes.

Anti-pattern

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
• developer.chrome.com/docs/web-platform/prerender-pages