Core Web Vitals : comprendre et ameliorer la performance de votre site
Guide pratique sur les Core Web Vitals de Google : LCP, INP, CLS. Comment mesurer et ameliorer la performance de votre site web.
Les Core Web Vitals en bref
Depuis 2021, Google utilise les Core Web Vitals comme facteur de classement. Ce sont trois metriques qui mesurent l’experience utilisateur reelle de votre site web. Un site lent ou instable sera penalise dans les resultats de recherche.
Comprendre ces metriques est la premiere etape pour les ameliorer.
Les trois metriques essentielles
LCP — Largest Contentful Paint
Ce que ca mesure : le temps que prend le plus gros element visible (image, titre, bloc de texte) a s’afficher.
| Classement | Valeur |
|---|---|
| Bon | Moins de 2.5 secondes |
| A ameliorer | 2.5 a 4 secondes |
| Mauvais | Plus de 4 secondes |
Les causes courantes d’un mauvais LCP :
- Images non optimisees (trop lourdes, mauvais format)
- Serveur lent (temps de reponse eleve)
- CSS ou JavaScript qui bloque le rendu
- Polices web qui prennent du temps a charger
Comment ameliorer :
- Utilisez des images au format WebP ou AVIF
- Activez le chargement paresseux (lazy loading) pour les images hors ecran
- Preconnectez-vous aux origines tierces (
<link rel="preconnect">) - Utilisez
font-display: swappour les polices web — c’est exactement ce que nous faisons chez Codetonic en auto-hebergeant les polices
INP — Interaction to Next Paint
Ce que ca mesure : le temps entre une interaction utilisateur (clic, toucher, appui sur une touche) et la mise a jour visuelle de la page.
| Classement | Valeur |
|---|---|
| Bon | Moins de 200 ms |
| A ameliorer | 200 a 500 ms |
| Mauvais | Plus de 500 ms |
Les causes courantes d’un mauvais INP :
- JavaScript lourd qui bloque le thread principal
- Gestionnaires d’evenements lents
- Trop de composants qui se mettent a jour simultanement
- Librairies tierces (analytics, chat widgets, publicites)
Comment ameliorer :
- Minimisez le JavaScript envoye au navigateur
- Utilisez
requestAnimationFramepour les animations - Divisez les taches longues en plus petites taches
- Choisissez un framework qui envoie moins de JS — Astro envoie zero JS par defaut
CLS — Cumulative Layout Shift
Ce que ca mesure : la stabilite visuelle de la page. Un CLS eleve signifie que les elements bougent de facon inattendue pendant le chargement.
| Classement | Valeur |
|---|---|
| Bon | Moins de 0.1 |
| A ameliorer | 0.1 a 0.25 |
| Mauvais | Plus de 0.25 |
Les causes courantes d’un mauvais CLS :
- Images sans dimensions specifiees (width/height)
- Publicites ou embeds qui s’inserent dynamiquement
- Polices web qui changent la taille du texte au chargement
- Contenu injecte dynamiquement au-dessus du contenu existant
Comment ameliorer :
- Specifiez toujours
widthetheightsur les images - Reservez l’espace pour les publicites et embeds
- Utilisez
font-display: swapavec des polices de remplacement similaires - Evitez d’inserer du contenu au-dessus du contenu existant
Comment mesurer vos Core Web Vitals
Outils gratuits
- Google PageSpeed Insights (pagespeed.web.dev) — mesure en conditions reelles et en laboratoire
- Google Search Console — rapport Core Web Vitals avec donnees de terrain
- Lighthouse (integre dans Chrome DevTools) — audit complet de performance
- Web Vitals Extension (extension Chrome) — mesure en temps reel pendant la navigation
Donnees de terrain vs donnees de laboratoire
Les donnees de terrain (CrUX) refletent l’experience des vrais utilisateurs sur 28 jours. C’est ce que Google utilise pour le classement.
Les donnees de laboratoire (Lighthouse) simulent un chargement dans des conditions controlees. Elles sont utiles pour le debugging mais ne refletent pas toujours la realite.
Privilegiez les donnees de terrain quand elles sont disponibles.
L’impact sur le SEO
Google confirme que les Core Web Vitals sont un facteur de classement, mais il ne faut pas exagerer leur poids. Un contenu pertinent et de qualite reste le facteur #1.
Cela dit, a contenu egal, un site rapide et stable sera favorise par rapport a un site lent. C’est un avantage competitif reel, surtout dans des niches concurrentielles.
Pour le SEO local, la performance est encore plus importante car Google valorise l’experience mobile, et les connexions mobiles sont souvent plus lentes.
Les gains rapides
Si vous devez ameliorer vos Core Web Vitals rapidement, voici les actions a plus fort impact :
- Optimisez vos images — c’est presque toujours le probleme #1
- Reduisez le JavaScript tiers — retirez les scripts de chat, analytics secondaires, et widgets non essentiels
- Activez la compression (gzip ou brotli) sur votre serveur
- Utilisez un CDN (Vercel, Netlify, Cloudflare) pour servir le contenu plus pres des utilisateurs
- Passez a un framework statique comme Astro si votre site est un site vitrine
Nos resultats typiques
Les sites que nous construisons chez Codetonic avec Astro obtiennent systematiquement :
- LCP : sous 1 seconde
- INP : sous 50 ms (souvent 0 car pas de JavaScript)
- CLS : 0 (mise en page stable)
C’est un avantage reel de choisir la bonne stack technique des le depart.
Conclusion
Les Core Web Vitals ne sont pas juste des metriques techniques — ils mesurent l’experience reelle de vos visiteurs. Un site rapide et stable convertit mieux, classe mieux sur Google, et donne une meilleure impression de votre entreprise.
Contactez-nous pour un audit gratuit de la performance de votre site actuel.