Core Web Vitals : LCP, INP, CLS — guide complet 2026

Qu'est-ce que les Core Web Vitals ?

Les web vitals sont un ensemble de métriques créées par Google pour quantifier la qualité d'expérience d'une page web du point de vue de l'utilisateur réel.

Parmi tous les web vitals, Google en a sélectionné trois comme signaux officiels de classement : LCP, INP et CLS. Ces trois métriques couvrent les dimensions les plus critiques : le chargement, la réactivité et la stabilité visuelle.

Ce qui distingue les CWV des métriques de labo classiques, c'est qu'ils reposent sur des données de terrain réelles (Chrome User Experience Report ou CrUX). Pas de simulation, pas de conditions idéales : ce sont les performances mesurées sur les vrais appareils de vos vrais visiteurs.

Google a intégré les Core Web Vitals dans son algorithme de classement en 2021, et INP a remplacé FID en mars 2024 comme métrique d'interactivité officielle. En 2026, les seuils restent inchangés.

Les 3 métriques officielles

LCP — Largest Contentful Paint

Le Largest Contentful Paint mesure le temps nécessaire pour afficher le plus grand élément visible dans le viewport au chargement de la page. Il s'agit généralement d'une image hero, d'une photo produit principale ou d'un bloc de texte H1.

Site lent

example.com

LCP

LCP 3.8s

0s 2.5s 4s 5s

Optimisé

example.com

LCP

LCP 1.2s

0s 2.5s 4s 5s

Le LCP marque le moment où le plus grand élément visible finit de s'afficher

Seuils officiels :

Le LCP est souvent la métrique la plus difficile à passer sur les sites e-commerce, car les pages produit et les pages d'accueil sont chargées d'images lourdes.

Causes fréquentes d'un mauvais LCP :

• TTFB (Time to First Byte) élevé — serveur lent ou absence de CDN
• Image non compressée ou servie en format JPEG/PNG au lieu de WebP/AVIF
• Attribut loading="lazy" appliqué par erreur à l'image principale
• Image hero injectée par du Javascript, sans preloading

INP — Interaction to Next Paint

L'Interaction to Next Paint mesure le délai entre une interaction utilisateur (clic, tap, frappe clavier) et le prochain rendu visuel de la page. C'est la métrique qui reflète le mieux la réactivité perçue.

Seuils officiels :

Depuis mars 2024, INP remplace FID sur mobile et sur desktop. Contrairement à FID qui ne mesurait que la première interaction, INP évalue toutes les interactions de la session et retient la pire.

Causes fréquentes d'un mauvais INP :

• JavaScript lourd qui monopolise le thread principal
• Longues tâches (> 50 ms) bloquant la réponse aux événements
• Scripts tiers (chat, analytics, tracking) non différés
• Handlers d'événements sur filtres, variations produit ou panier trop coûteux

CLS — Cumulative Layout Shift

Le Cumulative Layout Shift mesure l'instabilité visuelle d'une page : chaque fois qu'un élément se déplace de façon inattendue pendant le chargement, le score CLS augmente.

Seuils officiels :

Un CLS élevé, c'est le bouton "Ajouter au panier" qui se déplace au moment où l'utilisateur clique dessus. Frustrant et mesurable, il a un impact direct sur le sentiment des utilisateurs, et va augmenter les dead clics dans vos outils analytics.

Causes fréquentes d'un mauvais CLS :

• Images sans attributs width ou height explicites
• Polices web qui remplacent la police de substitution après chargement
• A/B tests lents ou affichés sans espaces réservés
• Bannières cookies, pop-ins ou barres d'annonce injectées au-dessus du contenu
• Publicités ou blocs de recommandation sans espace réservé

Tableau récapitulatif des seuils

Évaluation au 75e percentile des chargements réels, mobile et desktop.

Pourquoi les Core Web Vitals impactent votre SEO

Impact SEO

Comment la web performance influence le référencement

GoogleBot & Crawl Budget

Avant TTFB 2.4s

Pages crawlées / jour 0

Après TTFB 0.3s

Pages crawlées / jour 0

Un TTFB rapide permet à GoogleBot de crawler plus de pages dans son budget temps

Core Web Vitals → Classement

✕ LCP

✕ INP

✕ CLS

Ranking boost

Les Core Web Vitals sont un signal de classement Google depuis 2021

Résultat dans la SERP

consultant web performance

#1 concurrent-a.fr

Services de consulting digital

Agence spécialisée en transformation digitale et stratégie web...

#2 votre-site.fr Optimisé

Votre site – Expert Web Performance

Audit et optimisation Core Web Vitals, TTFB, LCP...

#3 concurrent-b.fr

Expert SEO et référencement naturel

Optimisez votre visibilité en ligne avec mes solutions SEO...

#4 concurrent-c.fr

Agence web performance et SEO

Boostez votre site web avec notre expertise technique...

Source : Google Search Central

Google a confirmé que les CWV sont un signal de classement depuis le déploiement du Page Experience Update en 2021. En 2026, ils restent actifs et intégrés dans les systèmes de classement principaux.

La nuance à comprendre : les CWV fonctionnent comme un facteur de départage. Si deux pages ont une qualité de contenu et une autorité similaires, celle qui passe les seuils "bon" l'emportera. Ce n'est pas un levier magique — mais sur des marchés concurrentiels, ça compte.

Ce que les données montrent concrètement :

• Google évalue les CWV au 75e percentile : si 25 % de vos visiteurs ont une mauvaise expérience, votre page est classée "mauvaise"
• Les pages mobiles et desktop sont évaluées séparément dans Search Console
• Passer de "mauvais" à "bon" a plus d'impact que d'optimiser une page déjà dans le vert

Au-delà du SEO, les CWV ont un impact direct sur la conversion. Des études de Google montrent qu'un LCP > 4 s multiplie par 3 le taux de rebond. Pour un e-commerce, chaque seconde de chargement en moins se traduit en revenus.

💡 Mon retour terrain — Pourquoi un score PageSpeed de 90 ne suffit pas. Le score Lighthouse, c'est la photo dans un studio. Les données CrUX, c'est la même personne dans la rue. J'ai déjà vu des scores pagespeed sous les 40 avec un site qui finalement s'averait très rapide. La raison : Lighthouse simule toujours le même téléphone moyenne gamme sur une 4G stable mais peu rapide. CrUX agrège du vrai trafic, sur de vrais devices. Pour la majorité des sites de marques de luxe, les utilisateurs réels sont bien plus rapides que le robot Pagespeed. Mon premier réflexe sur un audit : je ne regarde même pas le score Lighthouse, je vais directement dans Search Console onglet Core Web Vitals, je trie par "Mauvais" et identifie les pages qui posent problème.

Chiffrer ce que vos CWV actuels coûtent à votre SEO et votre taux de conversion prend 30 minutes de diagnostic CrUX. Pas de devis avant d'avoir les chiffres.

Comment mesurer vos Core Web Vitals

PageSpeed Insights

⏱️ ↓

0 ms

TTFB

🖼️ ↓

0 s

LCP

📐 ↓

0

CLS

🎯 ↑

0 /100

Score

PageSpeed Insights est le point de départ incontournable. Entrez une URL, obtenez en quelques secondes :

• Les données de terrain (CrUX) — LCP, INP, CLS réels des 28 derniers jours
• Les données de labo (Lighthouse) — diagnostics détaillés et recommandations
• Un score de performance global sur 100

À retenir : les données de terrain ne s'affichent que si votre URL a suffisamment de trafic dans la base CrUX. Pour les pages à faible trafic, seules les données de labo sont disponibles.

Google Search Console

Le rapport Core Web Vitals dans Google Search Console offre une vue sitewide. Il regroupe les URLs par statut (Bon / À améliorer / Mauvais) et par type de problème.

Avantages clés :

• Vue d'ensemble sur toutes vos pages indexées
• Données réelles sur 28 jours glissants
• Séparation mobile / desktop
• Possibilité de cliquer sur une URL exemple et de lancer un test PageSpeed Insights directement

C'est l'outil à surveiller en continu, pas seulement après une optimisation.

CrUX Vis

CrUX Vis (Chrome UX Report Visualizer) est l'outil idéal pour transformer les données brutes du rapport CrUX en graphiques clairs et exploitables. Il permet d'analyser l'historique et les tendances de vos Core Web Vitals au fil du temps.

Ce qu'il apporte :

• Une visualisation historique de l'évolution de vos scores (LCP, INP, CLS) sur plusieurs mois
• Des graphiques segmentés pour comprendre la répartition exacte de vos utilisateurs (Bon / À améliorer / Mauvais)
• L'analyse de la concurrence en vous permettant d'entrer n'importe quel domaine pour espionner et comparer les performances réelles de vos concurrents
• Une comparaison simplifiée des performances entre mobile et desktop C'est l'outil parfait pour mesurer l'impact de vos optimisations sur le long terme et réaliser des benchmarks concurrentiels redoutables.

Chrome DevTools

Pour les développeurs, Chrome DevTools permet d'analyser les CWV en conditions de labo directement dans le navigateur.

Deux onglets essentiels :

• Performance — enregistrez un chargement de page et visualisez les longues tâches, l'INP, le LCP et le CLS sur la timeline
• Coverage — identifiez le JavaScript et CSS non utilisés qui alourdissent inutilement la page

L'extension Web Vitals de Chrome affiche en temps réel LCP, INP et CLS sur n'importe quelle page.

Outils tiers (WebPageTest, YellowLabTools)

WebPageTest est l'outil de référence pour les diagnostics avancés. Il permet de :

• Tester depuis des localisations géographiques précises
• Simuler différents appareils et connexions réseau
• Obtenir un waterfall détaillé pour identifier les goulots d'étranglement

Du côté des outils open source, YellowLabTools complète WebPageTest et donne une vision technique et scorée. Il fournit des rapports et recommandations d'optimisation concrètes pour optimiser la performance d'un site de manière naïve, sans prendre en compte la technologie du site ou les possibles contraintes de votre plateforme ni de votre secteur d'activité.

Ces deux outils sont particulièrement utiles pour reproduire et diagnostiquer des problèmes qui n'apparaissent pas clairement dans PageSpeed Insights.

Comment optimiser chaque métrique

Optimiser le LCP

Largest Contentful Paint (LCP)

Optimisation du plus grand élément visible

Avant optimisation

styles.css

app.js

hero.jpg

0s 3.8s

Début Événement LCP

Après optimisation

<link rel="preload">

hero.avif

main.css

plp.css

app.js

0s 1.2s

Début Événement LCP

–2.6s / –68%

L'objectif : faire en sorte que le navigateur découvre et charge l'image principale le plus tôt possible.

Actions prioritaires :

• Précharger l'image LCP dans le <head> avec <link rel="preload" as="image"> et ajouter fetchpriority="high" sur la balise <img> — c'est souvent le gain le plus rapide
• Ne jamais lazy-loader l'image LCP — loading="lazy" sur l'image principale est l'une des erreurs les plus fréquentes
• Convertir en WebP ou AVIF et redimensionner à la taille d'affichage réelle
• Réduire le TTFB : CDN avec edge delivery, cache serveur, hébergement performant
• Éviter les chaînes de redirections et les ressources hébergées sur des domaines tiers sans préconnexion

<!-- Exemple de préchargement correct de l'image LCP -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" width="1200" height="600" fetchpriority="high" alt="...">

Optimiser l'INP

Interaction to Next Paint (INP)

Réactivité aux interactions

Avant optimisation

Ajout panier Ajouté

Blocked by 1st & 3rd party code

loader

INP 450ms

clic

Après optimisation

Ajout panier Ajouté

60ms

loader

INP 60ms

clic

L'INP se dégrade quand le thread principal est saturé. La solution : alléger et différer le JavaScript.

Actions prioritaires :

• Auditer avec Chrome DevTools Performance pour identifier les longues tâches (> 50 ms)
• Différer les scripts non critiques avec defer ou async, et les scripts tiers avec requestIdleCallback()
• Découper les gros bundles JS avec le code splitting — ne chargez que ce dont la page a besoin
• Déplacer les calculs lourds hors du thread principal avec des Web Workers
• Optimiser les handlers d'événements — réduire le travail au clic, utiliser debounce sur les filtres et champs de recherche
• Supprimer ou remplacer les scripts tiers inutiles — chaque script de tracking, chat ou widget a un coût INP

Un INP mauvais sur e-commerce se manifeste souvent sur : l'ajout au panier, les filtres de catalogue, les sélecteurs de variantes produit.

Corriger le CLS

Cumulative Layout Shift (CLS)

-30% FLASH SALE Promo banner

/

/

no sizes

FOUT

S

M

L

A/B test

Perso

Late CSS

Le CLS se corrige en réservant l'espace avant que les éléments se chargent.

Actions prioritaires :

• Toujours spécifier width et height sur toutes les balises <img> et <video>
• Utiliser aspect-ratio en CSS pour les images responsives dont les dimensions varient
• Réserver un espace fixe pour les publicités, blocs de recommandation et contenus injectés dynamiquement
• Gérer les polices web avec font-display: optional ou font-display: swap + redéfinition des métriques de substitution
• Ne jamais injecter de contenu au-dessus du contenu existant sans interaction utilisateur (bannières, pop-ins, barres de cookies)

/* Réserver l'espace pour une image responsive */
.product-image-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

💡 Mon retour terrain — L'optim CWV qui a eu le plus gros impact business. Sur un client e-commerce mode (catalogue ~12 000 références, ~80 k sessions mois sur mobile), j'ai consacré une semaine à un seul sujet : virer la lib JS qui calculait le prix variable des produits côté client. Elle bloquait le thread 280 ms à chaque sélection de taille. Après réécriture en pré-calcul côté serveur + injection dans le HTML, l'INP est passé de 410 ms à 90 ms en field data — et le taux d'ajout au panier a gagné 8 % sur deux mois. Un seul script supprimé, plus d'impact que six mois d'A/B tests sur le tunnel. La leçon : les CWV ne sont pas une métrique "tech" isolée, ils trackent la friction réelle de votre tunnel. Quand on optimise le bon moment du parcours, le ROI est immédiat.

Tout faire en interne demande du temps et une expertise webperf à jour. Si vous voulez passer en mode "un expert prend le sujet", j'interviens directement dans votre codebase — pas de slides, du PR.

Core Web Vitals et e-commerce : les erreurs fréquentes

Dashboard e-commerce

Suivi en temps réel

Live

0

Commandes

0

CA mensuel

0

Disponibilité

Dernières commandes

#4291 Pack Premium Expédié

#4290 Abonnement Pro En cours

#4289 Starter Kit Confirmé

2 alertes stock

2

Les sites e-commerce ont des contraintes spécifiques qui les rendent particulièrement vulnérables aux mauvais CWV. Voici les patterns qu'on retrouve systématiquement sur Shopify, WooCommerce, Magento et PrestaShop.

LCP — les pièges e-commerce :

• Image hero de la page d'accueil non préchargée, souvent injectée via un slider JavaScript
• Photos produit servies en taille originale (3–5 Mo) sans redimensionnement ni conversion WebP
• Thèmes lourds (Shopify, WooCommerce) qui chargent des dizaines de scripts avant le contenu
• TTFB élevé sur les pages catalogue avec filtres dynamiques (Magento, PrestaShop) sans cache pleine page

INP — les pièges e-commerce :

• Ajout au panier avec rechargement complet de la page ou handler AJAX trop lourd (WooCommerce cart fragments)
• Filtres facettés (couleur, taille, prix) qui déclenchent des requêtes synchrones et bloquent le thread
• Sélecteurs de variantes produit (Shopify) avec JavaScript lourd pour calculer le prix et le stock
• Accumulation d'apps Shopify ou de modules PrestaShop/Magento qui injectent chacun leurs scripts globalement
• Scripts de tracking et retargeting (Meta Pixel, Google Ads, Criteo) non différés

CLS — les pièges e-commerce :

• Bandeau de livraison gratuite ou barre d'annonce injectée dynamiquement en haut de page
• Pop-in de consentement cookies qui pousse le contenu vers le bas
• Images produit sans dimensions dans les grilles de catalogue
• Blocs "Produits recommandés" ou "Clients ont aussi acheté" qui apparaissent après le chargement initial sans espace réservé
• Polices personnalisées de la charte e-commerce qui remplacent la police système tardivement

Priorités par plateforme :

La règle d'or : auditez chaque app ou module tiers avec l'onglet Coverage de Chrome DevTools. Sur un Shopify moyen, 40 à 60 % du JavaScript chargé n'est pas utilisé sur la page courante.

💡 Mon retour terrain — Les pires scores INP que j'ai vus. Le record absolu : un Shopify Plus dans la mode, INP à 2 400 ms sur la PDP. Cause racine : 14 apps Shopify (chat, avis, retargeting, popins, upsell, currency switcher…) qui ajoutaient chacune leurs listeners sur les événements critiques (clic, change, submit), pendant que 4 scripts d'analytics firaient à chaque interaction. Quand l'utilisateur cliquait sur une taille, 6 handlers se déclenchaient en cascade sur un thread déjà saturé. La désinstallation de 9 apps non critiques + le débounce des handlers restants + le code splitting du bundle marketing a fait tomber l'INP à 180 ms. Le constat que je fais après 8 ans : la majorité des problèmes CWV sur Shopify ne sont pas des problèmes "de code" — ce sont des problèmes "de gouvernance" sur ce qui rentre dans le site. Chaque app ajoutée par le marketing coûte en performance, et personne ne mesure ce coût.

Vous reconnaissez votre stack dans ces patterns ? L'audit qui priorise les vrais leviers (souvent pas ceux qu'on croit) prend une semaine et débloque les semaines suivantes.

FAQ

Sources officielles

• Core Web Vitals — Google Search Central
• Web Vitals — web.dev
• Optimiser le LCP — web.dev
• Optimiser l'INP — web.dev
• Optimiser le CLS — web.dev
• Rapport Core Web Vitals — Google Search Console
• Pagespeed Insights
• Définition des seuils CWV — web.dev

Besoin d'une optimisation web performance sur votre site ? Un audit performance web dédié aux Core Web Vitals identifie les leviers prioritaires en quelques jours.