Comment corriger les Core Web Vitals pour avoir un site performant ? LCP, CLS et INP

Les web core vitals présentent un défi majeur pour les développeurs - 40% des sites du rapport d'expérience utilisateur Chrome ne respectent pas le seuil LCP recommandé pour une bonne expérience utilisateur. Cela signifie qu'une part importante des sites web offre une expérience utilisateur sous-optimale, risquant ainsi de perdre des visiteurs et des conversions.

Ces indicateurs de performance, connus sous le nom de Core Web Vitals, sont devenus essentiels pour évaluer l'expérience utilisateur. Ils comprennent le Largest Contentful Paint (LCP) qui mesure le temps de chargement du contenu principal et doit idéalement être inférieur à 2,5 secondes, l'Interaction to Next Paint (INP) qui évalue la réactivité et doit rester sous les 200 millisecondes, et le Cumulative Layout Shift (CLS) qui analyse la stabilité visuelle et doit être inférieur à 0,1.

Selon les données disponibles, 73% des pages mobiles ont une image comme élément LCP, et Google estime que près de la moitié des utilisateurs mobiles abandonnent un site si le temps de chargement dépasse 5 secondes. Cependant, avec les bonnes stratégies d'optimisation, il est possible d'améliorer considérablement ces métriques. Ce guide pratique présente des solutions concrètes pour que les développeurs et webmasters puissent corriger chacun des Core Web Vitals et ainsi offrir une meilleure expérience utilisateur tout en améliorant potentiellement le classement dans les résultats de recherche Google.

Devenez webmaster et maîtrisez les Core Web Vitals

Corriger le LCP, le CLS ou l’INP demande plus qu’un simple réglage technique : cela nécessite une compréhension globale du développement web. Avec la formation Webmaster du CNFDI, vous apprendrez à créer et optimiser des sites performants, adaptés aux exigences de Google et des utilisateurs.
? Découvrir la formation Webmaster du CNFDI

Corriger l’INP Core Web Vitals

L'Interaction to Next Paint (INP) mesure la réactivité d'une page aux interactions des utilisateurs. Pour offrir une expérience utilisateur optimale, cette métrique doit rester sous les 200 millisecondes. Voyons comment corriger les problèmes liés à l'INP et améliorer significativement la réactivité de votre site.

Diviser les longues tâches JavaScript

Les longues tâches JavaScript (supérieures à 50 ms) bloquent le thread principal et empêchent le navigateur de répondre rapidement aux interactions utilisateur. Pour résoudre ce problème :

• Identifiez les longues tâches avec l'API Long Tasks dans les outils de développement Chrome

• Divisez le code JavaScript volumineux en morceaux plus petits et plus gérables

• Utilisez setTimeout() ou requestIdleCallback() pour répartir le travail JavaScript en petites tranches

• Implémentez le "chunking" pour traiter les grandes quantités de données par lots plutôt qu'en une seule opération

Cette technique de division permet au navigateur d'intercaler les tâches d'interface utilisateur entre les portions de code, améliorant ainsi la réactivité perçue.

Réduire le JavaScript inutile

Chaque Ko de JavaScript a un impact sur les performances d'interaction. Ainsi :

• Effectuez un audit de votre code pour identifier et supprimer le code mort

• Utilisez des outils comme Webpack Bundle Analyzer pour visualiser la taille de vos bundles

• Appliquez le "tree shaking" pour éliminer automatiquement le code non utilisé

• Implémentez le chargement différé (lazy loading) pour les fonctionnalités non essentielles

• Remplacez les bibliothèques volumineuses par des alternatives plus légères ou du code natif

En outre, limitez l'utilisation des gestionnaires d'événements. Un nombre excessif d'écouteurs d'événements peut surcharger le thread principal et détériorer l'INP. Déléguez les événements lorsque c'est possible et supprimez les écouteurs inutilisés.

Limiter les mises à jour de rendu

Les mises à jour fréquentes du DOM sont coûteuses et peuvent nuire considérablement à l'INP :

• Regroupez les modifications du DOM pour réduire les reflows

• Utilisez requestAnimationFrame() pour synchroniser les modifications visuelles avec le cycle de rendu du navigateur

• Évitez les lectures-écritures alternées du DOM qui forcent des reflows prématurés

• Privilégiez les propriétés CSS qui n'affectent que la composition (comme transform et opacity)

• Utilisez will-change avec parcimonie pour indiquer au navigateur les éléments susceptibles de changer

Par ailleurs, soyez vigilant avec les animations CSS complexes qui peuvent surcharger le processeur et dégrader l'INP, particulièrement sur les appareils mobiles.

Utiliser des Workers pour les tâches lourdes

Le thread principal doit rester disponible pour traiter les interactions utilisateur. Les Web Workers offrent une solution efficace :

• Déplacez les calculs intensifs et le traitement de données dans des Web Workers

• Utilisez les Workers pour les opérations comme le parsing JSON, le traitement d'images ou les algorithmes complexes

• Implémentez un système de messagerie efficace entre le thread principal et les Workers

• Considérez les Worklets pour des cas d'usage spécifiques comme les animations ou le traitement audio

De plus, les Service Workers peuvent être utilisés pour gérer le cache et les requêtes réseau en arrière-plan, libérant ainsi le thread principal pour les interactions.

En appliquant ces techniques, vous améliorerez significativement l'INP de votre site. N'oubliez pas de mesurer régulièrement cette métrique avec des outils comme Chrome DevTools, Lighthouse ou le rapport d'expérience utilisateur de Chrome pour vérifier l'efficacité de vos optimisations et identifier de nouvelles opportunités d'amélioration.

Améliorer le LCP Core Web Vitals

Le Largest Contentful Paint (LCP) mesure le temps de chargement du plus grand élément visible dans la fenêtre d'affichage. Pour offrir une expérience utilisateur optimale, cette métrique doit être inférieure à 2,5 secondes ^[1]. Voyons comment améliorer cet indicateur essentiel des core web vitals.

Prioriser les ressources critiques

Pour améliorer le LCP, il est nécessaire d'examiner l'ensemble du processus de chargement et d'optimiser chaque étape ^[2]. L'objectif principal est de s'assurer que les ressources critiques commencent à se charger le plus tôt possible.

Un principe fondamental : votre ressource LCP devrait commencer à se charger en même temps que la première ressource chargée par la page ^[2]. Si ce n'est pas le cas, il existe une marge d'amélioration.

Pour prioriser efficacement vos ressources :

• Utilisez l'attribut fetchpriority="high" pour indiquer au navigateur de télécharger l'image LCP en priorité

• Ajoutez cet attribut directement dans le code HTML de l'élément LCP

• Assurez-vous que l'élément LCP est inclus directement dans le code HTML source et non inséré dynamiquement via JavaScript ^[3]

Cette technique permet au navigateur d'attribuer une priorité élevée à votre élément LCP, accélérant ainsi son chargement.

Précharger les images importantes

Lorsqu'une image constitue l'élément LCP, il est essentiel de la précharger pour accélérer son affichage. En effet, le préchargement permet d'indiquer au navigateur de charger une ressource critique avant qu'elle ne soit naturellement découverte ^[4].

Pour précharger efficacement votre image LCP, ajoutez une balise de préchargement dans la section <head> de votre HTML :

<link rel="preload" href="image-exemple.webp" as="image" fetchpriority="high" />

Cette technique est particulièrement utile dans les cas suivants :

• Lorsque l'image LCP est référencée dans un fichier CSS ou JavaScript externe

• Pour les images d'arrière-plan définies en CSS

• Pour les images qui seraient autrement découvertes tardivement

Dans un cas concret, le préchargement de l'image LCP a permis d'améliorer le score de 5,87 secondes à 2,5 secondes, soit un gain de 3,38 secondes ^[4].

Réduire le TTFB avec un CDN

Le Time to First Byte (TTFB) est une métrique fondamentale qui précède toutes les autres métriques d'expérience utilisateur ^[5]. Des valeurs TTFB élevées augmentent inévitablement le temps de LCP.

Pour un LCP optimal, visez un TTFB de 0,8 secondes ou moins ^[5]. L'utilisation d'un réseau de diffusion de contenu (CDN) est une stratégie efficace pour y parvenir, car il résout le problème de proximité entre l'utilisateur et le serveur d'origine.

Les avantages d'un CDN vont au-delà de la simple proximité géographique :

• Résolution DNS extrêmement rapide

• Utilisation de protocoles modernes comme HTTP/2 ou HTTP/3

• Versions récentes de TLS pour réduire la latence lors de la négociation

• Compression optimisée des ressources

• Mise en cache automatique des réponses compressées ^[5]

Par ailleurs, un CDN décentralise la distribution du contenu, le rapprochant physiquement des utilisateurs et réduisant ainsi le TTFB ^[6].

Utiliser le rendu côté serveur (SSR)

Le rendu côté serveur (SSR) est crucial pour améliorer le LCP. Il s'agit d'exécuter la logique de l'application côté client sur le serveur et de répondre aux requêtes de documents HTML avec le balisage HTML complet.

Du point de vue de l'optimisation du LCP, le SSR présente deux avantages principaux :

• Vos ressources d'image seront découvrables directement dans le code HTML source

• Le contenu de votre page n'aura pas besoin de requêtes JavaScript supplémentaires pour s'afficher ^[2]

Le SSR peut également aider avec d'autres métriques des core web vitals comme le First Input Delay (FID) et le Cumulative Layout Shift (CLS). En rendant davantage de contenu côté serveur, il réduit la quantité de travail nécessaire côté client ^[7].

L'inconvénient principal du SSR est qu'il nécessite un temps de traitement supplémentaire sur le serveur, ce qui peut ralentir votre TTFB. Cependant, ce compromis en vaut généralement la peine, car les temps de traitement du serveur sont sous votre contrôle, contrairement aux capacités réseau et matérielles de vos utilisateurs ^[2].

Une alternative au SSR est le pré-rendu, qui est moins complexe et améliore également le LCP. Cette technique utilise un navigateur sans interface utilisateur pour générer des fichiers HTML statiques correspondant à chaque route lors de la compilation ^[8].

Stabiliser le CLS Core Web Vitals

Le Cumulative Layout Shift (CLS) évalue la stabilité visuelle de votre site web, mesurant les décalages inattendus qui se produisent pendant le chargement. Pour offrir une expérience utilisateur optimale, Google recommande de maintenir un score CLS inférieur à 0,1 ^[1]. Examinons les stratégies efficaces pour stabiliser ce paramètre essentiel des core web vitals.

Définir des tailles fixes pour les médias

Les images et vidéos sans dimensions spécifiées constituent l'une des causes principales de décalage de mise en page. Effectivement, sans attributs de taille, le navigateur réserve initialement un espace de 0×0 pixel, puis ajuste la mise en page une fois l'élément chargé ^[9].

Pour résoudre ce problème :

• Ajoutez systématiquement les attributs width et height dans vos balises d'images et de vidéos

• Utilisez la propriété CSS aspect-ratio pour maintenir les proportions correctes

• Appliquez width: 100%; height: auto; en CSS pour conserver la réactivité tout en respectant les dimensions prédéfinies

Les navigateurs modernes utilisent désormais ces attributs pour calculer automatiquement le ratio d'aspect et réserver l'espace adéquat avant même que l'image ne soit téléchargée ^[10].

Réserver l'espace pour les contenus dynamiques

Les contenus chargés dynamiquement comme les publicités, les widgets sociaux ou les iframes peuvent provoquer des décalages importants lorsqu'ils apparaissent après le rendu initial.

Pour minimiser leur impact :

• Réservez un espace fixe pour les éléments à chargement tardif via CSS

• Utilisez min-height pour les contenus de hauteur variable

• Créez des UI squelettes ou des espaces réservés pendant le chargement

• Pour les publicités, réservez l'espace correspondant à la taille la plus probable selon vos données historiques ^[11]

Par ailleurs, évitez d'insérer de nouveaux contenus au-dessus du contenu existant, sauf en réponse à une interaction utilisateur directe ^[10].

Éviter les animations CSS qui déclenchent des reflows

Les animations utilisant certaines propriétés CSS peuvent déclencher des "reflows" (recalculs complets de la mise en page), affectant négativement le CLS et la performance globale.

À éviter absolument :

• Les animations modifiant width, height, top, left, margin ou padding

• Les transitions de propriétés qui affectent la géométrie ou la disposition

• Les animations qui poussent d'autres contenus

Privilégiez plutôt :

• La propriété transform pour déplacer, redimensionner ou faire pivoter des éléments

• opacity pour les transitions de visibilité

• will-change (avec parcimonie) pour préparer le navigateur aux changements ^[12]

Les animations utilisant transform sont traitées par le GPU et ne comptent pas dans le calcul du CLS, contrairement aux animations de position qui peuvent doubler votre score CLS ^[13].

En appliquant ces trois stratégies fondamentales, vous améliorerez significativement la stabilité visuelle de votre site et optimiserez votre score CLS.

Stratégies avancées pour les Core Web Vitals

Au-delà des optimisations de base, certaines techniques avancées peuvent considérablement améliorer les core web vitals. Ces stratégies nécessitent une approche plus technique mais offrent des gains de performance significatifs.

Hydratation progressive des composants

L'hydratation progressive permet de rendre interactifs différents éléments d'une page à des moments distincts, en privilégiant d'abord les composants critiques. Contrairement à l'hydratation traditionnelle qui rend tous les éléments interactifs simultanément, cette technique :

• Priorise les éléments essentiels comme la navigation et les boutons

• Diffère l'hydratation des composants secondaires (pied de page, widgets)

• Améliore significativement le temps d'interactivité (TTI)

Cette approche divise le travail sur le thread principal en tâches plus petites, évitant ainsi les longues périodes de blocage. L'hydratation peut être déclenchée par la visibilité (via Intersection Observer) lorsqu'un élément s'approche du viewport.

Utiliser content-visibility et contain

La propriété CSS content-visibility: auto indique au navigateur de différer le rendu des éléments hors écran jusqu'à ce qu'ils approchent du viewport. Cette optimisation :

• Réduit considérablement le travail de rendu initial

• Diminue le temps de chargement des pages avec beaucoup d'éléments DOM

• Améliore la réactivité générale et l'INP

Pour éviter les décalages de mise en page, associez-la avec contain-intrinsic-size :

.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

Mettre en place des façades pour les scripts tiers

Les façades remplacent les widgets tiers lourds par des placeholders légers qui ne chargent le contenu réel qu'après interaction. Par exemple, pour les vidéos YouTube, les cartes interactives ou les chats :

• Créez un élément statique ressemblant au widget original

• Chargez le script tiers uniquement après un clic utilisateur

• Réduisez jusqu'à 500 Ko par vidéo intégrée

Cette technique améliore non seulement les performances mais offre également des avantages en matière de confidentialité en limitant le chargement de trackers tiers.

Outils pour mesurer et suivre les Core Web Vitals

Pour optimiser efficacement les core web vitals, il est essentiel de disposer d'outils fiables pour mesurer et suivre les performances. Voici les principaux outils que vous pouvez utiliser pour surveiller vos métriques.

Google PageSpeed Insights

PageSpeed Insights (PSI) analyse les performances d'une page sur appareils mobiles et ordinateurs, fournissant des données de laboratoire via Lighthouse et des données terrain via Chrome UX Report (CrUX) ^[14]. L'outil évalue les trois métriques des core web vitals : LCP, INP et CLS, et classifie chaque métrique comme "Bonne", "À améliorer" ou "Mauvaise" ^[14].

L'avantage principal de PSI est sa capacité à comparer les performances locales avec les données des utilisateurs réels. Cependant, l'outil présente certaines limitations : il fonctionne uniquement sur les URL publiques et nécessite un trafic suffisant pour afficher les données CrUX ^[15].

Chrome DevTools et Web Vitals Extension

Chrome DevTools a désormais intégré les fonctionnalités de l'extension Web Vitals, qui sera définitivement abandonnée en janvier 2025 ^[16]. Le panneau Performance de DevTools offre deux modes essentiels :

• Une vue "Métriques en direct" qui affiche les core web vitals en temps réel

• Une vue "Trace" détaillée pour analyser en profondeur les problèmes de performance

Ce panneau permet notamment d'identifier les causes des problèmes d'INP et de visualiser les décalages de mise en page responsables du CLS ^[17].

Google Search Console

Search Console fournit des rapports de core web vitals basés sur les données réelles des utilisateurs. Sa particularité est de regrouper les pages similaires (utilisant le même modèle) pour une évaluation globale ^[15]. L'outil affiche le nombre d'URL classées comme "Bonnes", "À améliorer" ou "Mauvaises" pour chaque métrique ^[18].

En cliquant sur chaque problème, vous pouvez visualiser les groupes de pages affectés et suivre l'évolution des performances sur une chronologie de 30 jours ^[18].

Outils RUM comme DebugBear ou Treo

Les outils de Real User Monitoring (RUM) comme DebugBear collectent des données sur l'expérience réelle des visiteurs. DebugBear suit les core web vitals sur l'ensemble de votre site et identifie les éléments responsables des mauvaises performances ^[19].

Par ailleurs, Treo Site Speed offre une interface intuitive pour visualiser vos core web vitals pour l'ensemble du site et les pages individuelles, avec des résultats par pays et des données historiques ^[20]. Ces outils permettent d'identifier instantanément les régressions, contrairement aux données CrUX qui sont agrégées sur 28 jours ^[21].

Conclusion

L'optimisation des Core Web Vitals représente désormais une nécessité absolue pour tout site web moderne. Ces indicateurs clés - LCP, CLS et INP - reflètent directement l'expérience utilisateur et influencent considérablement le classement dans les résultats de recherche Google. Notre guide a présenté des solutions concrètes pour chaque métrique, allant des techniques fondamentales aux stratégies avancées.

Pour l'INP, la division des tâches JavaScript, la réduction du code inutile et l'utilisation de Workers transforment radicalement la réactivité de votre site. Concernant le LCP, la priorisation des ressources critiques, le préchargement des images importantes et l'utilisation du rendu côté serveur permettent d'atteindre le seuil recommandé de 2,5 secondes. Quant au CLS, la définition de dimensions fixes pour les médias et la réservation d'espace pour les contenus dynamiques stabilisent efficacement votre mise en page.

Les stratégies avancées comme l'hydratation progressive des composants ou l'utilisation de façades pour les scripts tiers offrent des gains supplémentaires significatifs. Parallèlement, les outils comme PageSpeed Insights, Chrome DevTools et Search Console fournissent les données nécessaires pour mesurer vos progrès et identifier les opportunités d'amélioration.

N'oubliez pas que l'amélioration des Core Web Vitals constitue un processus continu plutôt qu'une action ponctuelle. Chaque milliseconde gagnée renforce l'expérience utilisateur et, par conséquent, les performances globales de votre site. L'application méthodique des techniques présentées dans ce guide vous permettra certainement d'atteindre les seuils recommandés et de maintenir un site performant, réactif et visuellement stable.