Comment utiliser l'API des règles de spéculation pour charger instantanément des pages Web

2024 s’annonce comme le moment où le chargement instantané deviendra la nouvelle norme en matière de performances Web, et les propriétaires d’entreprises en ligne sont tout à fait à l’écoute.

La transition du rapide à l’instantané est cependant en préparation depuis un certain temps.

Dès 2009, la quête d’un chargement de page plus rapide et plus efficace a conduit l’équipe Chromium à créer les premiers indices de ressources, auxquels le lien rel=”prerender” a ensuite été ajouté.

On s'attendait à ce que cela ait un impact significatif sur les performances, car cela impliquait le chargement des pages suivantes en arrière-plan avant qu'un utilisateur n'y accède, garantissant ainsi un rendu plus rapide lors de la transition.

Cependant, cette version du prérendu ne s’est pas révélée suffisamment efficace et a été obsolète en 2017.

Aujourd’hui, Google a lancé des développements prometteurs pour son API de règles de spéculation, permettant une approche plus sophistiquée du prérendu complet et débloquant une navigation Web véritablement transparente.

Qu'est-ce que l'API des règles de spéculation de Google ?

L'API Speculation Rules est une API définie par JSON développée par Google pour améliorer les performances de chargement des pages Web grâce à des stratégies de chargement spéculatif.

Le chargement spéculatif implique la prévision et le préchargement des ressources pour les navigations de pages ultérieures, ce qui entraîne des temps de rendu plus rapides et une expérience utilisateur améliorée. Google a introduit cette API pour fournir aux développeurs un moyen plus flexible et plus expressif de spécifier quels documents doivent être pré-extraits ou pré-affichés.

Détails clés sur l'API des règles de spéculation :

• Ciblage des URL de documents : contrairement aux mécanismes de prélecture traditionnels qui ciblent des fichiers de ressources spécifiques, l'API Speculation Rules se concentre sur les URL de documents. Cela le rend particulièrement adapté aux applications multipages (MPA) plutôt qu'aux applications monopages (SPA).

• Prérendu et prélecture : l'API prend en charge les stratégies de prérendu et de prélecture. Le prérendu implique la récupération, le rendu et le chargement du contenu dans un onglet invisible, prêt pour une activation quasi instantanée lorsque l'utilisateur accède à la page. La prélecture, quant à elle, télécharge et enregistre les ressources de page spécifiées (par exemple, document, image, script, etc.), optimisant ainsi les temps de chargement lorsque l'utilisateur navigue ultérieurement vers ces pages.

• Prise en charge du navigateur : l'API est actuellement compatible avec tous les navigateurs basés sur Chromium, notamment Chrome, Edge, Opera, Chrome Android, Opera Android et WebView Android. Pour une analyse complète de la compatibilité, reportez-vous à la documentation de Mozilla :

Vous pouvez également vérifier si les navigateurs prennent en charge l'API avec le code suivant :

• Alternative aux fonctionnalités obsolètes : elle sert d'alternative aux technologies plus anciennes telles que la fonctionnalité obsolète réservée à Chrome , offrant de meilleures performances et une syntaxe plus expressive.
• Considérations relatives à la sécurité : les prélectures intersites ont des limites pour protéger la confidentialité des utilisateurs. La prélecture inter-sites ne fonctionne que si l'utilisateur n'a défini aucun cookie pour le site de destination, empêchant ainsi le suivi potentiel de l'activité de l'utilisateur.
  

Pourquoi utiliser l'API de règles de spéculation sur votre site Web ?

L'API Speculation Rules permetdes chargements de pages quasi instantanés pour des expériences de navigation fluides.

L'amélioration des temps de chargement des pages,la satisfaction accrue des utilisateurs et les avantages potentiels du référencementsont des raisons impérieuses pour les développeurs d'adopter cette technologie.

En réduisant la latence entre les navigations des pages, les utilisateurs perçoivent le site Web comme plus fluide et plus réactif. Cela devient clairement visible dansles Core Web Vitals de votre site, où le Largest Contentful Paint (LCP), le Cumulative Layout Shift (CLS) et l'Interaction to Next Paint (INP) diminuent considérablement.

Les expériences de navigation instantanée s’accompagnent de taux de rebond plus faibles et d’une fidélisation accrue des utilisateurs– des indicateurs essentiels au succès de votre plateforme en ligne. Soulignant ainsi la valeur stratégique de l’intégration de l’API Speculation Rules.

Comment fonctionne l'API des règles de spéculation ?

L'API Spéculation Rules de Google est conçue pour cibler les URL de documents plutôt que des fichiers de ressources spécifiques. L'API Speculation Rules introduit une syntaxe plus expressive et configurable pour spécifier quels documents doivent être pré-extraits ou pré-rendus.

Avec une structure définie au format JSON dans un script type="speculationrules", les développeurs peuvent articuler des règles à la fois pour le prérendu et la prélecture. Cette flexibilité améliorée permet d’affiner le chargement spéculatif.

Récemment, Google a annoncé une nouvelle amélioration de l'API Spéculation Rules dans Chrome 121, qui offre désormais la possibilité de rechercher automatiquement des liens.

Cela se fait par :

• Spécification de la source du document
• Sélection de liens sur la page en fonction d'URL ou de sélecteurs CSS
• Spécifier un niveau d'« empressement » : impatient (immédiatement), modéré (en survol de 200 ms) et conservateur (au toucher de la souris ou au toucher)

Cependant, si vous débutez avec l'API Spéculation Rules, nous vous recommandons de tester d'abord les différentes configurations ci-dessous.

Comment utiliser l'API des règles de spéculation de Google

L'API Speculation Rules permet aux développeurs de suivre une approche structurée pour optimiser les processus de prérendu et de prélecture.

Installation

Cela commence par créer un élément de script type="speculationrules" et définir des règles de spéculation dans une structure JSON en son sein.

Les règles de spéculation peuvent être ajoutées soit dans la tête, soit dans le corps du cadre principal.

Important : les règles de spéculation dans les sous-cadres ne sont pas appliquées, et les règles de spéculation dans les pages pré-rendues ne sont appliquées qu'une fois qu'un utilisateur accède à la page elle-même.

Les règles de spéculation peuvent être incluses de manière statique ou dynamique.

• La configuration statique est effectuée dans le HTML de la page (parfait pour les sites Web où la prochaine action a une grande certitude, par exemple, un site Web d'actualités pourrait vouloir pré-afficher le point culminant de la journée)
• La configuration dynamique se fait via JavaScript (adapté aux sites Web où les expériences utilisateur personnalisées sont largement utilisées)

Important : lorsque vous optez pour la configuration dynamique, reportez-vous toujours à la documentation de support pour les développements futurs et les cas d'utilisation qui pourraient devenir disponibles à l'avenir.

Pour indiquer au navigateur les URL àpré-afficher , vous pouvez insérer des instructions JSON sur vos pages :

De même, insérez les instructions JSON suivantes pour la prélecture :

Il est possible d'ajouter plusieurs règles de spéculation à une page, auquel cas vous devrez indiquer au navigateur l'un des niveaux suivants :

• Liste des URL
• Règles de spéculation multiples
• Plusieurs listes dans un seul ensemble de règles de spéculation
  

Spécification des itinéraires pour le prérendu/prélecture

Le réglage fin du chargement spéculatif implique de spécifier des itinéraires pour le prérendu et la prélecture. En catégorisant les pages en fonction de leur importance ou de leur probabilité de navigation par l'utilisateur, les développeurs peuvent optimiser la stratégie de chargement spéculatif.

Cependant, certains itinéraires sont considérés comme dangereux, tels que :

• URL de déconnexion ;
• URL de changement de langue ;
• URL « Ajouter au panier » ;
• URL de flux de connexion où le serveur demande l'envoi d'un SMS, par exemple lorsqu'une authentification à deux facteurs (2FA) est nécessaire ;
• URL qui lancent le suivi des conversions publicitaires côté serveur ;
• URL qui déclenchent les limites d'utilisation d'un utilisateur, par exemple en utilisant son allocation mensuelle d'articles gratuits.

De la même manière que pour exclure ces pages de la mise en cache, la raison pour éviter de les prélire et de les pré-afficher est liée aux variables dynamiques.

Il s'agit de pages sensibles au contenu dont les valeurs sont mises à jour en fonction des actions de l'utilisateur, et en les préchargeant en arrière-plan, le risque d'afficher un état obsolète de la page est très élevé.

Précision et compromis

Comme Barry Pollard l'a mentionné dans notre webinaire sur « Chargement instantané des pages » :

Bien que la prélecture soit l'approche la plus sûre que vous puissiez dupliquer sur plusieurs de vos pages Web, elle offre également la récompense la plus faible puisqu'elle implique uniquement le téléchargement de ressources spécifiques.

Les prérendus pleine page, en revanche, offrent des récompenses plus élevées, mais ils doivent être utilisés avec parcimonie car ils peuvent :

• Submergez le navigateur, car il ne peut exécuter qu'un nombre limité de tâches en arrière-plan.
• Consommer une bande passante et des ressources CPU considérables, ce qui peut entraîner une dégradation des performances pour les utilisateurs sur des réseaux plus lents ou sur des appareils aux ressources limitées.
• Conduire à un gaspillage de ressources plus élevé si le visiteur ne navigue pas vers la page.

Pour configurer correctement le prérendu, vous devez tenir compte du comportement de vos utilisateurs et analyser les navigations courantes sur votre site Web. À l'aide de cartes thermiques et d'organigrammes Google Analytics, vous pouvez identifier les itinéraires essentiels et démarrer vos expériences de chargement prédictif.

Pour vérifier si une page est pré-rendue, utilisez une entrée activationStart non nulle de PerformanceNavigationTiming . Cela peut ensuite être enregistré à l'aide d'une dimension personnalisée :

De cette façon, vous pourrez évaluer le rapport entre le pré-rendu et les autres types de navigation.

De plus, il est important de mesurer le nombre de pages pré-rendues qui ne sont pas visitées par la suite pour optimiser les règles de spéculation, obtenir des taux de réussite plus élevés et réduire le gaspillage de ressources.

Vous pouvez le faire en déclenchant un événement d'analyse lorsque des règles de spéculation sont insérées pour indiquer que le pré-rendu a été demandé. Comparez ensuite le nombre de ces événements aux pages vues réelles avant le rendu.

Ou tu peux…

Envisagez le prérendu automatisé des pages avec l'IA de navigation de NitroPack

Navigation AI est l'optimiseur de navigation Web alimenté par l'IA de NitroPack qui prédit et analyse activement le comportement des utilisateurs pour pré-afficher des pages complètes pendant le parcours client.

L'IA de navigation permet aux propriétaires de sites d'offrir des expériences de navigation instantanées sur ordinateur et mobilesans écrire une seule ligne de code , augmentant ainsi l'engagement des clients et les taux de conversion.

Remarque : Navigation AI est un produit distinct, mais il est 100 % compatible avec NitroPack et étend encore les avantages pour les propriétaires de sites.

Rejoignez la liste d'attente pour Navigation AI et débloquez des expériences utilisateur instantanées sur votre site →

Navigation AI de NitroPack s'appuie sur l'API Speculation Rules et offre une solution automatisée pour atteindre un taux de réussite élevé et une efficacité des ressources dans les scénarios de pré-rendu.

En appliquant des prédictions initiales améliorées par l'IA sur le chargement des pages en fonction des données et en analysant le comportement des utilisateurs, Navigation AI peut ajuster les prédictions et demander avec précision à l'API des règles de spéculation de pré-afficher les pages qui seront réellement visitées.

Le résultat est un chargement instantané de la page grâce à cette page déjà peinte en arrière-plan. Sur les appareils mobiles, Navigation AI s'appuie sur l'identification de l'endroit où se trouve l'utilisateur sur la page et, étant donné la petite fenêtre d'affichage, elle peut facilement prédire où il appuiera.

Basée sur 1 200 sites Internet, Navigation AI affiche déjà des résultats spectaculaires.

• Résultat n°1 : les pages Web utilisant Navigation AI affichent systématiquement un temps de chargement d'environ 2,86 s VS 6,12 s sans Navigation AI

• Résultat n°2 : avec Navigation AI, les pages pré-rendues affichent une amélioration LCP de 85 % (de 3,1 s à 0,4 s) et une amélioration CLS de 80 % (de 0,3 s à 0,06 s).Pour les pages préchargées, Navigation AI augmente le LCP de 52 % (de 3,1 s à 1,5 s).

• Résultat n°3 : Avec Navigation AI, les mesures de performances pour l'ensemble du site Web s'améliorent considérablement : LCP de 15 %, CLS de 8 % et TTFB de 26 %

Accédez à Navigation AI en rejoignant notre liste d'attente →

API des règles de spéculation et WordPress

Dans notre webinaire « Instant Page Loading », Adam Silverstein, ingénieur en relations avec les développeurs de Google, a révélé que l'équipe WordPress Core Performance travaille sur des implémentations plus stables de la nouvelle API de règles de spéculation.

Actuellement, l'accent reste mis sur la mise à disposition d'une petite partie des fonctionnalités de l'API pour les propriétaires de sites et les développeurs de l'écosystème afin de tester l'efficacité et le taux d'adoption avant de l'intégrer au noyau. Voici ce que les utilisateurs de WordPress peuvent exploiter jusqu’à présent :

• Un module dans le plugin Performance Lab
• Un plugin autonome qui implémente uniquement l'interface de l'API Speculation Rules (applique le niveau conservateur « d'empressement », mais les développeurs sont libres de modifier le comportement)

Les routes WP-admin sont exclues par défaut, mais c'est aux développeurs WP de déterminer les routes qu'ils souhaitent prioriser.

L’équipe WordPress Core Performance travaille également sur des implémentations plus sophistiquées au sein des plugins de l’écosystème. Cela vise à alléger une partie du travail fastidieux que les développeurs doivent effectuer pour déterminer quels itinéraires sont la priorité absolue et lesquels sont interdits.

Quelles améliorations seront apportées aux règles de spéculation

Actuellement, les règles de spéculation sont limitées aux pages d'un même onglet, mais des efforts sont en cours pour réduire ces restrictions.

Le prérendu est, par défaut, limité aux pages de même origine. Cependant, une mise à jour récente de Chrome 119 prend désormais en charge le prérendu pour les pages d'origine croisée du même site, nécessitant une adhésion via un en-tête HTTP.

Les versions futures pourraient étendre le prérendu aux pages d'origine croisée et l'autoriser dans de nouveaux onglets. L'API des règles de spéculation est appelée à se développer, en introduisant des scores et une syntaxe pour les règles de document et en offrant plus de flexibilité, comme le pré-rendu des liens lorsque la souris est enfoncée.

Les expériences en cours dans Chrome explorent des fonctionnalités supplémentaires, et les sites peuvent participer à un essai d'origine pour tester et fournir des commentaires sur de futurs ajouts potentiels.