Les internautes d'aujourd'hui exigent une navigation rapide, pour passer d'une page à l'autre en un minimum de temps. L'API "Speculation Rules" (règles de spéculation) change la donne dans le domaine des API Web. Cet outil astucieux a pour but d'améliorer les performances des navigations futures en affichant à l'avance les pages suivantes potentielles.
Dans ce billet, nous allons nous pencher sur l'API Speculation Rules, partager quelques résultats impressionnants obtenus lors de son test sur le site web Scalemates à l'aide d'Akamai, et vous montrer comment exploiter cette API dans le cadre de vos propres projets. De plus, nous vous indiquerons quelques ressources Linode pratiques pour vous aider à démarrer.
Qu'est-ce que l'API des règles de spéculation ?
L'API Règles de spéculation est un outil puissant conçu pour améliorer les performances des sites web en effectuant de manière proactive un préchargement ou un pré-rendement des navigations futures. Cela signifie que le navigateur peut commencer à charger la page suivante avant même que l'utilisateur ne clique sur un lien, ce qui donne l'impression que la navigation est instantanée.
Chargement proactif
L'API utilise divers signaux pour prédire (spéculer) la page vers laquelle l'utilisateur est susceptible de naviguer ensuite, puis commence à la charger en arrière-plan. Les signaux utilisés pour la prédiction peuvent inclure le comportement de navigation de l'utilisateur, comme le survol de liens ou le début d'une interaction avec eux.
Recherche préalable (prefetching) ou rendu préalable (prerendering)
En tant que développeur, vous indiquez si le navigateur doit prélever ou prérendre le contenu à l'aide de l'API. La préemption télécharge le code HTML pour qu'il soit prêt lorsque l'utilisateur navigue. Le prérendu va plus loin en chargeant complètement et en rendant la page dans un onglet caché, de sorte qu'elle puisse être affichée instantanément lorsque l'utilisateur navigue jusqu'à elle.
Adoption et soutien actuels
À l'heure où nous écrivons ces lignes, l'API des règles de spéculation est principalement prise en charge par les navigateurs basés sur Chromium, et des développements sont en cours pour une prise en charge plus large.
Navigateurs (à partir du numéro de version donné) qui prennent en charge l'API des règles de spéculation.
Cas d'utilisation
Le principal cas d'utilisation de l'API Règles de spéculation est celui des applications multipages (AMP), où une navigation rapide entre les pages peut améliorer considérablement l'expérience de l'utilisateur. En général, sur ce type de sites, les utilisateurs passent fréquemment d'une page à l'autre. Lorsque le chargement d'une page est retardé, l'expérience et la satisfaction de l'utilisateur en pâtissent.
En préacheminant les pages à venir, l'API garantit des transitions fluides et presque instantanées. Les types de sites qui en bénéficient le plus sont les sites de commerce électronique et les portails d'information. L'API Règles de spéculation peut être utile pour toute AMP où la réduction des temps d'attente permet d'augmenter l'engagement et la fidélisation des utilisateurs.
L'API en action : Scalemates sur Akamai
Pour voir l'API Speculation Rules en action, nous avons testé un prototype de trafic de production pour Scalemates, le plus grand site web de modélisme au monde, qui est optimisé par des solutions d'Akamai (notamment Ion, un WAF, et Image Manager). Nous avons validé les changements de performances à l'aide de mPulse, une solution de surveillance de l'utilisateur réel (RUM) qui capture les données relatives à l'expérience de l'utilisateur et aux performances.
Contexte et configuration
Nous avons activé l'API des règles de spéculation pour Scalemates, en nous concentrant sur le préchargement et le pré-rendement proactifs. L'installation comprenait :
- Déclenchement d'un préchargement: Les liens ont été préchargés au survol de l'écran, avec un empressement modéré.
- Déclenchement d'un prérendu: Le pré-rendement de la page entière s'est produit lorsque l'utilisateur a commencé à interagir avec le lien, avec un empressement prudent.
- Sélecteurs CSS: Déterminer les liens qui doivent déclencher des actions de préemption et de prérendu.
Des résultats impressionnants
Les résultats de l'utilisation de l'API des règles de spéculation sont impressionnants :
- Gains de performance: Le 95e centile (P95) du Largest Contentful Paint (LCP) était environ 500 ms plus rapide, tandis que le 75e centile (P75) était environ 170 ms plus rapide.
- Efficacité du prerendering: 59% des navigations ont déclenché le prerendering.
Au 75e centile, le LCP est 177 ms plus rapide pour les pages pré-rendues (537 ms) que pour les pages rendues standard (714 ms).
Un petit effort dans la mise en œuvre de l'API des règles de spéculation nous a permis de réduire de 170 ms le temps de réponse du LCP. L'utilisation de cette API peut vous aider à atteindre vos objectifs en matière de performances web et de Vitaux Web fondamentaux.
Comment exploiter l'API
Pour maximiser les avantages en termes de performances, vous devez savoir comment définir et communiquer les règles de spéculation au navigateur. Voici un guide détaillé pour vous aider à démarrer.
Règles de spéculation définies en JSON
Les règles de spéculation décrivent l'action à entreprendre, les URL sur lesquelles déclencher des actions et l'empressement de ces actions. Elles sont définies ensemble dans une structure JSON.
- Action: Indique si le navigateur doit effectuer une recherche préalable ou un rendu préalable.
- URLs cibles: Spécifie les URL sur lesquelles des actions doivent être déclenchées. Vous pouvez utiliser des URL spécifiques, des sélecteurs CSS, des expressions régulières et des caractères génériques.
- L'empressement: Spécifie quand les spéculations doivent être déclenchées.
En ce qui concerne l'empressement, les options possibles sont les suivantes :
- immédiate : Spécule dès que possible lorsque la règle est respectée.
- impatient : Similaire à immédiat, mais peut avoir des ajustements futurs.
- modéré : Spécule sur un vol stationnaire pendant 200 ms ou plus lorsque le pointeur est abaissé.
- conservateur : Spécule sur le pointeur ou la touche.
Communiquer avec le navigateur
Comment communiquer ces règles au navigateur ? Deux méthodes sont possibles.
Méthode 1 : via l'en-tête de réponse HTTP
Vous pouvez mettre en œuvre l'API à l'aide d'en-têtes de réponse HTTP. Lorsque vous déployez votre application, votre serveur dorsal ajoute un en-tête Speculation-Rules à la réponse. La valeur de cet en-tête est un chemin vers un fichier JSON contenant vos règles de spéculation.
Par exemple, si vous créez une application Node.js Express, vous pouvez définir l'en-tête comme suit :
app.use((req, res, next) => { |
Le fichier JSON peut se trouver dans les ressources de votre application, mais il peut également être stocké à l'extérieur, par exemple dans un seau Linode Object Storage accessible au public. L'utilisation d'un fichier JSON de règles de spéculation externe permet des mises à jour rapides et des modifications dynamiques de votre site, sans qu'il soit nécessaire de modifier le code de votre application.
Voici un exemple de fichier JSON de règles de spéculation de base :
{ |
Dans cet exemple, nous utilisons des sélecteurs CSS pour faire correspondre les URL cibles. Le navigateur récupère au préalable tous les liens du document avec la classe prefetch-link, en utilisant un paramètre d'empressement conservateur. Parallèlement, il effectuera un prérendu de tous les liens du document avec la classe prerender-link, en utilisant un paramètre d'empressement modéré.
Que se passe-t-il si vous faites référence à un fichier JSON de règles de spéculation qui n'est pas trouvé ou disponible ? Dans ce cas, les règles ne seront tout simplement pas appliquées et le navigateur continuera sans elles. En outre, les navigateurs non compatibles ignoreront tout simplement les règles.
Méthode 2 : à l'intérieur du code HTML
You can also embed your speculation rules directly in the HTML, in a <script> tag, to provide flexibility for page-specific rules. It would look like this:
<script type="speculationrules"> |
Quelle méthode utiliser ?
Le choix de la bonne méthode dépend de vos besoins spécifiques. Si vous adoptez l'approche de l'en-tête de réponse HTTP, vous bénéficiez d'une gestion centralisée. Cela facilite la mise à jour des règles sur plusieurs pages. Mais vous n'aurez pas de contrôle fin page par page. La méthode HTML en ligne permet une plus grande personnalisation et des règles spécifiques à chaque page.
En fin de compte, la méthode que vous choisirez se résumera à trouver l'équilibre entre le contrôle et la commodité.
Conclusion
L'utilisation de l'API Speculation Rules est un moyen puissant d'améliorer les performances des sites web grâce à l'affichage préalable ou au rendu préalable des navigations futures. Lorsque nous l'avons testée sur Scalemates, nous avons constaté des améliorations significatives dans les temps de chargement des pages, ce qui démontre le potentiel de l'API.
En définissant des règles de spéculation dans une structure JSON et en les communiquant via des en-têtes HTTP ou HTML, vous pouvez gérer et optimiser dynamiquement vos sites afin d'améliorer la vitesse et la fluidité du chargement de vos pages. Cela se traduit par une meilleure expérience de l'utilisateur final et une plus grande satisfaction.
Pour en savoir plus sur le pré-rendement des pages avec l'API Speculation Rules, consultez ce guide détaillé des TechDocs d'Akamai. Lorsque vous serez prêt à lancer vos projets web, découvrez ce que Linode peut vous offrir pour faciliter le déploiement et la gestion de votre infrastructure.
Commentaires