Core Web Vitals 2026 : le guide pour passer au vert

Depuis mars 2024, les Core Web Vitals sont un facteur de ranking officiel. En 2026, leur poids a été augmenté. Mais comprendre LCP, INP et CLS — et savoir comment les améliorer — reste opaque pour la plupart des propriétaires de sites. Ce guide décode tout.

1. LCP — Largest Contentful Paint : objectif < 2,5 secondes

Le Largest Contentful Paint mesure le temps nécessaire pour afficher l'élément visible le plus grand de la page (souvent une image hero, un titre H1, ou un bloc texte). Google considère un LCP "Good" en dessous de 2,5 secondes.

Les causes fréquentes d'un mauvais LCP :

• Images non optimisées — JPEG de 3 Mo servis sans compression ni conversion WebP/AVIF
• Serveur lent ou hébergement mutualisé bas de gamme — TTFB (Time To First Byte) supérieur à 600ms
• Ressources bloquantes — CSS ou JS qui retardent le rendu du contenu principal
• Absence de CDN — Serveur physiquement éloigné de l'utilisateur

2. INP — Interaction to Next Paint : objectif < 200ms

L'Interaction to Next Paint est la métrique la plus récente et souvent la plus mal comprise. Elle mesure la réactivité globale de votre page : à chaque fois qu'un utilisateur clique, tape ou appuie, combien de temps faut-il avant que la page affiche visuellement une réponse ?

Un INP "Good" est inférieur à 200ms. Entre 200 et 500ms : "Needs Improvement". Au-delà de 500ms : "Poor".

Les principaux coupables d'un mauvais INP :

• Long tasks JavaScript — Des scripts qui monopolisent le thread principal plus de 50ms
• Événements mal optimisés — Handlers d'événements qui déclenchent des recalculs DOM lourds
• Third-party scripts — Google Tag Manager mal configuré, chatbots, plugins analytics
• Animations CSS non accélérées GPU — Propriétés top/left au lieu de transform

3. CLS — Cumulative Layout Shift : objectif < 0,1

Le Cumulative Layout Shift mesure la stabilité visuelle de votre page. Un CLS élevé signifie que des éléments bougent pendant le chargement — les publicités qui se chargent et décalent le texte, les images sans dimensions déclarées, les polices web qui changent la mise en page.

C'est la métrique la plus facile à améliorer techniquement, et pourtant beaucoup de sites continuent de l'ignorer :

• Déclarez toujours les attributs width et height sur vos balises <img>
• Réservez de l'espace pour les publicités et embeds avec des conteneurs de taille fixe
• Utilisez font-display: optional ou préchargez vos polices web
• Évitez d'injecter du contenu au-dessus du fold via JavaScript après le chargement initial

4. Les bons outils pour mesurer vos Core Web Vitals

Il existe une distinction capitale que beaucoup ignorent : les données lab (tests synthétiques) vs les données field (données réelles des utilisateurs). Google utilise les données field pour le ranking.

• Google Search Console → Expérience > Signaux Web Essentiels : vos données field réelles
• PageSpeed Insights : combine lab et field si votre site a assez de trafic dans le CrUX
• Chrome DevTools > Performance : pour analyser les Long Tasks et les causes d'INP
• web.dev/measure : rapport Lighthouse complet avec recommandations

5. Checklist d'optimisation prioritaire

Voici notre checklist terrain, dans l'ordre de ROI décroissant :

1. Convertir toutes les images en WebP ou AVIF et les compresser sous 150 Ko
2. Activer un CDN (Cloudflare gratuit suffit pour la majorité des sites)
3. Passer à un hébergement avec TTFB < 200ms (VPS ou hébergement managé)
4. Auditer et supprimer les scripts tiers inutiles (tags GA anciens, pixels oubliés)
5. Déclarer width et height sur toutes les images
6. Différer (defer) et minifier tous les scripts JavaScript non critiques