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 concerne le préchargement de documents à l'aide de l'API Speculation Rules, plutôt que l'option
<link rel="prefetch">similaire, mais plus ancienne, souvent utilisée pour le préchargement des sous-ressources. - Prérendu: au-delà du préchargement, la page entière s'affiche comme si l'utilisateur y avait accédé. Elle la conserve dans un processus de moteur de rendu en arrière-plan caché, prêt à être utilisé si l'utilisateur y accède réellement. Là encore, ce document concerne la version la plus récente de l'API Speculation Rules, plutôt que l'ancienne option
<link rel="prerender">(qui ne réalise plus de prérendu complet). - Spéculations de navigation: 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 complexe qui peut faire référence à un certain nombre de technologies et de processus, y compris
<link rel="preload">, l'outil d'analyse du préchargement et les préchargements de navigation pour les services workers. Ces éléments ne seront pas abordés ici, mais le terme est inclus pour les différencier clairement du terme "speculations sur la navigation".
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 le stockage des résultats dans le cache de la mémoire plutôt que dans le cache du disque HTTP.
Déboguer les règles de spéculation prefetch
Les préchargements déclenchés par des règles de spéculation s'affichent dans le panneau Network de la même manière que les autres extractions:
Les deux requêtes en surbrillance en rouge sont les ressources préchargées, comme le montre la colonne Type. Elles sont récupérées avec la priorité Lowest, comme c'est le cas pour les 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 au panneau Application des outils pour les développeurs Chrome, dans 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:
- La section Chargements spéculatifs indique l'état 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é. Cliquez sur l'icône située à 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é sur cet ensemble de règles.
L'onglet Spéculations 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. Toutes les URL sont listées en dessous. 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écapitulatif Chargements spéculatifs affiche le rapport État du chargement spéculatif pour cette page. Il indique si un préchargement ou un prérendu a été utilisé pour cette page ou non.
Pour une page préchargée, un message indiquant que l'opération a réussi doit s'afficher lorsque l'utilisateur accède à 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, dans cet 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 à aucune 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:
Cependant, les onglets Chargements spéculatifs deviennent beaucoup plus utiles pour les règles de spéculation en prérendu, que nous aborderons plus bas.
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 le chargement et l'affichage 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. Les onglets Chargements spéculatifs sont donc 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 mêmes liens d'origine sur la page, au lieu de répertorier 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 mêmes liens d'origine, à l'exception de ceux commençant par /not-safe-to-prerender en tant que propositions de prérendu.
Il définit également le eagerness prérendu 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ée, car le processus de prérendu n'a pas démarré. Toutefois, lorsque nous passons le pointeur sur les liens, nous voyons que l'état change à mesure que chaque URL est préchargée:
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, après avoir pointé sur le troisième lien, nous voyons 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é-rendue:
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 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 vu les différentes façons dont les développeurs peuvent déboguer les règles de préchargement et de prérendu de 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.