Les moyens les plus efficaces d'améliorer les métriques Core Web Vitals

Au fil des ans, la communauté Web a acquis une grande quantité de connaissances sur l'optimisation des performances Web. Bien qu'une seule optimisation puisse améliorer les performances de nombreux sites, toutes les optimisations à la fois peuvent sembler écrasantes. De plus, seules certaines d'entre elles sont applicables à un site donné.

Sauf si vous travaillez dans le domaine des performances Web, il n'est probablement pas évident de savoir quelles optimisations auront le plus d'impact sur votre site. Vous n'aurez probablement pas le temps de les faire toutes. Il est donc important de vous demander quelles sont les optimisations les plus efficaces pour améliorer les performances de vos utilisateurs ?

Voici la vérité sur les optimisations des performances : vous ne pouvez pas les juger uniquement sur leurs mérites techniques. Vous devez également tenir compte des facteurs humains et organisationnels qui influencent la probabilité que vous puissiez implémenter une optimisation donnée. Certaines améliorations des performances peuvent avoir un impact considérable en théorie, mais en réalité, peu de développeurs auront le temps ou les ressources nécessaires pour les implémenter. D'un autre côté, il existe peut-être des bonnes pratiques de performances très efficaces que presque tout le monde suit déjà. Ce guide identifie les optimisations des performances Web qui :

• ont l'impact le plus important au monde réel
• sont pertinentes et applicables à la plupart des sites ;
• sont réalistes pour la plupart des développeurs ;

Ensemble, ce sont les moyens les plus réalistes et les plus efficaces d'améliorer vos métriques Core Web Vitals. Si vous débutez dans le domaine des performances Web ou si vous ne savez pas encore ce qui vous apportera le meilleur retour sur investissement, commencez par là.

Interaction to Next Paint (INP)

En tant que métrique Core Web Vitals la plus récente, l'Interaction to Next Paint (INP) offre certaines des plus grandes possibilités d'amélioration. Toutefois, comme beaucoup moins de sites atteignent le seuil pour une expérience "satisfaisante" par rapport à son prédécesseur obsolète, vous faites peut-être partie des nombreux développeurs qui apprennent à optimiser la réactivité des interactions pour la première fois. Commencez par ces techniques incontournables pour découvrir les moyens les plus efficaces d'améliorer l'INP.

1. Effectuez des pauses fréquentes pour fractionner les tâches longues.

Les tâches correspondent à toute tâche distincte effectuée par le navigateur, y compris l'affichage, la mise en page, l'analyse, la compilation ou l'exécution de scripts. Lorsqu'une tâche dure plus de 50 millisecondes, elle devient une tâche longue. Les tâches longues sont problématiques, car elles peuvent empêcher le thread principal de répondre rapidement aux interactions utilisateur.

Bien que vous deviez toujours vous efforcer de faire le moins de travail possible en JavaScript, vous pouvez aider le thread principal en divisant les tâches longues. Pour ce faire, cédez souvent au thread principal afin que les mises à jour de rendu et d'autres interactions utilisateur puissent avoir lieu plus tôt.

L'API Scheduler vous permet de mettre en file d'attente des tâches à l'aide d'un système de priorités. Plus précisément, l'API scheduler.yield() divise les tâches longues tout en veillant à ce que les interactions puissent être gérées sans abandonner leur place dans la file d'attente des tâches.

En fractionnant les tâches longues, vous donnez au navigateur plus d'occasions d'effectuer des tâches critiques qui bloquent les utilisateurs.

2. Éviter le code JavaScript inutile

Les sites Web utilisent plus de JavaScript que jamais, et cette tendance ne semble pas s'inverser. Lorsque vous envoyez trop de code JavaScript, vous créez un environnement où les tâches s'affrontent pour attirer l'attention du thread principal. Cela peut avoir un impact sur la réactivité de votre site Web, en particulier pendant cette période de démarrage cruciale.

Toutefois, ce problème n'est pas insoluble. Vous avez plusieurs options :

• Utilisez les fonctionnalités de la plate-forme Web de référence largement disponibles plutôt que des implémentations redondantes basées sur JavaScript.
• Utilisez l'outil de couverture dans Chrome DevTools pour rechercher du code inutilisé dans vos scripts. En réduisant la taille des ressources nécessaires au démarrage, vous pouvez vous assurer que les pages passent moins de temps à analyser et compiler du code, ce qui offre une expérience utilisateur initiale plus fluide.
• Utilisez la division du code pour créer un bundle distinct pour le code qui n'est pas nécessaire pour le rendu initial, mais qui sera tout de même utilisé plus tard.
• Si vous utilisez un gestionnaire de balises, optimisez vos balises régulièrement. Vous pouvez supprimer les anciennes balises contenant du code inutilisé afin de réduire l'encombrement JavaScript de votre gestionnaire de balises.

3. Éviter les mises à jour de rendu importantes

L'exécution JavaScript n'est qu'un élément parmi d'autres qui affecte la réactivité de votre site Web. L'affichage est un type de travail coûteux en soi. En cas de mises à jour d'affichage volumineuses, votre site Web peut réagir encore plus lentement aux interactions des utilisateurs.

L'optimisation du rendu n'est pas un processus simple et dépend de ce que vous essayez d'accomplir. Voici quelques mesures que vous pouvez prendre pour vous assurer que les tâches de rendu ne deviennent pas longues :

• Réorganisez les lectures et les écritures du DOM dans votre code JavaScript pour éviter la mise en page forcée et le dépassement de la mémoire de mise en page.
• Réduisez la taille du DOM. Il existe une corrélation entre la taille du DOM et l'intensité du travail de mise en page. Lorsque le moteur de rendu doit mettre à jour la mise en page d'un DOM très volumineux, le travail requis pour recalculer sa mise en page peut augmenter de manière significative.
• Utilisez la structuration CSS pour afficher de manière paresseuse le contenu DOM hors écran. Ce n'est pas toujours simple, mais en isolant les zones contenant des mises en page complexes, vous pouvez éviter un travail de mise en page et de rendu inutile.

Largest Contentful Paint (LCP)

Le Largest Contentful Paint (LCP) est la métrique Core Web Vitals avec laquelle les développeurs ont le plus de difficultés. 40 % des sites du rapport sur l'expérience utilisateur Chrome ne respectent pas le seuil LCP recommandé pour une bonne expérience utilisateur. L'équipe Chrome recommande les techniques suivantes comme étant les plus efficaces pour améliorer le LCP.

1. Assurez-vous que la ressource LCP est visible à partir de la source HTML et classée par ordre de priorité

L'équipe Chrome a remarqué ce qui suit en ce qui concerne le LCP sur le Web:

• Selon l'Almanach Web 2022 de HTTP Archive, 72 % des pages mobiles ont une image comme élément LCP.
• Une analyse des données utilisateur réelles issues de Chrome montre que la majorité des origines dont le LCP est faible passent moins de 10% de leur temps LCP p75 à télécharger l'image LCP.
• Sur les pages dont le LCP est faible, le chargement de leurs images LCP est retardé de 1 290 millisecondes au 75e centile, soit plus de la moitié du budget pour une expérience rapide.
• Sur les pages dont l'élément LCP était une image, 39 % de ces images avaient des URL sources non détectables dans la réponse HTML initiale (par exemple, <img src="..."> ou <link rel="preload" href="...">), ce qui aurait permis au lecteur du navigateur de les découvrir dès que possible.
• Selon l'Almanach Web, seulement 0,03 % des pages éligibles utilisaient l'attribut HTML fetchpriority pour accorder une priorité plus élevée aux ressources, y compris celles qui pourraient améliorer le LCP d'une page avec relativement peu d'effort.

Ces statistiques montrent que les développeurs ont une grande opportunité de réduire à la fois le délai de chargement des ressources et la durée de chargement des ressources pour les images LCP.

Lorsque le problème est lié au délai de chargement des ressources, il est important de se rappeler qu'il peut déjà être trop tard pour obtenir un bon LCP si une page doit attendre que le CSS ou le JavaScript soit entièrement chargé avant que les images puissent même commencer à se charger. En outre, il est possible de réduire la durée de chargement de la ressource d'une image LCP en la repriorisant afin qu'elle reçoive plus de bande passante et se charge donc plus rapidement à l'aide de l'attribut HTML fetchpriority.

Si votre élément LCP est une image, son URL doit être visible dans la réponse HTML afin de réduire le délai de chargement des ressources. Voici quelques conseils pour y parvenir:

• Chargez l'image à l'aide d'un élément <img> avec l'attribut src ou srcset. N'utilisez pas d'attributs non standards tels que data-src qui nécessitent JavaScript pour s'afficher, car cela sera toujours plus lent. 9 % des pages masquent leur image LCP derrière data-src.
• Privilégiez le rendu côté serveur (SSR) au rendu côté client (CSR), car le SSR implique que le balisage complet de la page (y compris l'image) est présent dans la source HTML. Les solutions CSR nécessitent l'exécution de JavaScript avant que l'image puisse être découverte.
• Si votre image doit être référencée à partir d'un fichier CSS ou JS externe, vous pouvez toujours l'inclure dans la source HTML à l'aide d'une balise <link rel="preload">. Notez que les images référencées par des styles intégrés ne sont pas détectables par le lecteur de précharge du navigateur. Par conséquent, même si elles se trouvent dans la source HTML, leur découverte peut toujours être bloquée lors du chargement d'autres ressources. Le préchargement peut donc être utile dans ce cas.

En outre, vous pouvez raccourcir la durée de chargement d'une ressource en vous assurant que la ressource LCP est chargée tôt et avec une priorité élevée:

• Ajoutez l'attribut fetchpriority="high" à la balise <img> ou <link rel="preload"> de votre image LCP. Cela augmente la priorité de la ressource d'image afin qu'elle puisse commencer à se charger plus tôt.
• Supprimez l'attribut loading="lazy" du tag <img> de votre image LCP. Cela évite le délai de chargement causé par la confirmation que l'image apparaît dans ou près du viewport.
• Reportez les ressources non critiques lorsque cela est possible. En déplaçant ces ressources à la fin de votre document, en retardant le chargement des images ou des iframes, ou en les chargeant de manière asynchrone à l'aide de JavaScript, vous permettrez aux ressources plus importantes, comme l'image LCP, de se charger plus rapidement.

2. Visez des navigations instantanées

L'expérience utilisateur idéale consiste à ne jamais avoir à attendre le chargement d'une page. Les optimisations du LCP, comme la visibilité et la hiérarchisation des ressources, permettent de réduire le temps d'attente de l'utilisateur pendant le chargement et l'affichage de l'élément LCP. Toutefois, il existe une limite physique à la vitesse de chargement de ces octets sur le réseau et de leur affichage sur une page. Bien avant d'atteindre cette limite, vous devez fournir beaucoup d'efforts pour gagner quelques millisecondes de plus. Pour permettre une navigation instantanée, nous devons donc adopter une approche radicalement différente.

Les navigations instantanées tentent de charger et d'afficher la page avant que l'utilisateur ne commence à y accéder. De cette façon, la page prérendu peut être affichée immédiatement avec un LCP quasi nul. Les restaurations et les spéculations sont deux façons d’y parvenir. Lorsqu'un utilisateur revient en arrière ou avance vers une page précédemment consultée, celle-ci peut être rapidement restaurée à partir d'un cache en mémoire et s'afficher exactement comme l'utilisateur l'avait laissée. Les applications Web peuvent également essayer de prédire où un utilisateur se rendra ensuite. Si la prédiction est correcte, la page suivante aura déjà été chargée et affichée au moment où l'utilisateur y accèdera.

Vous pouvez restaurer les pages précédemment consultées grâce au cache amélioré (bfcache). Pour l'utiliser, vous devez vous assurer que vos pages répondent aux critères d'éligibilité à la mise en cache améliorée. Les pages ne sont généralement pas éligibles au bfcache, car elles sont diffusées avec des directives de mise en cache no-store ou comportent des écouteurs d'événements unload.

La restauration des pages entièrement affichées permet d'améliorer non seulement les performances de chargement, mais aussi la stabilité de la mise en page. Pour en savoir plus sur le bfcache et son efficacité pour améliorer le CLS, consultez la section S'assurer que les pages sont éligibles au bfcache.

Le préaffichage de la page suivante qu'un utilisateur visite est un autre moyen efficace d'améliorer considérablement les performances LCP. Il est rendu possible par l'API Speculation Rules. Pour profiter de ces avantages, vous devez toutefois vous assurer que les pages appropriées sont préchargées. Les spéculations incorrectes gaspillent des ressources à la fois sur le serveur et sur le client, ce qui peut nuire aux performances. Ainsi, moins vous êtes sûr de ce que vous ferez de la page suivante, plus vous devrez utiliser le prérendu de manière conservatrice. En cas de doute, vos données analytiques peuvent vous aider à précharger plus rapidement les pages les plus susceptibles d'être consultées ensuite.

3. Utiliser un CDN pour optimiser le TTFB

La recommandation précédente était axée sur les navigations instantanées, qui offrent la meilleure expérience possible aux utilisateurs. Toutefois, il peut arriver que les techniques de bfcache et de chargement spéculatif ne soient pas applicables. Prenons l'exemple d'un utilisateur suivant un lien multi-origine vers votre site où la réponse initiale du document HTML bloque effectivement le LCP. Le navigateur ne peut commencer à charger aucune sous-ressource tant qu'il n'a pas reçu le premier octet de la réponse. Plus vite cela se produit, plus vite tout le reste peut commencer à se produire.

Ce temps est appelé Time to First Byte (TTFB). Voici les meilleures façons de réduire le TTFB :

• Diffuser vos contenus aussi près que possible de vos utilisateurs géographiquement
• Mettez ce contenu en cache afin qu'il puisse être diffusé rapidement s'il est à nouveau demandé prochainement.

Le meilleur moyen d'y parvenir est d'utiliser un CDN. Les CDN distribuent vos ressources aux serveurs périphériques du monde entier, ce qui limite la distance que ces ressources doivent parcourir par câble jusqu'aux utilisateurs. De plus, les CDN disposent généralement de commandes ultraprécises de mise en cache que vous pouvez adapter aux besoins de votre site.

Les CDN peuvent également diffuser et mettre en cache des documents HTML, mais selon l'Almanach Web, seuls 29 % des requêtes de documents HTML ont été diffusées à partir d'un CDN. Cela signifie que les sites ont de grandes chances de réaliser des économies supplémentaires.

Voici quelques conseils pour configurer des CDN :

• Mettez en cache les documents HTML statiques, même pendant une courte période. Par exemple, est-il important que le contenu soit toujours à jour ? Ou peut-il être obsolète de quelques minutes ?
• Déterminez si vous pouvez déplacer la logique dynamique exécutée sur votre serveur d'origine vers le réseau périphérique, qui est une fonctionnalité de la plupart des CDN modernes.

Chaque fois que vous pouvez diffuser du contenu directement en périphérie et éviter un trajet vers votre serveur d'origine, vous gagnez en performances. Même dans les cas où vous devez effectuer le parcours jusqu'à l'origine, les CDN sont généralement optimisés pour le faire plus rapidement. C'est donc une victoire dans tous les cas.

Cumulative Layout Shift (CLS)

Le décalage de mise en page cumulatif (CLS) mesure la stabilité visuelle d'une page Web. Bien que le CLS soit la métrique sur laquelle la plupart des sites obtiennent de bons résultats, environ un quart d'entre eux ne respectent toujours pas le seuil recommandé. De nombreux sites ont donc encore de grandes possibilités d'améliorer leur expérience utilisateur.

1. Définir des tailles explicites pour tout contenu chargé à partir de la page

Les déplacements de mise en page se produisent généralement lorsque le contenu existant est déplacé après le chargement d'un autre contenu. La principale façon d'améliorer le CLS consiste à réserver l'espace requis autant que possible à l'avance.

Le meilleur moyen de corriger les décalages de mise en page causés par des images non redimensionnées consiste à définir explicitement les attributs width et height ou leurs propriétés CSS équivalentes. 72 % des pages contiennent au moins une image non redimensionnée. Sans taille explicite, ces images ont une hauteur initiale de 0px, ce qui peut entraîner des décalages de mise en page lorsque ces images sont chargées et que le navigateur découvre leurs dimensions. Il s'agit d'une immense opportunité pour le Web collectif, et cette opportunité demande moins d'efforts que certaines des autres recommandations suggérées dans ce guide.

Les images ne sont pas les seules à contribuer au CLS. Les décalages de mise en page peuvent être dus à d'autres contenus qui se chargent généralement après l'affichage initial de la page, y compris des annonces tierces ou des vidéos intégrées. La propriété aspect-ratio peut vous aider. Il s'agit d'une fonctionnalité CSS largement disponible qui permet aux développeurs de définir explicitement un format sur les images et les éléments autres que des images. Vous pouvez ainsi définir une width dynamique (par exemple, en fonction de la taille de l'écran) et demander au navigateur de calculer automatiquement la hauteur appropriée, comme il le fait pour les images avec des dimensions.

Toutefois, il n'est pas toujours possible de connaître la taille exacte du contenu dynamique. Même si vous ne connaissez pas la taille exacte, vous pouvez réduire l'importance des décalages de mise en page. Définir une min-height appropriée est presque toujours préférable à laisser le navigateur utiliser la hauteur par défaut de 0px pour un élément vide. L'utilisation d'un min-height est également généralement une solution simple, car elle permet au conteneur de s'étendre jusqu'à la hauteur du contenu final si nécessaire. Elle a simplement réduit cette quantité de croissance à un niveau plus tolérable.

2. Vérifier que les pages sont éligibles au cache amélioré

Comme indiqué précédemment dans ce guide, le cache amélioré (bfcache) charge instantanément une page plus ancienne ou plus récente de l'historique du navigateur à partir d'un instantané de mémoire. Bien que le cache amélioré soit une optimisation des performances au niveau du navigateur qui améliore le LCP, il élimine également complètement les décalages de mise en page. D'ailleurs, l'introduction du bfcache en 2022 est à l'origine de la plus grande amélioration du CLS que nous avons observée cette année-là.

Malgré cela, un nombre important de sites Web ne peuvent pas utiliser le bfcache et ne profitent donc pas de cet avantage gratuit en termes de performances Web. À moins que votre page ne charge des informations sensibles que vous ne souhaitez pas restaurer de la mémoire, assurez-vous que vos pages peuvent utiliser le cache amélioré.

Les propriétaires de sites doivent vérifier si les pages sont éligibles à la mise en cache améliorée et corriger les problèmes qui les empêchent de l'être. Chrome dispose d'un testeur bfcache dans les outils de développement. Vous pouvez également utiliser l'API NotInitialize Reasons pour détecter les motifs d'inéligibilité sur le terrain.

3. Évitez les animations et les transitions qui utilisent des propriétés CSS induisant une mise en page

Une autre source courante de décalages de mise en page est l'animation des éléments. Par exemple, les bannières de cookies ou d'autres bannières de notification qui s'affichent en haut ou en bas contribuent souvent au CLS. Cela pose particulièrement problème lorsque ces bannières masquent d'autres contenus, mais même si ce n'est pas le cas, les animer peut toujours avoir un impact sur le CLS.

Bien que les données HTTP Archive ne puissent pas associer de manière concluante les animations aux décalages de mise en page, les données montrent que les pages qui animent toute propriété CSS qui pourrait affecter la mise en page ont 15% moins de chances d'avoir un CLS de qualité par rapport aux pages en général. Certaines propriétés sont associées à un CLS plus élevé que d'autres. Par exemple, les pages qui animent des largeurs margin ou border ont un CLS "Médiocre" presque deux fois plus élevé que le taux global de pages considérées comme médiocres.

Ce n'est peut-être pas surprenant, car chaque fois que vous effectuez une transition ou une animation sur une propriété CSS induisant une mise en page, cela entraîne des décalages de mise en page. Si ces décalages de mise en page ne se produisent pas dans les 500 millisecondes d'une interaction utilisateur, ils auront un impact sur le CLS.

Ce qui peut être surprenant pour certains développeurs, c'est que cela se vérifie même lorsque l'élément est pris en dehors du flux normal du document. Par exemple, des éléments positionnés de façon absolue qui animent top ou left provoquent des décalages de mise en page, même s'ils ne déplacent pas d'autres contenus. Toutefois, si vous animez transform:translateX() ou transform:translateY() au lieu d'animer top ou left, le navigateur ne mettra pas à jour la mise en page, ce qui évitera les décalages de mise en page.

Privilégier l'animation des propriétés CSS pouvant être mises à jour sur le thread du compositeur du navigateur est depuis longtemps une bonne pratique en matière de performances, car elle déplace ces tâches du thread principal vers le GPU. En plus d'être une bonne pratique générale en matière de performances, cette approche peut aussi contribuer à améliorer le CLS.

En règle générale, n'animez ni ne faites pas de transition de propriétés CSS qui nécessitent que le navigateur mette à jour la mise en page de la page, sauf si vous le faites en réponse à un appui ou une pression sur une touche de l'utilisateur (mais pas hover). Dans la mesure du possible, privilégiez les transitions et les animations à l'aide de la propriété CSS transform.

L'audit Lighthouse Éviter les animations non composées émet un avertissement lorsqu'une page anime des propriétés CSS potentiellement lentes.

Conclusion

Améliorer les performances de vos pages peut sembler intimidant, en particulier compte tenu de la quantité de conseils disponibles sur le Web. Toutefois, en vous concentrant sur cette courte liste des bonnes pratiques les plus efficaces, vous pouvez aborder le problème avec un nouvel angle d'attaque et espérer améliorer les métriques Core Web Vitals de votre site Web.

Pour aller plus loin, consultez les guides suivants:

• Optimiser l'INP
• Optimiser le LCP
• Optimiser le CLS

Annexe: journal des modifications

Les modifications majeures apportées à ce document seront suivies ici pour expliquer quand et pourquoi les principales recommandations ont changé.

Octobre 2024

Mise à jour 2024:

• INP
  • Nous avons remplacé FID par INP pour cette métrique, conformément au lancement d'INP en tant que métrique Core Web Vitals, et en avons fait la première de la liste.
  • Nous avons annulé notre recommandation d'utiliser l'API isInputPending pour diviser les tâches longues. Pour en savoir plus sur notre raisonnement, consultez l'article Optimiser les tâches longues.
• LCP
  • Nous avons combiné les recommandations sur la visibilité et la hiérarchisation.
  • Nous avons ajouté une nouvelle recommandation visant à privilégier les navigations instantanées.

Janvier 2023

Voici la liste initiale de recommandations:

• LCP
  • Assurez-vous que la ressource LCP est visible à partir de la source HTML.
  • Assurez-vous que la ressource LCP est prioritaire
  • Utiliser un CDN pour optimiser le TTFB de documents et de ressources
• CLS
  • Définir des tailles explicites pour tout contenu chargé à partir de la page
  • Vérifier que les pages sont éligibles au cache amélioré
  • Évitez les animations et les transitions qui utilisent des propriétés CSS induisant une mise en page
• FID
  • Éviter ou diviser les tâches longues
  • Éviter le code JavaScript inutile
  • Éviter les mises à jour de rendu importantes

Vous pouvez également regarder cette présentation Google I/O 2023 qui propose une vidéo récapitulative.