Depuis leur intégration officielle dans l'algorithme de Google en 2021, les Core Web Vitals sont devenus incontournables pour tout site qui souhaite performer en recherche organique. En 2026, ces métriques ont évolué : l'INP a remplacé le FID, les seuils sont mieux compris, et Google les pondère davantage pour les requêtes mobiles. Ce guide vous donne les clés pour mesurer, comprendre et optimiser chaque indicateur — avec des données concrètes.
Les Core Web Vitals sont trois métriques standardisées qui mesurent l'expérience utilisateur réelle d'une page web. Google les collecte via le Chrome User Experience Report (CrUX), qui agrège des données de millions d'utilisateurs Chrome. Contrairement à un test en laboratoire, ces données reflètent ce que vivent vraiment vos visiteurs sur leur connexion, leur appareil, leur navigateur.
Ces métriques entrent dans le calcul du Page Experience signal, l'un des facteurs de classement de Google. Elles ne remplacent pas la pertinence du contenu, mais à contenu équivalent, un site bien optimisé surclassera un site lent.
Le LCP mesure le temps nécessaire pour que l'élément le plus large visible à l'écran soit entièrement rendu. Cet élément est généralement une image hero, une image de fond CSS, ou un bloc de texte volumineux en haut de page.
En pratique, les sites e-commerce avec des images produit non optimisées affichent souvent un LCP entre 4 et 8 secondes sur mobile. C'est catastrophique : une étude Google (2023) montrait qu'un délai d'une seconde supplémentaire réduit le taux de conversion de 20 %.
1. Précharger l'image LCP
Utilisez <link rel="preload"> dans le <head> de votre page :
<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high">
2. Supprimer les ressources bloquantes
Les scripts JavaScript et CSS non critiques chargés dans le <head> retardent le rendu. Utilisez defer ou async pour les scripts, et chargez les CSS critiques en inline.
3. Optimiser votre hébergement
Un TTFB (Time To First Byte) élevé plombe mécaniquement le LCP. Visez un TTFB < 800 ms. Un hébergeur mutualisé low-cost affiche souvent 1,5 à 3 secondes de TTFB — switchez vers un hébergeur performant ou utilisez un CDN.
4. Passer aux formats modernes
WebP réduit le poids des images de 25 à 35 % par rapport au JPEG. AVIF va encore plus loin : 40 à 50 % de gain. Consultez notre article sur l'optimisation des images web pour les détails d'implémentation.
L'INP a remplacé le FID (First Input Delay) en mars 2024. C'est une métrique bien plus complète : là où le FID ne mesurait que la première interaction, l'INP mesure la réactivité globale de la page en prenant en compte toutes les interactions utilisateur (clics, pressions clavier, taps).
L'INP représente le 98e percentile des délais de réponse enregistrés pendant la session. En clair : il capture les interactions les plus lentes, pas la moyenne.
1. Réduire les Long Tasks JavaScript
Une Long Task est un bloc de code JavaScript qui bloque le thread principal plus de 50 ms. L'utilisateur perçoit un freezing ou un retard de réponse. Utilisez le Chrome DevTools Performance panel pour les identifier.
2. Différer les traitements non urgents
// Au lieu de bloquer le thread principal
processHeavyData(data);
// Utilisez scheduler.postTask ou setTimeout
setTimeout(() => processHeavyData(data), 0);
3. Limiter les effets de bord au clic
Chaque gestionnaire de clic qui déclenche des calculs complexes, des mises à jour DOM massives ou des appels réseau synchrones dégrade l'INP. Profitez du guide de vitesse de chargement pour aller plus loin.
4. Mettre à jour vers les frameworks modernes
Les versions récentes de React, Vue et Svelte intègrent des mécanismes de concurrence (React Concurrent Mode, Svelte 5) qui découpent les mises à jour en unités plus petites, réduisant l'INP.
Le CLS mesure la stabilité visuelle d'une page. Chaque fois qu'un élément se déplace inopinément pendant le chargement (une image qui apparaît et repousse le texte, une pub qui s'insère, une police qui change la mise en page), un score de décalage est calculé.
Le score CLS est la somme de tous ces décalages inattendus. Un score de 0 signifie aucun décalage. Un score de 0,5 signifie une expérience très dégradée.
1. Toujours définir des dimensions pour les images
<!-- Mauvais -->
<img src="photo.webp" alt="produit">
<!-- Bon -->
<img src="photo.webp" alt="produit" width="800" height="600">
Sans dimensions, le navigateur ne peut pas réserver l'espace avant le chargement de l'image. Résultat : le contenu saute quand l'image arrive.
2. Réserver l'espace pour les publicités et embeds
Utilisez des conteneurs CSS avec une taille fixe ou un aspect-ratio prédéfini pour les blocs publicitaires, les iframes YouTube et les widgets tiers.
3. Éviter les polices de substitution trop différentes
Le FOUT (Flash of Unstyled Text) et le FOIT (Flash of Invisible Text) génèrent du CLS quand la police web diffère trop de la police système. Utilisez font-display: optional ou auto-hébergez vos polices pour un contrôle optimal.
4. Charger les éléments dynamiques hors du flux
Les bandeaux cookies, popups et notifications qui apparaissent au chargement doivent être positionnés en fixed ou absolute pour ne pas déplacer le contenu existant.
Pour une analyse complète, consultez notre guide Google Search Console avancé — la section "Core Web Vitals" du rapport de performance est particulièrement instructive.
| Type de site | Problème le plus fréquent | Priorité | |---|---|---| | Site vitrine avec images | LCP élevé | Optimiser images + preload | | E-commerce | CLS (images produit sans dimensions) | Dimensions fixes sur toutes les images | | Blog / contenu | INP (commentaires, widgets) | Charger les scripts tiers en lazy | | Landing page | LCP + CLS | Image hero en WebP + réserver espaces |
Pour les sites e-commerce notamment, les Core Web Vitals ont un impact direct sur les conversions. Notre service de création de site e-commerce intègre ces optimisations dès la conception.
Un LCP inférieur à 2,5 secondes est considéré "bon" par Google. Pour 75 % de vos visiteurs (le seuil utilisé par Google pour évaluer votre page), ce délai doit être respecté. En pratique, visez < 2 secondes pour avoir une marge de sécurité. Sur mobile avec une connexion 4G, les sites bien optimisés atteignent 1,2 à 1,8 seconde.
Oui. L'INP fait partie du Page Experience signal depuis mars 2024, en remplacement du FID. Google l'utilise comme facteur de classement, particulièrement pour les requêtes mobiles. Un mauvais INP (> 500 ms) peut pénaliser votre positionnement face à des concurrents avec un meilleur score, à qualité de contenu équivalente.
Trois outils gratuits suffisent : Google Search Console (données réelles de vos utilisateurs), PageSpeed Insights (analyse par URL combinant données réelles et simulées) et Lighthouse intégré à Chrome DevTools (audit complet en laboratoire). Pour le monitoring continu, l'API CrUX est gratuite et accessible via Google Data Studio.
Google mesure les CWV séparément pour mobile et desktop. Depuis le déploiement complet du mobile-first indexing, la version mobile de votre site est prioritaire dans l'index. Un mauvais score mobile aura donc plus d'impact sur votre classement qu'un mauvais score desktop. Les seuils restent identiques, mais ils sont plus difficiles à atteindre sur mobile (réseaux plus lents, CPU moins puissants).
L'optimisation des Core Web Vitals est un travail continu, pas un projet ponctuel. Les mises à jour de navigateurs, l'ajout de nouveaux scripts marketing, les changements de design : chaque modification peut impacter vos scores. Mettez en place un monitoring mensuel via Search Console et traitez les régressions rapidement.
Votre site ne passe pas les seuils Core Web Vitals ? Prendre rendez-vous gratuitement pour un audit de performance offert.
Premier RDV gratuit, devis sous 24h, sans engagement.
Prendre rendez-vous →