webperf Par Marshkalk

Core Web Vitals expliques : LCP, CLS et INP

Les Core Web Vitals de Google sont desormais des signaux de classement. Apprenez ce que mesurent LCP, CLS et INP, ce que sont les bons scores et comment les ameliorer.

Qu'est-ce que les Core Web Vitals ?

Les Core Web Vitals sont un ensemble de metriques de performance reelles definies par Google pour mesurer la qualite de l'experience utilisateur des pages web. Ils sont devenus un signal de classement Google en 2021. Ils mesurent les performances de chargement, la stabilite visuelle et l'interactivite.

Il y a actuellement trois metriques Core Web Vitals :

  1. LCP, Largest Contentful Paint (chargement)
  2. CLS, Cumulative Layout Shift (stabilite visuelle)
  3. INP, Interaction to Next Paint (interactivite, remplace FID depuis 2024)

LCP, Largest Contentful Paint

Ce qu'il mesure : Le temps necessaire pour que le plus grand element de contenu visible soit affiche. Generalement une image hero, un grand titre ou une vignette video.

Pourquoi ca compte : Le LCP est un indicateur de "a quelle vitesse la page semble chargee". Les utilisateurs forment leur premiere impression de la rapidite de la page quand le contenu principal apparait.

Scoring :

  • Bon : <= 2,5 secondes
  • A ameliorer : 2,5 - 4 secondes
  • Mauvais : > 4 secondes

Principaux problemes LCP :

  • Image hero volumineuse, non optimisee (mauvais format, absenceWebP)
  • JavaScript ou CSS bloquant le rendu
  • Temps de reponse serveur lent (TTFB > 600ms)
  • Absence de preload de la ressource LCP

Correction cle : Precharger votre image LCP. Ajoutez <link rel="preload" as="image" href="hero.webp"> dans le <head>. Seul cela coupe generalement 1 a 2 secondes du LCP.

CLS, Cumulative Layout Shift

Ce qu'il mesure : Dans quelle mesure la mise en page se deplace de facon inattendue pendant le chargement et l'utilisation.

Pourquoi ca compte : Les decalages de mise en page inattendus provoquent des clics sur le mauvais element, une perte de position de lecture et une experience utilisateur frustrante.

Scoring :

  • Bon : <= 0,1
  • A ameliorer : 0,1 - 0,25
  • Mauvais : > 0,25

Principaux problemes CLS :

  • Images sans attributs width et height explicites
  • Publicites ou widgets injectes sans espace reserve
  • Polices web provoquant un FOUT (flash de texte non style) qui modifie la mise en page
  • Bannieres ou cookies notices charges tardivement qui repoussent le contenu

Correction cle : Toujours definir width et height sur les elements <img>. Le navigateur utilise ces valeurs pour reserver l'espace correct avant le chargement de l'image.

INP, Interaction to Next Paint

Ce qu'il mesure : La reactivite de la page aux interactions utilisateur (clics, touches, saisie clavier). INP mesure le temps entre le debut de l'interaction et la prochaine mise a jour visuelle, pour toutes les interactions pendant une session.

INP a remplace FID (First Input Delay) en mars 2024. FID ne mesurait que la premiere interaction ; INP mesure toutes les interactions tout au long de la session.

Scoring :

  • Bon : <= 200 millisecondes
  • A ameliorer : 200 - 500ms
  • Mauvais : > 500ms

Principaux problemes INP :

  • JavaScript lourd sur le thread principal bloquant la reponse
  • Longues taches (> 50ms) pendant les interactions
  • Operations DOM couteuses declenchees par les clics
  • Scripts tiers (analytics, publicites) concurrencant le thread principal

Correction cle : Decoupez les longues taches avec scheduler.yield() ou setTimeout(fn, 0). Auditez et differez les scripts tiers. Utilisez le profiler de performance de Chrome DevTools pour identifier les longues taches.

Comment mesurer les Core Web Vitals

Donnees terrain (RUM) :

  • Google Search Console → rapport Core Web Vitals (donnees terrain depuis les utilisateurs Chrome reels)
  • Chrome User Experience Report (CrUX), le jeu de donnees public utilise par Google pour le classement

Tests en laboratoire (synthetiques) :

  • PageSpeed Insights (pagespeed.web.dev), lance Lighthouse et affiche les donnees terrain
  • Lighthouse dans Chrome DevTools (Ctrl+Shift+J → onglet Lighthouse)
  • WebPageTest, cascade detaillee et filmstrip

Important : Google utilise les donnees terrain (CrUX) pour le classement. Si vous disposez de donnees terrain, privilegiez leur amélioration par rapport au seul score Lighthouse.

Verifier vos balises meta pour le SEO

L'Analyseur de balises meta de ce site verifie les metadonnees de n'importe quelle URL pour leur exhaustivite et leur correction.

En resume

LCP (chargement), CLS (stabilite) et INP (interactivite) sont les trois signaux Core Web Vitals de Google. Seuils de bonne performance : LCP <= 2,5s, CLS <= 0,1, INP <= 200ms. Precharger la ressource LCP, ajouter des dimensions aux images et eliminer le JavaScript bloquant le thread principal sont les corrections a plus fort impact pour la plupart des sites.