La nouvelle règle de spéculation Prerender Until Script

Statut de l'Origin Trial : Cette fonctionnalité est actuellement une Origin Trial. Pour l'implémenter, vous devez vous inscrire pour obtenir un jeton Origin Trial ou l'activer localement via chrome://flags. Malgré sa nature expérimentale, les premiers retours de la communauté des ingénieurs indiquent une stabilité et des améliorations de performance exceptionnelles.

Prerender Until Script : Le nouveau mode pour le chargement spéculatif

La latence est le goulot d'étranglement. Je le dis depuis des années, et cela reste le problème le plus important en matière de performance web. Peu importe à quel point nous optimisons notre chemin de rendu critique ou réduisons nos bundles de quelques kilo-octets, nous sommes finalement lié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 : deviner où l'utilisateur ira ensuite et le charger à l'avance. Jusqu'à présent, nous disposions de 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 toujours analyser, construire le DOM et découvrir les sous-ressources (CSS, images) après le clic de l'utilisateur. Il résout l'attente du réseau, mais pas le travail de rendu.
• prerender : L'option nucléaire. Il charge tout, exécute le JavaScript et rend la page dans un onglet d'arrière-plan caché. C'est instantané, mais c'est coûteux. Il consomme de la bande passante, de la mémoire, et pire encore, il déclenche des "effets secondaires", déclenchant des pixels d'analyse et exécutant du code pour des pages que l'utilisateur pourrait ne jamais voir.

Nous avions évidemment besoin d'un juste milieu. Nous avions besoin de la disponibilité visuelle d'un prerender sans le coût de calcul et le risque d'exécuter la logique de l'application.

prerender_until_script.

Le génie de prerender_until_script réside dans la façon dont il dissocie l'analyse de l'exécution.Lorsque vous utilisez cette règle de spéculation spécifique, vous demandez au navigateur de :

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

Cependant, au moment où l'analyseur rencontre un point d'exécution JavaScript, 2 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 pas exécutés.

Le navigateur construit la "coquille" visuelle de la page : La mise en page, la typographie, les images—mais laisse la logique de l'application gelée. La page reste en mémoire, chimiquement stable, attendant que l'utilisateur clique.

Lorsque le clic se produit, la page est échangée instantanément, et l'état "en pause" est levé. Le JavaScript s'exécute, les gestionnaires d'événements s'attachent et vos analyses se déclenchent exactement quand elles le doivent.

L'implémentation

Nous implémentons cela en utilisant l'API Speculation Rules. Comme prerender_until_script est une fonctionnalité expérimentale (arrivant dans Chrome 144), nous devons assurer la rétrocompatibilité.

Les navigateurs qui ne reconnaissent pas la clé prerender_until_script l'ignoreront. Par conséquent, une implémentation responsable définit un fallback prefetch pour le même ensemble d'URL. Chrome dédupliquera automatiquement ces règles et appliquera l'action la plus performante disponible.

Voici la structure JSON pour une implémentation prête pour la production ::

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

Astuce : si vous souhaitez générer rapidement votre propre ensemble personnalisé de règles de spéculation, vous pouvez utiliser le [url="/tools/speculation-rules-generator"]générateur de règles de spéculation[/url]

Considérations

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

Exclusions : Vous devez être discipliné ici. Ne spéculez jamais sur des URL qui changent l'état comme /logout ou /add-to-cart. Bien que prerender_until_script protège contre l'exécution de scripts, une bonne architecture dicte que nous ne devrions même pas récupérer ces endpoints inutilement.

Faiblesse (Blocage de l'analyseur) : L'analyseur s'arrête immédiatement lorsqu'il rencontre une balise <script> synchrone. Cela annule les améliorations comme <script>loadWhileIdle(chat.js)</script> si elles apparaissent tôt dans le DOM. Vous devrez peut-être refactoriser le code existant pour placer ces scripts en bas de la page.

Gestionnaires en ligne : Notez que prerender_until_script ne met en pause que les éléments <script>. Les gestionnaires d'événements en ligne sur d'autres éléments (par exemple, <img onload="track()">) s'exécuteront toujours si l'analyseur les atteint avant un script bloquant. Assurez-vous que vos pixels d'analyse et votre logique de suivi ne sont pas déclenchés par ces gestionnaires en ligne pendant la phase de spéculation.