Le guide du développeur sur les Core Web Vitals

Les Core Web Vitals sont la tentative de Google de quantifier ce que signifie « rapide » dans l'expérience utilisateur — et ils influencent le classement dans les résultats de recherche. Il y en a trois : LCP mesure le chargement, INP mesure la réactivité, et CLS mesure la stabilité visuelle. Les réussir ne tient pas à une astuce unique, mais à la compréhension de ce que chaque métrique évalue et à la correction des éléments précis qui la font échouer.

LCP, Largest Contentful Paint

Le LCP correspond au temps nécessaire pour que l'élément le plus grand dans le viewport (généralement une image hero ou un bloc de titre) finisse de s'afficher. L'objectif est moins de 2,5 secondes. Les causes fréquentes d'un mauvais LCP :

• Une image hero volumineuse et non optimisée
• Du CSS ou du JavaScript bloquant le rendu dans le <head>
• Un temps de réponse serveur élevé (TTFB important)
• Des polices web qui retardent l'affichage du texte

Correctifs : servez des formats d'image modernes (WebP/AVIF) à la bonne taille, préchargez l'image LCP, intégrez le CSS critique en ligne, et générez le HTML côté serveur pour que le navigateur ait quelque chose à afficher immédiatement. Si votre TTFB est élevé, le problème se situe en amont — mise en cache ou hébergement — et non côté front-end.

INP, Interaction to Next Paint

L'INP a remplacé le First Input Delay et est plus exigeant. Il mesure la latence des interactions sur l'ensemble de la visite : cliquez sur un bouton — combien de temps avant que l'écran réponde visuellement ? L'objectif est moins de 200 millisecondes. Un mauvais INP signifie presque toujours que le thread principal est bloqué par du JavaScript.

Correctifs :

• Découpez les tâches longues pour que le navigateur puisse répondre entre elles
• Réduisez la quantité de JavaScript envoyée : fractionnez le code et chargez en différé ce qui n'est pas nécessaire au premier chargement
• Différez les traitements non critiques avec requestIdleCallback ou en cédant la main au thread principal
• Évitez les opérations synchrones lourdes dans les gestionnaires d'événements

L'INP est la métrique que la plupart des sites échouent depuis le récent changement de référentiel, et c'est généralement le symptôme d'un excès de JavaScript côté client.

CLS, Cumulative Layout Shift

Le CLS mesure les déplacements inattendus — le contenu qui saute au fur et à mesure du chargement de la page. L'objectif est moins de 0,1. Les coupables habituels :

• Les images et contenus intégrés sans attributs width et height
• Les publicités ou bannières insérées au-dessus du contenu existant
• Les polices web provoquant un réaffichage au moment de leur substitution
• Le contenu injecté dynamiquement sans espace réservé

Correctifs : définissez toujours des dimensions explicites ou un aspect-ratio sur les médias, réservez l'espace pour tout ce qui se charge tardivement, et préchargez les polices en choisissant délibérément font-display: optional ou swap.

Mesurer avec les bons outils

Il existe une distinction essentielle : les données de terrain (utilisateurs réels, dans le rapport CrUX de Google) sont ce qui influe réellement sur le classement, tandis que les données de laboratoire (Lighthouse, une exécution synthétique) ne sont qu'un outil de diagnostic. Un score Lighthouse au vert ne signifie rien si les vrais utilisateurs sur des téléphones lents sont en échec.

1. Utilisez PageSpeed Insights pour consulter à la fois les données de terrain et de laboratoire pour une URL donnée.
2. Utilisez la bibliothèque JavaScript web-vitals pour collecter les valeurs réelles d'INP et de LCP auprès de vos propres utilisateurs.
3. Surveillez le rapport Core Web Vitals de Search Console pour suivre les tendances sur l'ensemble de votre site.

L'ordre des priorités

Corrigez le LCP en premier (c'est généralement le gain le plus important et cela touche le SSR et les images), puis l'INP (réduisez le JavaScript), puis le CLS (réservez l'espace de mise en page). Considérez cela comme une hygiène continue, non comme un audit ponctuel — un seul script tiers trop lourd peut anéantir des mois de travail.

Si votre Search Console signale de mauvais résultats et que vous voulez les remettre au vert sans tout réécrire, parlons-en.