Les règles de spéculation peuvent être utilisées pour précharger et prérendre les pages de navigation suivantes, comme indiqué dans l'article précédent. Cela peut permettre un chargement beaucoup plus rapide, voire instantané, des pages, ce qui améliore considérablement les Core Web Vitals pour ces navigations supplémentaires.
Le débogage des règles de spéculation peut s'avérer délicat. C'est particulièrement vrai pour les pages prérendues, car elles sont affichées dans un moteur de rendu distinct, un peu comme un onglet d'arrière-plan masqué qui remplace l'onglet actuel lorsqu'il est activé. Par conséquent, les options habituelles des outils pour les développeurs ne peuvent pas toujours être utilisées pour déboguer les problèmes.
L'équipe Chrome s'est efforcée d'améliorer la compatibilité des outils de développement pour le débogage des règles de spéculation. Dans cet article, vous découvrirez toutes les façons d'utiliser ces outils pour comprendre les règles de spéculation d'une page, pourquoi elles ne fonctionnent pas et quand les développeurs peuvent utiliser les options plus familières des outils de développement (et quand ils ne le peuvent pas).
Explication des termes commençant par "pré-"
De nombreux termes commençant par "pré-" sont source de confusion. Nous allons donc commencer par les expliquer :
- Prérécupération : récupération d'une ressource ou d'un document à l'avance pour améliorer les performances futures. Cet article explique comment précharger des documents à l'aide de l'API Speculation Rules, plutôt que l'option
<link rel="prefetch">similaire, mais plus ancienne, souvent utilisée pour précharger des sous-ressources. - Prérendu : cette technique va plus loin que la prélecture. Elle consiste à afficher l'intégralité de la page comme si l'utilisateur y avait accédé, mais en la conservant dans un processus de rendu en arrière-plan masqué, prête à être utilisée si l'utilisateur y accède réellement. Encore une fois, ce document concerne la version la plus récente de l'API Speculation Rules, et non l'ancienne option
<link rel="prerender">(qui n'effectue plus de prérendu complet). - Navigations spéculatives : terme générique désignant les nouvelles options de préchargement et de prérendu déclenchées par les règles de spéculation.
- Préchargement : terme surchargé qui peut faire référence à un certain nombre de technologies et de processus, y compris
<link rel="preload">, le scanner de préchargement et les préchargements de navigation des service workers. Ces éléments ne seront pas abordés ici, mais le terme est inclus pour les différencier clairement du terme "navigations spéculatives".
Règles de spéculation pour prefetch
Les règles de spéculation peuvent être utilisées pour précharger le document de la prochaine navigation. Par exemple, lorsque vous insérez le code JSON suivant dans une page, next.html et next2.html sont préchargés :
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
L'utilisation de règles de spéculation pour les préchargements de navigation présente certains avantages par rapport à l'ancienne syntaxe <link rel="prefetch">, comme une API plus expressive et le stockage des résultats dans le cache mémoire plutôt que dans le cache disque HTTP.
Déboguer les règles de spéculation prefetch
Les préchargements déclenchés par des règles de spéculation sont visibles dans le panneau Réseau de la même manière que les autres récupérations :