Core Web Vitals : comprendre et améliorer la performance de votre site
Guide pratique sur les Core Web Vitals de Google : LCP, INP, CLS. Comment mesurer et améliorer 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 métriques qui mesurent l’expérience utilisateur réelle de votre site web. Un site lent ou instable sera pénalisé dans les résultats de recherche.
Comprendre ces métriques est la première étape pour les améliorer.
Les trois métriques 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 améliorer | 2.5 à 4 secondes |
| Mauvais | Plus de 4 secondes |
Les causes courantes d’un mauvais LCP :
- Images non optimisées (trop lourdes, mauvais format)
- Serveur lent (temps de réponse élevé)
- CSS ou JavaScript qui bloqué le rendu
- Polices web qui prennent du temps à charger
Comment améliorer :
- Utilisez des images au format WebP ou AVIF
- Activez le chargement paresseux (lazy loading) pour les images hors écran
- 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 à jour visuelle de la page.
| Classement | Valeur |
|---|---|
| Bon | Moins de 200 ms |
| A améliorer | 200 à 500 ms |
| Mauvais | Plus de 500 ms |
Les causes courantes d’un mauvais INP :
- JavaScript lourd qui bloqué le thread principal
- Gestionnaires d’événements lents
- Trop de composants qui se mettent à jour simultanément
- Librairies tierces (analytics, chat widgets, publicites)
Comment améliorer :
- Minimisez le JavaScript envoye au navigateur
- Utilisez
requestAnimationFramepour les animations - Divisez les tâches longues en plus petites tâches
- Choisissez un framework qui envoie moins de JS — Astro envoie zero JS par défaut
CLS — Cumulative Layout Shift
Ce que ca mesure : la stabilite visuelle de la page. Un CLS élevé signifie que les éléments bougent de facon inattendue pendant le chargement.
| Classement | Valeur |
|---|---|
| Bon | Moins de 0.1 |
| A améliorer | 0.1 à 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 améliorer :
- Spécifiez toujours
widthetheightsur les images - Réservez l’espace pour les publicites et embeds
- Utilisez
font-display: swapavec des polices de remplacement similaires - Évitez 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 réelles et en laboratoire
- Google Search Console — rapport Core Web Vitals avec données de terrain
- Lighthouse (intégré dans Chrome DevTools) — audit complet de performance
- Web Vitals Extension (extension Chrome) — mesure en temps reel pendant la navigation
Donnees de terrain vs données de laboratoire
Les données de terrain (CrUX) reflètent l’expérience des vrais utilisateurs sur 28 jours. C’est ce que Google utilise pour le classement.
Les données de laboratoire (Lighthouse) simulent un chargement dans des conditions contrôlées. Elles sont utiles pour le debugging mais ne reflètent pas toujours la réalité.
Privilégiez les données 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 qualité reste le facteur #1.
Cela dit, à contenu egal, un site rapide et stable sera favorise par rapport à un site lent. C’est un avantage compétitif reel, surtout dans des niches concurrentielles.
Pour le SEO local, la performance est encore plus importante car Google valorise l’expérience mobile, et les connexions mobiles sont souvent plus lentes.
Les gains rapides
Si vous devez améliorer vos Core Web Vitals rapidement, voici les actions à plus fort impact :
- Optimisez vos images — c’est presque toujours le problème #1
- Réduisez 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 à un framework statique comme Astro si votre site est un site vitrine
Nos résultats typiques
Les sites que nous construisons chez Codetonic avec Astro obtiennent systématiquement :
- 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 dès le départ.
Conclusion
Les Core Web Vitals ne sont pas juste des métriques techniques — ils mesurent l’expérience réelle 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.