Les Web Vitals mesurent la santé d'un site vue par l'utilisateur : le chargement (LCP), l'interactivité (INP), et la stabilité visuelle (CLS). Un site avec LCP < 2,5 s, INP < 200 ms et CLS < 0,1 améliore son classement Google et réduit le taux de rebond de 30-50%.
Les Web Vitals sont un ensemble de métriques standardisées par Google (2020) pour évaluer l'expérience utilisateur. Les trois Core Web Vitals sont LCP, INP et CLS. Ils mesurentrespectively : le temps d'affichage du plus grand élément visible, la latence des interactions utilisateur, et la stabilité visuelle pendant le chargement. Google utilise ces métriques comme signal de ranking depuis juin 2021. Un site qui échoue les seuils peut recevoir un avertissement dans Search Console et être pénalisé dans les résultats de recherche.
Les Web Vitals, c'est comme la visite de contrôle chez le médecin : le pouls (LCP = vitesse), les réflexes (INP = réactivité), et la stabilité des mains (CLS = pas de tremblements). Si le médecin dit que tout est normal, vous êtes en forme. Si un indicateur est rouge, quelque chose ne va pas et il faut traiter.
Le LCP chronomètre le temps entre le début du chargement et l'affichage du plus grand élément visible (image hero, bloc de texte, vidéo). Seuil Google : 2,5 secondes au 75e percentile CrUX. Un LCP > 4 s signale une dette technique lourde. Pinterest a réduit son LCP de 40% et augmenté les inscriptions de 15%. Le LCP se décompose en 5 phases : TTFB, resource delay, load time, render delay, et element render. Les 3 causes principales : serveur lent (TTFB > 800 ms), images lourdes (2 Mo+ PNG), et JavaScript bloquant.
Depuis mars 2024, INP remplace FID comme Core Web Vital. INP mesure le temps entre n'importe quelle interaction (clic, tap, clavier) et le rendu visuel suivant, sur toute la durée de la session. Seuil : 200 ms. INP élevé (500 ms+) signifie que le thread principal est bloqué par du JavaScript lourd. Sur mobile, l'INP moyen des sites e-commerce est de 380 ms (HTTP Archive 2024) — bien au-delà du seuil. Chaque clic « ajouter au panier » avec 500 ms de latence réduit le taux d'ajout de 31% (Shopify, 2024).
Le CLS mesure combien le contenu bouge pendant le chargement. Seuil : 0,1. Une image sans dimensions déclarées ajoute +0,25 de CLS. Les utilisateurs qui cliquent sur le mauvais bouton à cause d'un décalage (cookie banner injecté, police FOUT) abandonnent. Chaque 0,1 d'amélioration du CLS réduit le taux de rebond de 8-12%. Les sites e-commerce ont un CLS moyen de 0,28 — bien au-delà du seuil acceptable.
Site e-commerce de prêt-à-porter (420K visites/mois) : LCP = 5,8 s, INP = 480 ms, CLS = 0,31. Diagnostic : (1) 1 400 images PNG non compressées, (2) 6 scripts tiers non différés, (3) bannière cookie injectée en JavaScript. Actions en 6 semaines : conversion de toutes les images en AVIF (ShortPixel), ajout des attributs width/height sur 100% des images, defer des scripts GTM/Facebook Pixel, intégration de la bannière cookie dans le flux HTML. Résultat : LCP = 1,4 s, INP = 95 ms, CLS = 0,06. Taux de rebond -38%, conversions mobile +24%, panier moyen +18€. Coût : 280€/mois (CDN + outils) vs revenu additionnel estimé à +94K€/an.
| Vital | Seuil bon | Seuil à améliorer | Seuil mauvais |
|---|---|---|---|
| LCP | ≤ 2,5 s | 2,5 - 4,0 s | > 4,0 s |
| INP | ≤ 200 ms | 200 - 500 ms | > 500 ms |
| CLS | ≤ 0,1 | 0,1 - 0,25 | > 0,25 |
| INP e-commerce mobile | 380 ms (moyenne) | benchmark HTTP Archive | Au-delà du seuil |
| CLS e-commerce moyen | 0,28 (dépassé) | Room for improvement | Action requise |