Core Web Vitals : Mesurer et améliorer les performances web

Vos utilisateurs s'attendent à des expériences rapides et fluides. Les Core Web Vitals (CWV) de Google quantifient cette expérience : Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS). De mauvais scores nuisent au SEO et aux conversions. Ce guide vous montre comment mesurer et améliorer chaque métrique avec des étapes concrètes.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois métriques centrées sur l'utilisateur que Google utilise comme signaux de classement :

• LCP : Temps nécessaire pour que le plus grand élément de contenu (image, bloc de texte) devienne visible. Bon : ≤2,5 s.
• FID : Temps entre la première interaction de l'utilisateur (clic, tap) et la réponse du navigateur. Bon : ≤100 ms.
• CLS : Stabilité visuelle — combien la mise en page se décale de manière inattendue. Bon : ≤0,1.

Ces métriques reflètent l'expérience utilisateur réelle, pas seulement les conditions de laboratoire. Les améliorer rend votre site plus rapide et plus stable.

Comment mesurer les Core Web Vitals

Vous avez besoin de données de laboratoire et de terrain. Les outils de laboratoire aident au débogage ; les données de terrain (Real User Monitoring) montrent les performances réelles.

Outils de laboratoire

• Lighthouse (dans Chrome DevTools) : Lancez des audits pour les performances, l'accessibilité et le SEO. Il rapporte LCP, CLS et TBT (un proxy pour FID).
• WebPageTest : Tests avancés avec filmstrips et waterfall charts.
• Panneau Performance de Chrome DevTools : Enregistrez et analysez les performances d'exécution.

Outils de terrain

• Chrome User Experience Report (CrUX) : Ensemble de données public de métriques utilisateurs réels pour des millions de sites.
• Google Search Console : Le rapport Core Web Vitals montre les groupes d'URL nécessitant une attention.
• Bibliothèque JavaScript web-vitals : Collectez les métriques utilisateurs réels et envoyez-les à votre outil d'analyse.

Utilisez les données de terrain pour identifier les pages problématiques, puis les outils de laboratoire pour diagnostiquer et corriger.

Améliorer Largest Contentful Paint (LCP)

LCP est souvent l'image principale ou le titre principal. Pour l'accélérer :

1. Optimisez les images : Compressez, utilisez des formats modernes (WebP, AVIF) et servez des tailles adaptées. Des outils comme Image Compressor peuvent aider à réduire la taille des fichiers sans perte de qualité.
2. Préchargez les ressources critiques : Utilisez <link rel="preload"> pour les images principales, les polices et le CSS clé.
3. Réduisez le temps de réponse du serveur : Utilisez la mise en cache, les CDN et optimisez les requêtes backend.
4. Éliminez les ressources bloquant le rendu : Différez le JS et le CSS non critiques, intégrez le CSS critique.
5. Utilisez un CDN : Servez les ressources depuis des emplacements proches des utilisateurs.

Exemple : préchargez votre image LCP :

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Améliorer First Input Delay (FID)

FID mesure la réactivité. Un long délai signifie que le thread principal est occupé. Pour améliorer :

• Découpez les tâches longues : Utilisez setTimeout ou requestIdleCallback pour céder la main au thread principal.
• Optimisez le JavaScript : Faites du code-splitting, du tree-shaking et différez les scripts non critiques.
• Réduisez l'impact des tiers : Chargez les analyses et publicités de manière asynchrone ou après interaction.
• Utilisez des web workers pour les calculs lourds.

Considérez aussi Interaction to Next Paint (INP), qui remplace FID en mars 2024. INP mesure la réactivité globale tout au long du cycle de vie de la page. Les mêmes optimisations s'appliquent.

Améliorer Cumulative Layout Shift (CLS)

CLS se produit lorsque des éléments se déplacent de manière inattendue. Causes courantes : images sans dimensions, publicités, polices et contenu dynamique. Correctifs :

• Définissez toujours width et height sur les images et vidéos, ou utilisez CSS aspect-ratio.
• Réservez de l'espace pour les publicités et les intégrations : Utilisez des éléments placeholder de taille fixe.
• Évitez d'insérer du contenu au-dessus du contenu existant sauf en réponse à une interaction utilisateur.
• Utilisez font-display: swap et préchargez les polices pour éviter le texte invisible (FOIT) et les décalages de mise en page.
• Animez avec transform au lieu de propriétés qui déclenchent un recalcul de mise en page.

Exemple : définissez le ratio d'aspect pour les images responsives :

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Outils et workflow

Intégrez les performances dans votre workflow de développement :

1. Exécutez Lighthouse dans la CI pour détecter les régressions.
2. Utilisez la bibliothèque web-vitals pour envoyer les données de terrain à votre outil d'analyse.
3. Surveillez CrUX et Search Console pour les tendances des utilisateurs réels.
4. Priorisez les correctifs par impact : souvent LCP et CLS offrent les plus grands gains.

Pour une optimisation rapide des images, essayez notre Image Compressor pour réduire les images critiques pour le LCP.

FAQ

Quels sont les seuils actuels des Core Web Vitals ?

LCP : bon ≤2,5 s, à améliorer ≤4 s, mauvais >4 s. FID : bon ≤100 ms, à améliorer ≤300 ms, mauvais >300 ms. CLS : bon ≤0,1, à améliorer ≤0,25, mauvais >0,25.

À quelle fréquence dois-je mesurer les Core Web Vitals ?

Surveillez les données de terrain en continu via RUM. Exécutez des audits de laboratoire à chaque changement de code significatif et au moins mensuellement pour détecter les régressions.

L'amélioration des Core Web Vitals affecte-t-elle vraiment le SEO ?

Oui, Google utilise l'expérience de page (y compris les CWV) comme signal de classement. Bien que le contenu reste primordial, de bons CWV peuvent vous donner un avantage et améliorer la satisfaction des utilisateurs.