Core Web Vitals (CWV) sont les métriques techniques de Google qui mesurent l'expérience utilisateur réelle d'une page web. Les3 métriques : LCP (vitesse de chargement), CLS (stabilité visuelle), et INP (interactivité). Un site avec de mauvais CWV est pénalisé dans les rankings depuis 2021.
Les Core Web Vitals ont été introduits par Google en 2020 et sont devenus un facteur de ranking en2021. Les métriques : (1) LCP (Largest Contentful Paint) — temps de chargement du plus grand élément visible (image, block de texte). Seuil :< 2.5s good, 2.5-4s needs improvement, > 4s poor. (2) CLS (Cumulative Layout Shift) — stabilité visuelle (est-ce que les éléments bougent pendant le chargement?). Seuil : < 0.1 good,0.1-0.25 needs improvement, > 0.25 poor. (3) INP (Interaction to Next Paint) — remplaçant FID depuis2024, mesure la latence d'interaction. Seuil : < 200ms good, 200-500ms needs improvement, > 500ms poor.
Les Core Web Vitals, c'est comme les notes d'un restaurant sur Google : le LCP c'est le temps d'attente avant d'être assis (plus vite = mieux), le CLS c'est si les chaises bougent quand vous vous asseyez (stable = mieux), et l'INP c'est le temps avant que le serveur vous serve le plat (réactif = mieux). Un restaurant avec un LCP de 10 minutes, des chaises instables, et un serveur qui met 2 minutes à prendre la commande va avoir de mauvaises critiques — même si la nourriture est bonne.
Le LCP mesure le temps pour rendre le plus grand élément visible (hero image, headline, video). Optimisations : (1) Optimiser les images — WebP/AVIF, compression, lazy loading, (2) Server response time — TTFB < 800ms via CDN et caching, (3) Render-blocking resources — minifier CSS/JS, deferrer le JS non-critical, (4) Preload — preload des images et fonts critiques. Les causes #1 de mauvais LCP : images non-optimisées (56% des cas) et server lent (29% des cas). Les sites avec LCP < 2.5s ont+24% de conversion vs ceux avec LCP > 4s.
Le CLS mesure si les éléments bougent pendant le chargement. Les causes courantes : (1) Images sans dimensions — toujours specify width/height, (2) Dynamic content — banners qui s'injectent above existing content, (3) Web fonts — FOUT (Flash of Unstyled Text) qui cause des sauts, (4) Ads — espaces publicitaires qui décalent le contenu. Les outils : Chrome DevTools, PageSpeed Insights, et WebPageTest. Chaque0.1 de CLS improvement correlates with -8% de bounce rate sur mobile.
L'INP (remplaçant FID en2024) mesure le temps entre une interaction utilisateur (clic, tape) et le paint suivant. Une bonne interactivité = < 200ms. Optimisations : (1) Long tasks —拆分 les longues tâches JavaScript en chunks plus petits, (2) Event handlers — éviter les обработка synchrones lourds, (3) Third-party scripts — lazy load les scripts non-critical (analytics, chat widgets). INP > 500ms est considered poor et affecte negativement le ranking. Les sites avec INP < 200ms ont +15% de engagement.
Site e-commerce (mode,200K visiteurs/mois) analuse ses CWV. PageSpeed Insights : LCP 4.8s (poor), CLS 0.24 (needs improvement), INP 380ms (needs improvement). Diagnostique : hero image non-optimisée (2.4MB), pas de CDN, JS third-party qui bloque le render. Phase 1 : compression image → WebP 280KB, preload, CDN Cloudflare. Phase 2 : dimensions sur toutes les images + font-display: swap. Phase 3 : async sur analytics et chat widget. Résultat : LCP 4.8s → 1.9s, CLS 0.24 → 0.04, INP 380ms → 95ms. Conversion rate : +18%, bounce rate : -14%.
| Métrique | Valeur |
|---|---|
| LCP good threshold | < 2.5s |
| CLS good threshold | < 0.1 |
| INP good threshold | < 200ms |
| Conversion boost (LCP < 2.5s) | +24% |
| Bounce reduction (CLS -0.1) | -8% |