Que mesurent les Core Web Vitals ?
Réponse courte : LCP mesure le rendu du plus grand élément de contenu visible, INP la réactivité après une interaction et CLS la stabilité de la mise en page. Google recommande de les évaluer au 75e percentile, séparément sur mobile et ordinateur.
Un site peut être beau et bien écrit tout en restant pénible à utiliser s'il affiche tardivement son contenu, réagit lentement ou déplace ses éléments.
Google utilise les Core Web Vitals dans ses systèmes liés à l'expérience de page. Google précise aussi qu'un bon résultat ne garantit pas une première position et que la pertinence du contenu reste essentielle. Ces métriques constituent donc un volet d'un audit SEO, pas une formule de classement.
75e
Google recommande d'évaluer LCP, INP et CLS au 75e percentile des chargements, séparément sur mobile et ordinateur.
Les trois métriques doivent être lues ensemble et reliées à la page concernée. Un test de laboratoire aide à diagnostiquer ; les données terrain décrivent ce que des visiteurs réels ont observé lorsqu’un volume suffisant est disponible.
Les 3 Core Web Vitals expliqués simplement
LCP = Largest Contentful Paint (Peinture du plus grand contenu)
En français simple : à quelle vitesse le contenu principal de ta page charge-t-il ?
Quand tu ouvres un site, tu vois d'abord du blanc. Puis peu à peu, les images, le texte, les trucs apparaissent. Le LCP, c'est le moment où le "truc le plus gros" (généralement l'image de héros ou le titre principal) s'affiche.
Seuil « bon » recommandé : 2,5 secondes ou moins, au 75e percentile.
Exemple concret : ton article de blog affiche son contenu principal en 1,2 seconde dans un test, ou en 4 secondes. Les données terrain permettront de voir ce que vivent réellement les visiteurs.
Identifie d’abord l’élément réellement mesuré comme LCP. S’il s’agit d’une image, vérifie son format, ses dimensions, sa priorité de chargement et le temps de réponse avant de modifier le reste de la page.
INP = Interaction to Next Paint (Interactivité)
En français simple : à quelle vitesse ton site répond quand tu cliques, tapes, ou fais une action ?
Après avoir cliqué sur un bouton, il y a un délai avant que quelque chose se passe. INP mesure ce délai.
Seuil « bon » recommandé : 200 millisecondes ou moins, au 75e percentile.
Exemple concret : tu cliques sur « Ajouter au panier » et la prochaine mise à jour visuelle arrive en 150 ms dans un test, ou en 800 ms.
CLS = Cumulative Layout Shift (Décalage de mise en page)
En français simple : est-ce que ta page "bouge" pendant qu'elle charge ?
Imagine : tu lis du texte, puis d'un coup une pub s'insère au-dessus, le texte descend, et tu perds ta place. Frustrant, non ? C'est le CLS.
Seuil « bon » recommandé : 0,1 ou moins, au 75e percentile.
Exemple concret : le contenu de ta page reste stable avec un CLS de 0,02 dans la mesure, ou se décale avec un CLS de 0,5.
Une image sans dimensions peut pousser le contenu lorsqu'elle charge. Déclarer sa largeur et sa hauteur aide le navigateur à réserver l'espace.
Pourquoi ça compte tant ?
Recherche Google
Les Core Web Vitals font partie des signaux d'expérience de page. Ils ne permettent pas de prédire le classement entre deux pages et ne remplacent pas la pertinence du contenu.
Conversion
La performance peut influencer le comportement des visiteurs, mais aucun taux universel ne s'applique à tous les sites. Mesure l'effet avec tes propres événements, une période comparable et un volume suffisant.
Mobile
Google utilise principalement la version mobile du contenu pour l’indexation. Sur cette version, contrôle donc à la fois la présence du contenu utile, son accessibilité et les conditions réelles de chargement.
Comment mesurer tes Core Web Vitals
PageSpeed Insights (gratuit, officiel Google)
Va sur pagespeed.web.dev et colle ton URL. Selon les données disponibles, tu verras :
- les données terrain CrUX si l'URL ou l'origine dispose d'un volume suffisant
- un test de laboratoire Lighthouse réalisé au moment de l'analyse
- Si tu es dans le vert (bon), l'orange (moyen), ou le rouge (mauvais)
- des suggestions d'optimisation à valider dans ton contexte
Google Search Console (gratuit, pour ton site entier)
Search Console regroupe les URL selon leurs données terrain lorsque le site dispose de suffisamment d'informations.
Web Vitals Chrome Extension (gratuit, en temps réel)
Installe l'extension dans Chrome et vois les Core Web Vitals en direct quand tu navigues.
Lighthouse (gratuit, intégré dans Chrome)
Ouvre DevTools (F12), clique sur "Lighthouse", lance un audit. Ça te donne un score global + détails.
Solutions pour optimiser le LCP
Problème 1 : Trop grosse image de héros
Solution : adapte le poids, le format et les dimensions de l’image à son affichage réel, puis mesure à nouveau dans des conditions comparables.
- Utilise TinyPNG ou ImageOptim
- Utilise des formats modernes (WebP au lieu de JPG)
- Redimensionne tes images à la taille d'affichage (pas besoin d'une image 5000x3000 si tu l'affiches en 800x600)
Problème 2 : Trop de JavaScript qui ralentit
Solution : charge ton JS de façon "lazy" (c'est à dire, plus tard, pas au démarrage).
- Ajoute l'attribut
deferaux scripts non-critiques - Utilise
asyncpour les trucs qui peuvent attendre
Problème 3 : Le serveur répond lentement (TTFB - Time to First Byte)
Solution :
- mesure le temps de réponse avant de décider si l'hébergement doit changer
- Utilise un CDN (Cloudflare, Fastly) lorsque la localisation de l’audience et l’architecture le justifient
- Cache tes pages (avec un plugin de cache si tu es sur WordPress)
Solutions pour optimiser INP (Interactivité)
Problème 1 : Du JavaScript bloquant long
Solution : identifie les tâches longues, supprime le travail inutile et découpe le traitement pour rendre la main au navigateur entre les étapes.
Problème 2 : Trop de traitement au clic
Solution : simplifie tes interactions. Si cliquer sur un bouton déclenche 10 opérations, c'est trop. Fais juste ce qui est nécessaire immédiatement.
Problème 3 : Librairies JavaScript trop lourdes
Solution : utilise des librairies plus légères, ou réduis le nombre de librairies.
Solutions pour optimiser CLS (Décalage)
Problème 1 : Des images sans dimensions définies
Solution : toujours déclarer la hauteur et la largeur de tes images en HTML. Ça réserve l'espace avant le chargement.
<img src="photo.jpg" width="800" height="600" alt="...">
Problème 2 : Du contenu qui se charge après (ads, embeds)
Solution : réserve de l'espace pour ce contenu dynamique aussi.
Problème 3 : Des polices qui changent
Solution : utilise font-display: swap pour afficher du texte avec une police de secours pendant que ta police custom charge. Ça évite que le texte ne disparaisse ou ne saute.
Priorités : par où commencer ?
- Étape 1 : établis une baseline terrain et laboratoire, avec les conditions de mesure.
- Étape 2 : identifie la métrique et l'élément réellement responsables du problème.
- Étape 3 : applique un changement à la fois, puis contrôle le visuel et les fonctions.
- Étape 4 : répète les tests et observe les données terrain sur une période suffisante.
Les outils pour l'optimisation
Cloudflare et autres CDN
Un CDN et des règles de cache peuvent réduire certains temps de transfert. L'effet dépend de l'origine, du contenu, des règles et de la localisation des visiteurs. Mesure avant et après.
WordPress : WP Rocket ou LiteSpeed Cache
Sur WordPress, ces extensions peuvent aider à configurer le cache et certaines optimisations. Teste chaque option, car la compatibilité dépend du thème et des autres extensions.
Vercel ou Netlify (pour du statique/Next.js)
Ces plateformes proposent des primitives utiles pour le déploiement et le cache. Le code, les médias et les scripts tiers restent déterminants.
Audit ou optimisation : quelle suite choisir ?
Pour replacer la performance dans un projet complet, consulte notre approche de création de site web. Si un problème est déjà mesuré, explore l’optimisation de la performance et des Core Web Vitals. Si la cause reste inconnue, commence par un audit de performance. Le plan part d'une baseline et ne promet pas un score universel.
Conclusion : tu peux le faire
Les Core Web Vitals ne sont pas une magie compliquée. LCP = charge vite. INP = répond vite. CLS = ne bouge pas. Trois choses simples.
Et les solutions sont aussi simples : compresse tes images, charge ton JS de façon intelligente, réserve de l'espace pour le contenu dynamique.
Le délai dépend de la cause. Une image ou une règle de cache peut se corriger rapidement, tandis qu'une architecture ou des scripts tiers demandent davantage de travail. Si le site accumule trop de dette technique, il peut être pertinent d'envisager une refonte.
Commence dès aujourd'hui. Mesure sur PageSpeed Insights, optimise une chose à la fois, re-mesure. C'est ça qui compte.
