Les règles de spéculation peuvent être utilisées pour précharger et préafficher les navigations sur les pages 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 difficile. 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 masqué en arrière-plan 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é d'arrache-pied 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, pourquoi elles peuvent ne pas fonctionner, et quand les développeurs peuvent utiliser les options DevTools plus familières (et quand ils ne le peuvent pas).
Explication des termes commençant par "pré-"
Il existe de nombreux termes commençant par "pré-" qui peuvent prêter à 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 l'option
<link rel="prefetch">, similaire mais plus ancienne, souvent utilisée pour précharger des sous-ressources. - Prérendu : cette étape va au-delà de la prérécupération 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, plutôt que l'ancienne option
<link rel="prerender">(qui n'effectue 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 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 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"],
"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 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 sont visibles dans le panneau Réseau, de la même manière que les autres récupérations :
Les deux requêtes surlignées en rouge sont les ressources préchargées, comme l'indique la colonne Type. Elles sont récupérées avec une priorité Lowest, car elles sont destinées aux navigations futures et Chrome donne la priorité aux ressources de la page actuelle.
En cliquant sur l'une des lignes, vous pouvez également 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, sous la section Services d'arrière-plan, pour faciliter le débogage des règles de spéculation :
Cette section comporte trois onglets :
- Chargements spéculatifs, qui liste l'état de prérendu de la page actuelle.
- Règles : liste de tous les ensembles de règles trouvés sur la page actuelle, désignés comme des URL ou des balises de règle, le cas échéant.
- Spéculations, qui liste toutes les URL préchargées et prérendues à partir des ensembles de règles.
L'onglet Spéculations est visible dans la capture d'écran précédente. On peut voir que cet exemple de page 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é sur cet ensemble de règles.
L'onglet Spéculations liste toutes les URL cibles, ainsi que l'action (préchargement ou prérendu), l'ensemble de règles dont 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 permet d'afficher les URL de tous les ensembles de règles ou uniquement celles d'un ensemble 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 la raison de l'échec de la page next3.html (qui n'existe pas et renvoie donc une erreur 404, qui est un code d'état HTTP autre que 2xx).
L'onglet récapitulatif Chargements spéculatifs affiche un rapport État de chargement spéculatif pour cette page, qui indique si un préchargement ou un prérendu a été utilisé pour cette page.
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 n'entraîne pas l'utilisation d'un préchargement ou d'un prérendu, une section supplémentaire de l'onglet indique plus en détail pourquoi 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 préchargés. Nous pouvons donc voir 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 elles-mêmes et détecter les erreurs de syntaxe dans le code JSON.
En ce qui concerne les préchargements eux-mêmes, le panneau Réseau est probablement un endroit plus familier. Dans l'exemple d'échec de 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, qui sont abordées 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"],
"tag": "rule-set-tag-1"
}
]
}
</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é, mais au prix de ressources supplémentaires.
Toutefois, contrairement aux préchargements, ils ne sont pas visibles dans le panneau 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 Chargements spéculatifs peuvent être utilisés pour les règles de spéculation de prérendu, comme illustré par une page de démonstration similaire qui tente de prérendre, au lieu de précharger, les trois pages :
Ici, nous voyons à nouveau que l'une des trois URL n'a pas pu être 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êtes, 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 (sur ordinateur), en fonction de la fenêtre d'affichage (sur mobile) ou lorsqu'il clique dessus.
Il existe des règles similaires sur le site de démonstration des règles de spéculation. 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é pour ces pages. Toutefois, lorsque nous maintenons le pointeur sur les liens, nous voyons l'état changer à 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. Ainsi, après avoir pointé sur le troisième lien, nous voyons la raison de l'échec pour cette URL :
Déboguer prerender avec les autres panneaux des outils de développement
Contrairement aux pages préchargées, les pages prérendues n'apparaissent pas dans les processus de rendu actuels des panneaux des outils de développement, comme le panneau Réseau, 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, puis en sélectionnant Inspecter :
Ce menu déroulant (et la valeur sélectionnée) est également partagé avec tous les autres panneaux, comme le panneau Réseau, où vous pouvez voir que la page demandée est celle qui a été 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 vous permet de 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 utiliser le panneau "Console", qui affiche 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. Toutefois, les pages prérendues peuvent également fournir des informations de débogage, soit en effectuant des appels d'analyse, soit en se connectant à la console (qui est visible comme décrit dans la section précédente).
De plus, une fois qu'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 le prérendu a réussi ou non. Si le prérendu n'a pas pu être effectué, une explication est fournie :
De plus, comme pour les préchargements, si vous accédez à une page à partir d'une page dont les règles de spéculation ne correspondent pas à la page actuelle, l'onglet Chargements spéculatifs tente 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 spéculation de préchargement et de prérendu. L'équipe continue de travailler sur les outils pour les règles de spéculation, et nous aimerions recevoir des suggestions de la part des développeurs sur d'autres moyens utiles pour déboguer cette nouvelle API prometteuse. Nous encourageons les développeurs à signaler tout problème ou demande de fonctionnalité dans l'outil de suivi des problèmes Chrome.
Remerciements
Vignette par Nubelson Fernandes sur Unsplash.