Les règles de spéculation peuvent être utilisées pour précharger et précharger les navigations sur la page suivante, comme indiqué dans l'article précédent. Cela peut permettre un chargement de page beaucoup plus rapide, voire instantané, 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. 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 en 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 s'efforce d'améliorer la compatibilité des outils de développement avec le débogage des règles de spéculation. Dans cet article, vous allez découvrir toutes les façons d'utiliser ces outils pour comprendre les règles de spéculation d'une page, comprendre pourquoi elles ne fonctionnent pas, quand les développeurs peuvent utiliser les options les plus familières des outils de développement, et quand ce n'est pas le cas.
Explication de "pré-" conditions d'utilisation
Il y a beaucoup de « pré- » termes pouvant prêter à confusion. Pour commencer, nous allons les expliquer:
- Précharger: extraire une ressource ou 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 liées à la 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 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 ce terme est inclus afin de les différencier clairement des "spéculations liées à la navigation". de mots clés.
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 seront 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 surlignées en rouge correspondent aux 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.
- L'onglet Règles répertorie tous les jeux de règles trouvés sur la page active.
- Spéculations : répertorie toutes les URL préchargées et prérendues des ensembles de règles.
L'onglet Speculations (Spéculations) est illustré dans la capture d'écran précédente. Comme nous pouvons le constater, cette page d'exemple 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 le troisième 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 Speculations répertorie toutes les URL cibles, l'action (préchargement ou prérendu), leur ensemble de règles (car il peut y en avoir plusieurs sur une page) et l'état de chaque spéculation:
Au-dessus des URL, une liste déroulante peut être utilisée pour afficher les URL de tous les jeux de règles ou uniquement les URL d'un jeu de règles particulier. En dessous, toutes les URL s'affichent. 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 renvoie donc un code d'état HTTP 404, autre que 2xx).
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 inégalées
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 des informations supplémentaires expliquant pourquoi l'URL ne correspond à aucune des URL de spéculation. Cela s'avère utile pour 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 Chargements spéculatifs sont très utiles pour déboguer les règles de spéculation et pour détecter les erreurs de syntaxe dans le fichier JSON.
En ce qui concerne les préchargements, le panneau Network (Réseau) est probablement un endroit plus familier. Pour l'exemple d'échec du préchargement, vous pouvez voir l'erreur 404 pour le préchargement ici:
Toutefois, les onglets Chargements spéculatifs deviennent beaucoup plus utiles pour les règles de spéculation de prérendu, que nous aborderons 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 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.
Toutefois, contrairement aux préchargements, ils ne s'affichent pas dans le panneau Network (Réseau), car ils sont récupérés et affichés dans un processus d'affichage 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 Chargements spéculatifs peuvent être utilisés pour les règles de spéculation de prérendu, comme illustré sur une page de démonstration similaire qui tente de précharger les trois pages au lieu d'effectuer le préchargement:
Nous voyons à nouveau que l'une des trois URL a échoué au prérendu. 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.
Dans Chrome 121, nous avons lancé la compatibilité avec les 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 que le navigateur a trouvées 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'attente moderate. Ainsi, lorsque vous pointez sur le troisième lien, le motif de l'échec de l'URL s'affiche:
Déboguer prerender avec les autres panneaux des outils de développement
Contrairement aux préchargements, les pages préchargées ne s'affichent pas dans les processus d'affichage actuels des panneaux des outils de développement tels que 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 situé en haut à droite, ou en sélectionnant une URL dans la partie supérieure du panneau, puis en sélectionnant 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), dans lequel vous pouvez voir que la page demandée est la page prérendue:
En examinant les en-têtes HTTP de ces ressources, nous pouvons voir qu'elles sont toutes définies avec l'en-tête Sec-Purpose: prefetch;prerender:
Vous pouvez également accéder au panneau Éléments, 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 elles-mêmes peuvent fournir des informations de débogage, soit en effectuant des appels d'analyse, soit en se connectant à la console (qui peut être visualisée 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. Si le prérendu n'a pas pu être prérendu, une explication vous est fournie:
De plus, comme pour les préchargements, le fait de naviguer à partir d'une page avec des règles de spéculation qui ne correspondent pas à la page actuelle tentera de vous montrer pourquoi les URL ne correspondaient pas à celles couvertes 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 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 à travailler sur des outils pour les règles de spéculation, et nous aimerions recevoir des suggestions de la part des développeurs sur les autres façons de déboguer cette nouvelle API très intéressante. Nous encourageons les développeurs à signaler un problème dans l'outil de suivi des problèmes Chrome pour toute demande de fonctionnalité ou tout bug repéré.
Remerciements
Image de la miniature de Nubelson Fernandes sur Unsplash.