Core Web Vitals : guide complet pour améliorer vos scores Google

Les sites qui atteignent les seuils recommandés des Core Web Vitals enregistrent 24 % moins d'abandons de page (Chrome UX Report, 2024). Pourtant, en France, près de 40 % des sites ne passent pas l'évaluation CWV sur mobile. Résultat : des positions SEO qui stagnent et des visiteurs qui partent avant d'avoir vu votre offre.

Ce guide vous explique chaque métrique en détail, vous montre comment les mesurer, et vous donne des solutions concrètes pour atteindre les bons seuils. Que vous soyez développeur ou dirigeant d'entreprise, vous repartirez avec un plan d'action.

Qu'est-ce que les Core Web Vitals ?

Google a introduit les Core Web Vitals en 2020 et les a intégrés comme facteur de classement en juin 2021. D'après Google Search Central, ces métriques mesurent trois dimensions de l'expérience utilisateur. Chaque métrique a un seuil précis à respecter.

Les trois Core Web Vitals en 2026 sont :

• LCP (Largest Contentful Paint) : mesure la vitesse d'affichage du plus grand élément visible. Seuil : moins de 2,5 secondes.
• INP (Interaction to Next Paint) : mesure la réactivité aux interactions utilisateur. Seuil : moins de 200 millisecondes. A remplacé le FID en mars 2024.
• CLS (Cumulative Layout Shift) : mesure la stabilité visuelle de la page. Seuil : moins de 0,1.

Chaque métrique a trois catégories : bon (vert), à améliorer (orange) et médiocre (rouge). Pour qu'une page soit considérée comme performante, les trois métriques doivent être dans le vert au 75e percentile des visites.

LCP : la vitesse d'affichage

Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible dans le viewport. D'après web.dev, c'est généralement une image hero, un titre H1 ou un bloc de texte principal. Un LCP lent donne une impression de site cassé — l'utilisateur attend, puis s'en va.

Ce qui dégrade le LCP

• Images non optimisées : une hero image de 3 Mo en JPEG bloque tout
• Serveur lent : un TTFB (Time to First Byte) supérieur à 800 ms retarde l'ensemble
• CSS/JS bloquant : des ressources render-blocking qui empêchent l'affichage
• Polices web : le texte invisible pendant le chargement des fonts (FOIT)

Comment améliorer le LCP

• Optimiser la hero image : format WebP/AVIF, compression à 80 %, dimensions adaptées. Un <link rel="preload"> pour le LCP element accélère l'affichage.
• Réduire le TTFB : CDN, cache serveur, HTTP/2 ou HTTP/3. Objectif : TTFB sous 600 ms.
• Supprimer le CSS non critique : inlinez le CSS above-the-fold, différez le reste.
• Précharger les polices : font-display: swap et <link rel="preload"> pour les fonts.

Pour des techniques d'optimisation détaillées, consultez notre guide sur l'optimisation de la vitesse d'un site web.

INP : la réactivité aux interactions

L'INP a remplacé le FID en mars 2024 comme Core Web Vital officiel. Selon web.dev, le FID ne mesurait que la première interaction. L'INP prend en compte toutes les interactions pendant la session et retient la pire latence (au 98e percentile). C'est une métrique bien plus exigeante.

Ce qui dégrade l'INP

• JavaScript lourd : les tâches longues (> 50 ms) bloquent le thread principal
• Frameworks SPA : React, Vue, Angular peuvent créer des re-renders coûteux
• Event handlers complexes : des clics qui déclenchent des calculs lourds
• Third-party scripts : analytics, pubs, widgets sociaux qui s'exécutent au premier plan

Comment améliorer l'INP

• Découper les tâches longues : utilisez requestIdleCallback ou scheduler.yield() pour fractionner le JavaScript.
• Différer le JS non essentiel : defer et async sur les scripts, chargement conditionnel des third-parties.
• Réduire la complexité du DOM : moins de nœuds DOM signifie des re-renders plus rapides.
• Virtualiser les longues listes : ne rendez que les éléments visibles dans le viewport.

L'INP est souvent le Core Web Vital le plus difficile à optimiser. Sur les sites avec beaucoup d'interactivité, c'est un travail de fond sur l'architecture JavaScript.

CLS : la stabilité visuelle

Le CLS mesure les décalages visuels inattendus pendant le chargement. D'après web.dev, un CLS élevé survient quand des éléments bougent sur la page sans action de l'utilisateur — un bouton qui se déplace juste avant qu'on clique dessus, un texte qui saute à cause d'une pub chargée tardivement. C'est frustrant et ça fait fuir les visiteurs.

Ce qui dégrade le CLS

• Images sans dimensions : le navigateur ne réserve pas l'espace avant le chargement
• Publicités dynamiques : les bannières qui s'insèrent dans le flux de contenu
• Polices web : le texte qui change de taille quand la font se charge (FOUT)
• Contenu injecté dynamiquement : des éléments ajoutés par JavaScript après le rendu initial

Comment améliorer le CLS

• Toujours spécifier width et height : sur les images et les iframes, pour que le navigateur réserve l'espace.
• Réserver l'espace des pubs : utilisez min-height sur les conteneurs publicitaires.
• Utiliser font-display: optional : si la police ne se charge pas à temps, le fallback reste en place.
• Éviter l'injection de contenu au-dessus du fold : les bandeaux cookies, promos et notifications doivent être positionnés en overlay, pas dans le flux.

Le CLS est souvent le plus simple des trois CWV à corriger. Un audit SEO rapide permet d'identifier les problèmes en quelques minutes.

Comment mesurer vos Core Web Vitals

Il existe deux types de données : les données de laboratoire (simulées) et les données terrain (vrais utilisateurs). Google utilise les données terrain du Chrome UX Report pour le classement SEO. Les données labo sont utiles pour diagnostiquer, mais ce sont les données terrain qui comptent pour votre référencement.

Outils gratuits

• Google PageSpeed Insights : combine données terrain (CrUX) et données labo (Lighthouse). L'outil de référence.
• Google Search Console : rapport Core Web Vitals avec l'état de chaque URL. Identifie les pages problématiques par lot.
• Chrome DevTools (Lighthouse) : audit local détaillé avec recommandations. Pratique pour tester avant de publier.
• Web Vitals Extension : extension Chrome qui affiche les CWV en temps réel pendant la navigation.
• Chrome UX Report (CrUX) : API publique avec les données terrain de millions de sites. C'est la source officielle de Google.

Différence entre données labo et terrain

• Données labo : conditions contrôlées, réseau simulé, appareil standard. Reproductibles mais pas représentatives.
• Données terrain : mesurées sur les vrais appareils des vrais visiteurs. Variables mais représentatives. C'est ce que Google utilise.

Pour un suivi complet, combinez la Search Console (vue d'ensemble) avec PageSpeed Insights (diagnostic par page). Si vous partez de zéro, notre checklist SEO on-page couvre les fondamentaux.

Plan d'action : améliorer vos CWV en 30 jours

D'après notre expérience, la plupart des sites peuvent atteindre les bons seuils en 4 semaines avec une approche méthodique. Les améliorations les plus rapides viennent souvent des images et du CSS. Voici un plan d'action par semaine.

Semaine 1 : audit et quick wins

• Passez chaque page clé dans PageSpeed Insights. Notez les scores et les recommandations.
• Compressez toutes les images en WebP/AVIF. C'est souvent le gain le plus immédiat sur le LCP.
• Ajoutez width et height à toutes les images et iframes. Le CLS s'améliore instantanément.
• Activez le lazy loading sur les images sous le fold.

Semaine 2 : CSS et rendu

• Identifiez et inlinez le CSS critique (above-the-fold). Différez le reste.
• Préchargez les polices web et configurez font-display: swap.
• Supprimez les CSS inutilisés avec PurgeCSS ou un outil similaire.
• Configurez le preload sur l'élément LCP principal de chaque page.

Semaine 3 : JavaScript et interactivité

• Auditez les scripts third-party. Supprimez ceux qui ne sont pas indispensables.
• Différez ou chargez de manière asynchrone les scripts non critiques.
• Identifiez les tâches longues avec Chrome DevTools Performance et fractionnez-les.
• Testez l'INP sur les pages les plus interactives (formulaires, filtres, recherche).

Semaine 4 : serveur et infrastructure

• Activez la compression Brotli/Gzip côté serveur si ce n'est pas déjà fait.
• Configurez un CDN pour rapprocher les fichiers de vos visiteurs.
• Activez le cache navigateur avec des durées longues sur les assets statiques.
• Vérifiez que HTTP/2 (ou HTTP/3) est activé sur votre serveur.

Le design responsive et mobile-first est un prérequis pour de bons CWV. Si votre site n'est pas optimisé mobile, les scores terrain seront toujours médiocres — car Google mesure les CWV sur mobile.

Conclusion : les Core Web Vitals sont un investissement, pas une contrainte

Améliorer vos Core Web Vitals, c'est améliorer l'expérience de vos visiteurs. Et une meilleure expérience se traduit par plus de conversions, moins de rebond et un meilleur référencement. Les points à retenir :

• LCP < 2,5 s : optimisez images, serveur et CSS critique
• INP < 200 ms : fractionnez le JavaScript, limitez les third-parties
• CLS < 0,1 : spécifiez les dimensions, réservez l'espace des éléments dynamiques
• Mesurez avec les données terrain : ce sont elles que Google utilise pour le classement
• Agissez par priorité : images et CLS d'abord, JavaScript ensuite

Vos scores CWV ne sont pas au vert ? Simulez votre devis en ligne pour un audit personnalisé de vos performances web et un plan d'optimisation adapté à votre site.