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 mettre toutes en œuvre. 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 énorme 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:

  • avoir le plus d'impact dans le 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. Utilisez souvent la méthode Yield pour décomposer 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.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: not supported.
  • Safari: not supported.

Source

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'intégrer 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 dans lequel les tâches s'affrontent pour 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 balises plus anciennes dont le code est inutilisé pour réduire l'empreinte JavaScript de votre tag manager.

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. Le rendu est un type de travail coûteux en soi. Lors de mises à jour importantes du rendu, votre site Web peut répondre 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. La taille du DOM et l'intensité du travail de mise en page sont corrélées. 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 offrir 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 qu'elle est prioritaire.

L'équipe Chrome a constaté ce qui suit concernant le LCP sur le Web:

  • Selon l'Almanach Web 2024 de HTTP Archive, 73% des pages mobiles ont une image comme élément LCP.
  • Une analyse des données utilisateur réelles de Chrome montre que la majorité des origines avec un LCP faible passent moins de 10% de leur durée 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, 35% 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 scanner de précharge du navigateur de les détecter dès que possible.
  • Selon l'Almanach Web, 15% des pages éligibles utilisaient l'attribut HTML fetchpriority pour accorder une priorité plus élevée aux ressources, y compris celles qui pouvaient 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.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 132.
  • Safari: 17.2.

Source

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. De plus, la durée de chargement des ressources d'une image LCP peut être réduite en la réorganisant afin qu'elle reçoive plus de bande passante et se charge 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 pour réduire le délai de chargement de la ressource. 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. 7% 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étectée.
  • 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.

De plus, vous pouvez raccourcir la durée de chargement d'une ressource en vous assurant qu'elle est chargée tôt et en priorité:

  • 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" de la balise <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, il faut déployer des efforts prohibitifs pour gagner quelques millisecondes supplémentaires. 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 naviguer. De cette façon, la page prérendu peut être affichée immédiatement avec un LCP quasi nul. Pour ce faire, vous pouvez procéder à des restaurations et à des spéculations. 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.

Le cache amélioré (bfcache) permet de restaurer les pages précédemment consultées. Pour l'utiliser, vous devez vous assurer que vos pages répondent aux critères d'éligibilité à la mise en cache amélioré. 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 améliore 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.

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: not supported.
  • Safari: not supported.

Le préchargement de la page suivante qu'un utilisateur consulte est un autre moyen efficace d'améliorer considérablement les performances du LCP. Il est rendu possible par l'API Speculation Rules. Pour bénéficier de ces avantages, assurez-vous que les pages appropriées sont prérendues. Les spéculations incorrectes gaspillent des ressources à la fois sur le serveur et sur le client, ce qui peut nuire aux performances. Par conséquent, moins vous êtes sûr de la page suivante, plus vous devez être prudent avec le préchargement. 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. Imaginons qu'un utilisateur suive un lien inter-origine vers votre site, où la réponse du document HTML initial 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 arrivera, plus vite tout le reste pourra se mettre en place.

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. Les CDN disposent généralement également de commandes de mise en cache précises qui peuvent être ajustées en fonction des besoins de votre site.

Les CDN peuvent également diffuser et mettre en cache des documents HTML, mais selon l'Almanach Web, seuls 33% 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-elle ê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 bord, une fonctionnalité de la plupart des CDN modernes.

Chaque fois que vous pouvez diffuser du contenu directement depuis le point de terminaison et éviter un appel à votre serveur d'origine, vous gagnez en performances. Même si vous devez effectuer tout le trajet jusqu'à l'origine, les CDN sont généralement optimisés pour le faire plus rapidement. Vous avez donc tout à gagner.

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 nombreuses possibilités s'offrent donc à de nombreux sites pour 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. Le principal moyen d'améliorer le CLS consiste à réserver l'espace requis à l'avance autant que possible.

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. 66% des pages comportent 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. Cela représente une opportunité énorme pour le Web collectif, et cette opportunité nécessite moins d'efforts que certaines des autres recommandations suggérées dans ce guide.

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 15.

Source

Les images ne sont pas les seules à contribuer au CLS. Les décalages de mise en page peuvent être causés par d'autres contenus qui se chargent généralement après le rendu 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 la gravité 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 bfcache 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. En effet, l'introduction du bfcache en 2022 a permis d'enregistrer la plus forte amélioration du CLS de l'année.

Malgré cela, un nombre important de sites Web ne peuvent pas utiliser le bfcache et ne profitent donc pas de cet avantage sans frais en termes de performances Web. Sauf si votre page charge des informations sensibles que vous ne souhaitez pas restaurer à partir de la mémoire, assurez-vous que vos pages sont éligibles à l'utilisation du bfcache.

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 DevTools. Vous pouvez également utiliser l'API Not Restored Reasons pour détecter les raisons d'inéligibilité dans le champ.

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

Les éléments animés sont également une source courante de décalage de mise en page. 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, elles montrent que les pages qui animent une propriété CSS qui peut affecter la mise en page ont 15% moins de chances d'avoir un CLS "bon" que les pages dans leur ensemble. 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 "faible" presque deux fois plus souvent que les pages évaluées comme telles dans leur ensemble.

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 suivant une interaction utilisateur, ils auront un impact sur le CLS.

Ce qui peut surprendre certains développeurs, c'est que cela est vrai même lorsque l'élément est extrait du flux de document normal. Par exemple, les éléments positionnés de manière absolue qui animent top ou left entraînent 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'top ou left, le navigateur ne met pas à jour la mise en page de la page, ce qui évite les décalages de mise en page.

Privilégier l'animation des propriétés CSS pouvant être mises à jour sur le thread du moteur de rendu du navigateur est depuis longtemps une bonne pratique en termes de performances, car cela déplace cette tâche du thread principal vers le GPU. En plus d'être une bonne pratique générale en termes de performances, cela peut également 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.

Si vous souhaitez aller au-delà des optimisations listées ici, consultez ces guides pour en savoir plus:

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 de 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 métrique 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 regroupé les recommandations sur la visibilité et la hiérarchisation.
    • Nous avons ajouté une nouvelle recommandation visant à optimiser les navigations instantanées.

Janvier 2023

Voici la liste initiale des 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 délai avant réponse de document et de ressource
  • 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é
    • Éviter 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 pour obtenir un résumé vidéo.