Prerender Until Script : Le juste milieu entre prefetch et prerender

Origin Trial : prerender_until_script est disponible sous forme d'Origin Trial dans Chrome 144 à 150. Vous devez vous inscrire pour obtenir un jeton ou l'activer localement via chrome://flags/#prerender-until-script. Aucun Intent to Ship n'a encore été déposé.

Dernière révision par Arjen Karel en mars 2026

Prerender Until Script : Le nouveau mode de chargement spéculatif

La latence est le goulot d'étranglement. Je le dis depuis des années, et cela reste le problème majeur des performances web. Peu importe à quel point nous optimisons notre chemin critique de rendu (Critical Rendering Path) ou supprimons des kilo-octets de nos bundles, nous sommes en fin de compte limités par les lois de la physique et le temps d'aller-retour (RTT) du réseau.

Pendant longtemps, nous avons essayé de contourner ces lois en utilisant le chargement spéculatif (Speculative Loading) : deviner où l'utilisateur ira ensuite et le charger à l'avance. Jusqu'à présent, nous avions deux outils principaux, et aucun n'était parfait :

• prefetch : Sûr et léger, mais il ne récupère que le HTML. Le navigateur doit encore analyser, construire le DOM et découvrir les sous-ressources (CSS, images) après le clic de l'utilisateur. Cela résout l'attente réseau, mais pas le travail de rendu.
• prerender : L'option nucléaire. Il charge tout, exécute le JavaScript et effectue le rendu de la page dans un onglet en arrière-plan masqué. C'est instantané, mais c'est coûteux. Cela consomme de la bande passante, de la mémoire, déclenche des pixels d'analyse et exécute du code pour des pages que l'utilisateur pourrait ne jamais voir.

Nous avions besoin d'un juste milieu. La disponibilité visuelle d'un prerender sans le coût ni le risque d'exécuter la logique applicative.

Comment fonctionne prerender_until_script

prerender_until_script découple l'analyse de l'exécution. Lorsque vous utilisez cette Speculation Rule, vous demandez au navigateur de :

• Récupérer le document (comme un prefetch).
• Analyser le flux HTML et construire le DOM.
• Exécuter le Preload Scanner. C'est la partie critique. Le navigateur découvre et télécharge les sous-ressources telles que le CSS à haute priorité et l'image LCP.

Au moment où l'analyseur (parser) rencontre un point d'exécution JavaScript, deux choses peuvent se produire :

• Scripts synchrones : L'analyseur s'arrête immédiatement.
• Scripts async/defer : Ils sont téléchargés et mis en file d'attente, mais ne sont pas exécutés.

Le navigateur construit la coquille visuelle de la page : la mise en page, la typographie, les images. Mais la logique applicative reste gelée. La page reste en mémoire, entièrement mise en page, en attendant que l'utilisateur clique.

Lorsque le clic se produit, la page est intervertie instantanément. Le JavaScript s'exécute, les gestionnaires d'événements s'attachent et vos analyses se déclenchent exactement quand elles le devraient.

Prefetch vs prerender_until_script vs prerender

* Le prerender complet peut se prémunir contre les analyses prématurées en utilisant document.prerendering, mais vous devez ajouter ce code vous-même.

C'est pourquoi prerender_until_script est important. Vous obtenez le chargement des sous-ressources et la construction du DOM d'un prerender complet, mais sans la pollution analytique et le coût en mémoire de l'exécution du JavaScript. Pour les sites de contenu avec de lourds scripts tiers, c'est le compromis idéal.

L'implémentation

Nous implémentons cela en utilisant la Speculation Rules API. Parce que prerender_until_script est expérimental (Origin Trial, Chrome 144 à 150), vous avez besoin d'une rétrocompatibilité.

Les navigateurs qui ne reconnaissent pas la clé prerender_until_script l'ignoreront. Ajoutez un fallback prefetch pour le même ensemble d'URLs. Chrome dédupliquera ces règles et appliquera l'action la plus performante disponible.

<script type="speculationrules">
{
  "prerender_until_script": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart" } }
        ]
      },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Le bloc prefetch sert de fallback. Dans les navigateurs prenant en charge prerender_until_script, Chrome choisit automatiquement l'action la plus performante. Dans les navigateurs qui ne le font pas, la règle prefetch s'exécute toujours. Vous obtenez le meilleur comportement disponible sans user-agent sniffing.

Si vous souhaitez générer votre propre ensemble personnalisé de speculation rules, utilisez le générateur de speculation rules.

Comment activer prerender_until_script

Puisqu'il s'agit d'un Origin Trial, vous avez deux options :

1. S'inscrire pour obtenir un jeton Origin Trial sur le tableau de bord des Origin Trials de Chrome. Ajoutez le jeton sous forme de balise <meta> dans votre <head> : <meta http-equiv="origin-trial" content="YOUR_TOKEN">
2. Tester localement en accédant à chrome://flags/#prerender-until-script et en activant le flag.

L'Origin Trial se déroule de Chrome 144 (janvier 2026) à Chrome 150 (environ mi-2026). Si l'équipe Chrome le déploie en tant que fonctionnalité stable par la suite, le jeton ne sera plus nécessaire. L'article de blog officiel de Chrome couvre tous les détails.

Performance des speculation rules dans le monde réel

Personne n'a encore publié de benchmarks pour prerender_until_script (c'est trop récent). Mais la Speculation Rules API plus globale dispose de données concrètes provenant de déploiements majeurs :

• Ray-Ban a implémenté des speculation rules avec prerender et a constaté une amélioration de 43 % du LCP sur mobile (de 4,69 s à 2,66 s). Les taux de conversion ont doublé.
• Shopify a déployé des speculation rules avec prefetch sur toutes les vitrines Liquid et a mesuré un gain de 130 ms sur ordinateur et de 180 ms sur mobile sur l'ensemble des métriques de chargement.
• Cloudflare Speed Brain utilise des speculation rules avec un modèle de prédiction ML et rapporte une réduction de 45 % du LCP sur les prefetches réussis.

L'adoption croît rapidement. Selon le Web Almanac 2025, 35 % des sites web mobiles utilisent désormais la Speculation Rules API. La majeure partie de cette croissance provient de WordPress 6.8, qui a intégré les speculation rules dans son cœur en mars 2025.

prerender_until_script devrait fournir des résultats situés entre le prefetch et le prerender complet. Les sous-ressources sont déjà en cache et le DOM est construit. Le seul travail restant lors de l'activation est l'exécution des scripts. Sur les sites surveillés par CoreDash, je vois généralement les speculation rules réduire le LCP des navigations suivantes de 30 à 50 %.

Considérations

Eagerness : Je recommande presque exclusivement moderate. Cela déclenche la spéculation au survol (lorsque le pointeur s'attarde pendant 200 ms). immediate est trop agressif pour la plupart des sites et risque de gaspiller de la bande passante sur les connexions mobiles.

Exclusions : Soyez discipliné ici. Ne spéculez jamais sur des URLs modifiant l'état comme /logout ou /add-to-cart. Bien que prerender_until_script protège contre l'exécution des scripts, vous ne devriez même pas récupérer ces endpoints inutilement.

Blocage de l'analyseur (Parser blocking) : L'analyseur s'arrête immédiatement lorsqu'il rencontre une balise <script> synchrone. Si vous avez des scripts en ligne tôt dans le DOM (par exemple, <script>loadWhileIdle(chat.js)</script>), le prerender s'arrêtera là. Déplacez les scripts en bas de la page ou utilisez defer pour maximiser la portion du DOM qui sera préconstruite.

Gestionnaires en ligne (Inline handlers) : prerender_until_script ne met en pause que les éléments <script>. Les gestionnaires d'événements en ligne sur d'autres éléments (comme <img onload="track()">) s'exécuteront toujours si l'analyseur les atteint avant un script bloquant. Assurez-vous que vos analyses et votre suivi ne sont pas déclenchés par des gestionnaires en ligne.

Vous pouvez déboguer les speculation rules dans les Chrome DevTools sous le panneau Application. Le panneau Network des Chrome DevTools affichera également les requêtes spéculatives avec une icône distincte. Utilisez le Real User Monitoring (RUM) pour vérifier l'impact réel sur l'INP et le LCP après le déploiement des speculation rules en production.