Les règles de spéculation peuvent être utilisées pour précharger et précharger les navigations sur 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 le rapport Core Web Vitals pour ces navigations supplémentaires.
Le débogage des règles de spéculation peut s'avérer délicat. Cela est particulièrement vrai pour les pages prérendues, car ces pages 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 de développement ne peuvent pas toujours être utilisées pour déboguer les problèmes.
L'équipe Chrome a travaillé dur pour améliorer la compatibilité des outils de développement avec le débogage des règles de spéculation. Dans cet article, vous découvrirez les différentes façons d'utiliser ces outils pour comprendre les règles de spéculation d'une page, comprendre pourquoi elles ne fonctionnent pas et quand les développeurs peuvent utiliser les options des outils de développement, plus familières, et quand ce n'est pas le cas.
Explication des termes "précédents"
De nombreux termes "pré-" étant souvent confondus, commençons par une explication de ceux-ci:
- Préchargement: permet de récupérer à l'avance une ressource ou un document pour améliorer les performances futures. Cet article concerne le préchargement de documents à l'aide de l'API Speculation Rules, plutôt qu'avec l'option
<link rel="prefetch">similaire, mais plus ancienne, souvent utilisée pour précharger les sous-ressources. - Prérendu: il va au-delà du préchargement et affiche la page entière comme si l'utilisateur y avait accédé, mais la conserve dans un processus de moteur de rendu masqué en arrière-plan, prêt à être utilisé si l'utilisateur y navigue. Là encore, ce document concerne la nouvelle version de l'API Speculation Rules, plutôt que l'ancienne option
<link rel="prerender">(qui n'effectue 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 les règles de spéculation.
- Préchargement: terme surchargé qui peut désigner un certain nombre de technologies et de processus, y compris
<link rel="preload">, l'outil d'analyse de préchargement et les préchargements de navigation par service worker. Ces éléments ne seront pas traités ici, mais ce terme est utilisé pour différencier clairement ceux du terme "spéculations 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 navigation suivante. 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">, par exemple une API plus expressive et le stockage des résultats dans le cache 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 s'affichent dans le panneau Network de la même manière que les autres extractions:
Les deux requêtes mises en surbrillance en rouge sont les ressources préchargées, comme indiqué dans la colonne Type. Elles sont récupérées avec la priorité Lowest, comme c'est le cas pour les navigations futures, 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 de chargement spéculatif
Une nouvelle section Chargements spéculatifs a été ajoutée dans la section Services d'arrière-plan du panneau Application des outils pour les développeurs Chrome afin de faciliter le débogage des règles de spéculation:
Trois onglets sont disponibles dans cette section:
- Chargements spéculatifs : indique l'état de prérendu de la page actuelle.
- Règles : liste de tous les jeux de règles disponibles sur la page actuelle.
- Speculations (Spéculations) : liste de toutes les URL préchargées et prérendues des jeux de règles.
L'onglet Speculations (Spéculations) est illustré dans la capture d'écran précédente. Comme vous pouvez le voir, cet exemple de page comporte un seul ensemble de règles de spéculation pour le préchargement de trois pages. Deux de ces préchargements ont réussi et un a échoué. Cliquez sur l'icône à côté de Jeu de règles pour accéder à la source du jeu de règles dans le panneau Éléments. Vous pouvez également cliquer sur le lien Status (État) pour accéder à l'onglet Speculations (Spéculations) filtré vers cet ensemble de règles.
L'onglet Speculations (Spéculations) répertorie toutes les URL cibles, ainsi que l'action (précharger ou prérendu), l'ensemble de règles d'où elles proviennent (car il peut y en avoir plusieurs sur une page) et l'état de chaque spéculation:
Au-dessus des URL, un menu déroulant vous permet d'afficher les URL de tous les jeux de règles ou uniquement celles d'un jeu de règles particulier. En dessous, toutes les URL sont listées. Cliquez sur une URL pour obtenir des informations plus détaillées.
Dans cette capture d'écran, nous pouvons voir le motif de l'échec de la page next3.html (qui n'existe pas et qui renvoie donc un code d'état HTTP autre que 2xx).
L'onglet récapitulatif Chargements spéculatifs affiche un rapport sur l'état de chargement spéculatif pour cette page pour indiquer si un préchargement ou un prérendu a été utilisé ou non pour cette page.
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 n'entraînent pas l'utilisation d'un préchargement ou d'un prérendu, une section supplémentaire de l'onglet affiche davantage de détails sur la raison pour laquelle l'URL ne correspond à aucune des URL de spéculation. Cela est utile pour 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 constatons que cela ne correspond pas tout à fait à l'une de ces trois règles.
Les onglets Chargements spéculatifs sont très utiles pour déboguer les règles de spéculation elles-mêmes et détecter les erreurs de syntaxe dans le fichier JSON.
En ce qui concerne les préchargements eux-mêmes, le panneau Network est probablement un endroit plus familier. Pour l'exemple d'échec du préchargement, l'erreur 404 du préchargement est indiquée ici:
Toutefois, les onglets Chargements spéculatifs s'avèrent beaucoup plus utiles pour le prérendu des règles de spéculation, que nous allons aborder ci-après.
Règles de spéculation pour prerender
Les règles de spéculation de prérendu 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 complet et l'affichage des pages spécifiées (sous réserve de certaines restrictions). Le chargement peut ainsi être instantané, mais les coûts de ressources supplémentaires s'en trouvent accrus.
Cependant, contrairement aux préchargements, ceux-ci ne sont pas visibles dans le panneau Network, car ils sont récupérés et affichés dans un processus d'affichage distinct dans Chrome. Ainsi, les onglets Chargements spéculatifs sont plus importants pour déboguer les règles de spéculation de prérendu.
Déboguer prerender avec les onglets de chargements spéculatifs
Vous pouvez utiliser les mêmes écrans Chargements spéculatifs pour les règles de spéculation, comme illustré sur une page de démonstration similaire qui tente de précharger au lieu de précharger les trois pages:
Nous constatons à nouveau que le prérendu de l'une des trois URL a échoué. Les développeurs peuvent obtenir les détails par URL dans l'onglet Speculations (Spéculations) en cliquant sur le lien 2 Ready, 1 Filure.
Dans Chrome 121, nous avons lancé la prise en charge des règles de document. Le navigateur peut ainsi les sélectionner à partir des liens d'origine identiques qui figurent 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 liens d'origine identiques, à l'exception de ceux commençant par /not-safe-to-prerender en tant que 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 ou clique sur le lien.
Il existe des règles similaires sur ce site de démonstration. La nouvelle section Chargements spéculatifs de ce site montre l'utilité de ce nouvel onglet, car toutes les URL éligibles que le navigateur trouvées sur la page sont listées:
L'état est Non déclenché, car le processus de prérendu pour ceux-ci n'a pas démarré. Toutefois, lorsque nous passons la souris sur les liens, nous constatons que l'état change à mesure que les URL sont prérendues:
Chrome a défini des limites concernant les prérendus, y compris un maximum de deux prérendus pour le niveau de persévérance moderate. Ainsi, après avoir pointé sur le troisième lien, nous voyons le motif de l'échec de cette URL:
Déboguer prerender avec les autres panneaux des outils de développement
Contrairement aux préchargements, les pages prérendues ne s'afficheront pas dans les processus d'affichage actuels dans les panneaux des outils de développement, comme le panneau Network, car elles sont affichées dans leur propre moteur de rendu en arrière-plan.
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 sélectionnant Inspecter:
Ce menu déroulant (et la valeur sélectionnée) est partagé entre tous les autres panneaux, tels que le panneau Network (Réseau), où vous pouvez voir la page demandée est celle prérendue:
En examinant les en-têtes HTTP de ces ressources, nous pouvons voir qu'ils sont tous définis avec l'en-tête Sec-Purpose: prefetch;prerender:
Ou dans le panneau Elements, où vous pouvez voir le contenu de la page, comme dans la capture d'écran suivante, où l'élément <h1> correspond à la page prérendue:
Vous pouvez également accéder au panneau de la console, qui contient les journaux de la console émis par la page prérendue:
Déboguer les règles de spéculation sur la page prérendue
Les sections précédentes expliquent comment déboguer les pages prérendues sur la page qui lance le prérendu. Cependant, les pages prérendues peuvent également fournir elles-mêmes des informations de débogage, soit en effectuant des appels d'analyse ou en se connectant à la console (visible comme décrit dans la section précédente).
De plus, lorsqu'une page prérendue est activée par l'utilisateur qui y accède, l'onglet Chargements spéculatifs affiche cet état et indique si elle a bien été prérendue ou non. S'il n'a pas pu être prérendu, une explication est fournie:
De plus, comme c'est le cas pour les préchargements, lorsque vous naviguez à partir d'une page dont les règles de spéculation ne correspondent pas à la page actuelle, la recherche est effectuée pour tenter de comprendre pourquoi les URL ne correspondaient pas à celles mentionnées dans les règles de spéculation de la page précédente dans l'onglet Chargements spéculatifs:
Conclusion
Dans cet article, nous avons montré les différentes façons dont les développeurs peuvent déboguer les règles de préchargement et de prérendu. L'équipe continue de travailler sur la création d'outils pour les règles de spéculation, et nous aimerions recevoir des suggestions des développeurs sur les autres moyens qui pourraient être utiles pour déboguer cette nouvelle API passionnante. Nous encourageons les développeurs à signaler tout bug détecté ou toute demande de fonctionnalité dans l'outil de suivi des problèmes de Chrome.
Remerciements
Image Thumbail par Nubelson Fernandes sur Unsplash.