Core Web Vitals : seuils, mesure et plan d’optimisation

Les Core Web Vitals mesurent trois dimensions concrètes de l’expérience : la vitesse d’affichage du contenu principal, la réactivité aux interactions et la stabilité visuelle. En 2026, les trois métriques sont LCP, INP et CLS. Le FID n’est plus un Core Web Vital.

Ces indicateurs aident à diagnostiquer une expérience dégradée. Ils ne remplacent ni la pertinence du contenu, ni l’accessibilité, ni la capacité du site à convertir.

Quels sont les trois Core Web Vitals ?

LCP : vitesse d’affichage du contenu principal

Le Largest Contentful Paint mesure le temps nécessaire pour afficher le plus grand élément de contenu visible dans la fenêtre. Il s’agit souvent d’une image principale, d’un bloc de texte ou d’une bannière.

Le seuil « bon » recommandé est un LCP inférieur ou égal à 2,5 secondes au 75e centile des visites.

INP : réactivité aux interactions

Interaction to Next Paint évalue la latence observée lors des interactions réalisées pendant une visite. Une interaction lente peut correspondre à un menu qui tarde à s’ouvrir, un bouton qui semble bloqué ou un champ qui répond difficilement.

Le seuil « bon » recommandé est un INP inférieur ou égal à 200 millisecondes au 75e centile.

CLS : stabilité visuelle

Cumulative Layout Shift mesure les déplacements inattendus du contenu. Un bouton qui bouge au moment du clic ou un texte repoussé par une image tardive dégrade l’expérience.

Le seuil « bon » recommandé est un CLS inférieur ou égal à 0,1 au 75e centile.

Ces seuils et la méthode du 75e centile sont documentés dans la référence officielle Web Vitals.

Données terrain et laboratoire : pourquoi elles diffèrent

Les données terrain décrivent les visites réelles, avec des appareils, réseaux, caches et comportements variés. Elles alimentent notamment le Chrome UX Report et le rapport Core Web Vitals de Search Console lorsqu’un volume suffisant existe.

Les données laboratoire reproduisent un scénario contrôlé. Lighthouse aide à détecter des causes et à comparer des versions, mais son résultat ne représente pas toutes les visites réelles.

Utilisez le terrain pour savoir si les utilisateurs rencontrent un problème, puis le laboratoire et le profilage pour comprendre la cause.

Comment améliorer le LCP ?

• Identifier l’élément réellement mesuré comme LCP.
• Réduire le temps de réponse serveur et les redirections inutiles.
• Prioriser la ressource principale au lieu de la charger tardivement.
• Compresser et dimensionner correctement l’image principale.
• Éviter que du JavaScript non essentiel bloque le rendu.
• Charger les polices avec une stratégie adaptée.

Ne chargez pas paresseusement l’image LCP si elle est immédiatement visible. La priorité dépend toutefois de la page : mesurez avant de modifier.

Comment améliorer l’INP ?

• Repérer les interactions lentes dans les données terrain ou les traces.
• Découper les longues tâches JavaScript.
• Réduire le travail exécuté par les scripts tiers.
• Limiter les mises à jour importantes du DOM.
• Donner un retour visuel immédiat après une action.
• Tester les menus, filtres, formulaires et composants les plus utilisés.

Une page peut charger vite et rester pénible à utiliser si son thread principal est occupé après l’affichage.

Comment améliorer le CLS ?

• Réserver l’espace des images, vidéos et éléments embarqués.
• Éviter d’insérer une bannière au-dessus d’un contenu déjà affiché.
• Maîtriser les changements liés aux polices.
• Animer avec des propriétés qui ne déclenchent pas une nouvelle mise en page.
• Tester les composants conditionnels et les messages d’erreur.

Quel impact SEO et business ?

Google utilise des signaux d’expérience de page dans ses systèmes, mais un excellent score ne rend pas pertinent un contenu faible. Les Core Web Vitals deviennent particulièrement importants lorsque des pages stratégiques sont lentes, instables ou difficiles à manipuler.

L’impact business doit être mesuré sur les actions concernées : consultation produit, démarrage du formulaire, ajout au panier, achat ou lead. Comparez l’évolution technique avec le taux de conversion et les erreurs, sans promettre un gain universel.

Plan de priorisation

1. Segmenter les problèmes par modèle de page et appareil.
2. Identifier les pages à fort trafic ou forte valeur.
3. Reproduire le problème et trouver la cause dominante.
4. Corriger un modèle ou composant réutilisé avant les cas isolés.
5. Tester en laboratoire puis déployer progressivement.
6. Attendre assez de données terrain pour confirmer l’effet.

Une correction de composant peut améliorer des dizaines de pages. C’est souvent plus rentable qu’une optimisation ponctuelle article par article. Lors d’une refonte de site, intégrez ces contrôles avant la bascule et surveillez-les après publication.

Quels outils utiliser ?

Search Console aide à repérer les groupes d’URL qui échouent avec des données terrain. PageSpeed Insights réunit des données terrain lorsqu’elles existent et une analyse Lighthouse. Chrome DevTools permet d’enregistrer une trace, d’identifier les longues tâches et d’inspecter le réseau. Un dispositif de Real User Monitoring peut ensuite segmenter les métriques selon le modèle, l’appareil, la connexion ou le parcours.

Évitez de comparer aveuglément deux scores Lighthouse obtenus dans des conditions différentes. Notez l’URL, l’appareil simulé, la version, le réseau et la date. Pour une correction importante, conservez une mesure avant, une validation technique après déploiement et une observation terrain lorsque la fenêtre de données le permet.

Core Web Vitals et Webflow

Sur un site Webflow, commencez par les éléments réutilisés : navigation, scripts globaux, gestion des polices, images CMS, animations et intégrations tierces. Une image de couverture trop lourde ou un script ajouté au template peut affecter tout le blog. Auditez donc le modèle avant de compresser manuellement chaque article.

Les animations doivent servir la compréhension et rester fluides. Limitez les effets déclenchés au chargement, réservez l’espace des médias et évitez les bibliothèques redondantes. Le meilleur compromis dépend de l’expérience attendue ; l’objectif n’est pas un site vide, mais un site dont le contenu et les interactions arrivent au bon moment.