Les règles de spéculation peuvent être utilisées pour précharger et préafficher les navigations vers les pages suivantes, comme indiqué dans cet article précédent. Cela peut permettre un chargement des pages beaucoup plus rapide, voire instantané, ce qui améliore considérablement les Core Web Vitals pour ces navigations supplémentaires sur les pages.
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 de DevTools 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 pour les développeurs avec le débogage des règles de spéculation. Dans cet article, vous découvrirez toutes les différentes 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 DevTools les plus familières, et quand ils ne peuvent pas.
Explication des termes "pré-"
De nombreux termes "pré-" sont source de confusion. Nous allons donc commencer par les expliquer:
- Préchargement: 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 de l'option
<link rel="prefetch">similaire, mais plus ancienne, souvent utilisée pour précharger des sous-ressources. - Préchargement: cette technique va plus loin que le préchargement et affiche l'intégralité de la page comme si l'utilisateur y avait accédé, mais la conserve dans un processus de rendu en arrière-plan masqué, prêt à être utilisé si l'utilisateur y accède réellement. Encore une fois, ce document concerne la nouvelle version de l'API Speculation Rules, et non l'ancienne option
<link rel="prerender">(qui ne génère plus de prérendu complet). - Navigations spéculatives: terme collectif désignant les nouvelles options de préchargement et de prérendu déclenchées par des règles de spéculation.
- Préchargement: terme surchargé pouvant désigner un certain nombre de technologies et de processus, y compris
<link rel="preload">, le lecteur de préchargement et les préchargements de navigation du service worker. 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"]
}
]
}
</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 les résultats stockés dans le cache de mémoire plutôt que dans le cache de disque HTTP.
Déboguer les règles de spéculation prefetch
Les préchargements déclenchés par des règles de spéculation peuvent être consultés dans le panneau Network (Réseau) de la même manière que les autres récupérations:
Les deux requêtes en surbrillance en rouge correspondent aux ressources préchargées, comme indiqué dans la colonne Type. Elles sont récupérées en priorité Lowest, car elles sont destinées aux futures navigations, et Chrome donne la priorité aux ressources de la page actuelle.
Cliquez sur l'une des lignes pour afficher l'en-tête HTTP Sec-Purpose: prefetch, qui permet d'identifier ces requêtes côté serveur:
Déboguer prefetch avec les onglets "Chargement spéculatif"
Une nouvelle section Chargements spéculatifs a été ajoutée dans le panneau Application de Chrome DevTools, sous la section Services d'arrière-plan, pour faciliter le débogage des règles de spéculation:
Trois onglets sont disponibles dans cette section:
- Chargements spéculatifs, qui indique l'état de prérendu de la page actuelle.
- Règles, qui liste tous les ensembles de règles trouvés sur la page active.
- Speculations (Spéculations), qui liste toutes les URL préchargées et prérendues des ensembles de règles.
L'onglet Spéculations est affiché dans la capture d'écran précédente. Nous pouvons voir que cette page d'exemple comporte un seul ensemble de règles de spéculation pour précharger trois pages. Deux de ces préchargements ont réussi et un a échoué. Vous pouvez cliquer sur l'icône à côté de Ensemble de règles pour accéder à la source de l'ensemble de règles dans le panneau Éléments. Vous pouvez également cliquer sur le lien État pour accéder à l'onglet Spéculations filtré selon ce jeu de règles.
L'onglet Speculations liste toutes les URL cibles, ainsi que l'action (préchargement ou prérendu), le jeu de règles dont elles proviennent (il peut y en avoir plusieurs sur une page) et l'état de chaque spéculation:
Au-dessus des URL, un menu déroulant permet d'afficher les URL de tous les ensembles de règles ou uniquement celles d'un ensemble de règles spécifique. Sous cette section, toutes les URL sont listées. Cliquez sur une URL pour obtenir des informations plus détaillées.
Dans cette capture d'écran, vous pouvez voir la raison de l'échec de la page next3.html (qui n'existe pas et renvoie donc un code d'état HTTP autre que 2xx, à savoir 404).
L'onglet "Résumé", Chargements spéculatifs, affiche un rapport État de chargement spéculatif pour cette page pour indiquer si un préchargement ou un prérendu a été utilisé pour cette page ou non.
Pour une page préchargée, un message de réussite doit s'afficher lorsque vous accédez à cette page:
Spéculations sans correspondance
Lorsqu'une navigation se produit à partir d'une page avec des règles de spéculation qui ne génère pas de préchargement ou de prérendu, une section supplémentaire de l'onglet fournit plus d'informations sur la raison pour laquelle l'URL ne correspond à aucune des URL de spéculation. Cela permet de repérer les fautes de frappe dans vos règles de spéculation.
Par exemple, nous avons accédé à next4.html, mais seuls next.html, next2.html ou next3.html sont des préchargements. Nous pouvons donc constater que cela ne correspond pas vraiment à l'une de ces trois règles.
Les onglets Charges spéculatives sont très utiles pour déboguer les règles de spéculation elles-mêmes et détecter d'éventuelles erreurs de syntaxe dans le fichier JSON.
Pour les préchargements eux-mêmes, le panneau Network (Réseau) est probablement plus familier. Pour l'exemple d'échec de préchargement, vous pouvez voir l'erreur 404 pour le préchargement ici:
Toutefois, les onglets Charges spéculatives sont beaucoup plus utiles pour les règles de spéculation de préchargement, qui sont abordées ci-dessous.
Règles de spéculation pour prerender
Les règles de spéculation de préchargement suivent la même syntaxe que les règles de spéculation de préchargement. Exemple :
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Cet ensemble de règles déclenche un chargement et un rendu complets des pages spécifiées (sous réserve de certaines restrictions). Cela peut offrir une expérience de chargement instantanée, mais avec des coûts de ressources supplémentaires.
Contrairement aux préchargements, ils ne sont pas visibles dans le panneau Network (Réseau), car ils sont récupérés et affichés dans un processus de rendu distinct dans Chrome. Par conséquent, les onglets Charges spéculatives sont plus importants pour déboguer les règles de spéculation de prérendu.
Déboguer prerender avec les onglets "Chargements spéculatifs"
Les mêmes écrans Charges spéculatives peuvent être utilisés pour les règles de préchargement spéculatif, comme illustré par une page de démonstration similaire qui tente de précharger au lieu de précharger les trois pages:
Nous voyons ici à nouveau qu'une des trois URL n'a pas été prérendue. Les développeurs peuvent obtenir les détails par URL dans l'onglet Speculations (Spéculations) en cliquant sur le lien 2 Ready, 1 Failure (2 prêts, 1 échec).
Dans Chrome 121, nous avons lancé la prise en charge des règles de document. Cela permet au navigateur de les récupérer à partir des liens de même origine sur la page, plutôt que de lister un ensemble spécifique d'URL:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
Cet exemple sélectionne tous les liens de même origine, à l'exception de ceux commençant par /not-safe-to-prerender, comme candidats au prérendu.
Il définit également le prérendu eagerness sur moderate, ce qui signifie que les navigations sont prérendues lorsque l'utilisateur pointe sur le lien ou clique dessus.
Vous trouverez des règles similaires sur le site de démonstration des règles spéculatives. La nouvelle section Chargements spéculatifs de ce site montre l'utilité de ce nouvel onglet, car toutes les URL éligibles trouvées par le navigateur sur la page sont listées:
L'état est Non déclenché, car le processus de prérendu n'a pas commencé. Cependant, lorsque nous maintenons le pointeur sur les liens, l'état change à mesure que chaque URL est pré-rendue:
Chrome a défini des limites pour les prérendus, y compris un maximum de deux prérendus pour l'empressement moderate. Par conséquent, lorsque vous pointez sur le troisième lien, vous voyez le motif d'échec de cette URL:
Déboguer prerender avec les autres panneaux DevTools
Contrairement aux préchargements, les pages prérendues n'apparaissent pas dans les processus de rendu actuels des panneaux DevTools, comme le panneau Network (Réseau), car elles sont rendues dans leur propre moteur de rendu en coulisses.
Toutefois, il est désormais possible de changer le moteur de rendu utilisé par les panneaux des outils de développement à l'aide du menu déroulant en haut à droite, ou en sélectionnant une URL dans la partie supérieure du panneau et en cliquant sur Inspecter:
Ce menu déroulant (et la valeur sélectionnée) est également partagé entre tous les autres panneaux, comme le panneau Network (Réseau), où vous pouvez voir que la page demandée est celle prérendu:
En examinant les en-têtes HTTP de ces ressources, nous pouvons voir qu'ils seront tous définis avec l'en-tête Sec-Purpose: prefetch;prerender:
Vous pouvez également utiliser le panneau Éléments, qui affiche le contenu de la page, comme dans la capture d'écran suivante, où l'élément <h1> est utilisé pour la page prérendu:
Vous pouvez également accéder au panneau de la console, où vous pouvez consulter les journaux de la console émis par la page prérendu:
Déboguer les règles de spéculation sur la page prérendu
Les sections précédentes expliquent comment déboguer les pages prérendues sur la page qui lance le prérendu. Toutefois, les pages prérendues elles-mêmes peuvent également fournir des informations de débogage, soit en effectuant des appels d'analyse, soit en enregistrant des informations dans la console (qui est visible comme décrit dans la section précédente).
De plus, une fois qu'une page prérendu est activée par l'utilisateur qui y accède, l'onglet Chargements spéculatifs affiche cet état et indique si le prérendu a réussi ou non. Si la précharge n'a pas pu être effectuée, une explication est fournie:
De plus, comme pour les préchargements, si vous naviguez à partir d'une page dont les règles de spéculation ne correspondent pas à la page actuelle, l'onglet Chargements spéculatifs tentera de vous expliquer pourquoi les URL ne correspondent pas à celles couvertes par les règles de spéculation de la page précédente:
Conclusion
Dans cet article, nous avons présenté les différentes manières dont les développeurs peuvent déboguer les règles de préchargement et de pré-rendu par spéculation. L'équipe continue de travailler sur les outils pour les règles de spéculation. Nous aimerions connaître les suggestions des développeurs sur d'autres façons de déboguer cette nouvelle API passionnante. Nous invitons les développeurs à signaler tout problème dans l'outil de suivi des problèmes Chrome pour toute demande de fonctionnalité ou tout bug détecté.
Remerciements
Image de vignette par Nubelson Fernandes sur Unsplash.