← SEOSEO

SEO technique et Core Web Vitals : optimiser la performance

LCP, INP, CLS : comprendre les Core Web Vitals, mesurer les scores avec PageSpeed Insights et Chrome DevTools, identifier les causes et appliquer les corrections concrètes.

Par Kenoby9 min de lecture

En bref — Les Core Web Vitals sont trois métriques d'expérience utilisateur intégrées dans l'algorithme de classement de Google depuis 2021. Optimiser LCP, INP et CLS améliore à la fois le positionnement SEO et le taux de conversion des pages.

Qu'est-ce que les Core Web Vitals ?

Les Core Web Vitals (CWV) sont un sous-ensemble des Web Vitals, une initiative de Google pour quantifier l'expérience utilisateur réelle sur les pages web. Ils mesurent trois dimensions :

  1. LCP (Largest Contentful Paint) — chargement
  2. INP (Interaction to Next Paint) — interactivité
  3. CLS (Cumulative Layout Shift) — stabilité visuelle

Google les intègre dans son Page Experience Signal : un signal de classement qui pénalise les pages offrant une mauvaise expérience, même si leur contenu est pertinent.

LCP — Largest Contentful Paint

Définition

Le LCP mesure le temps nécessaire pour que le plus grand élément visible de la page soit rendu à l'écran. Cet élément est généralement :

  • Une image hero ou bannière
  • Un bloc de texte volumineux (H1 + intro)
  • Une image de fond CSS

Seuils

| Score | Valeur | |---|---| | ✅ Bon | ≤ 2,5 s | | ⚠️ À améliorer | 2,5 s – 4 s | | ❌ Mauvais | > 4 s |

Causes fréquentes d'un LCP élevé

  • Image hero non optimisée : format JPEG lourd, pas de WebP/AVIF, pas de preload.
  • Serveur lent : TTFB (Time to First Byte) élevé, hébergement sous-dimensionné.
  • Rendu côté client (CSR) : les frameworks JavaScript qui construisent le DOM côté navigateur retardent le LCP.
  • Ressources bloquantes : des scripts chargés en <head> sans defer ralentissent le parsing HTML.
  • Polices web non optimisées : chargement tardif d'une police large.

Corrections

<!-- Preload de l'image LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- Attribut fetchpriority sur l'image hero -->
<img src="/hero.webp" alt="..." fetchpriority="high" width="1200" height="600">
  • Convertir les images en WebP ou AVIF.
  • Activer un CDN pour réduire le TTFB.
  • Utiliser le rendu côté serveur (SSR) ou la génération statique (SSG) plutôt que le pur CSR.
  • Charger les scripts non critiques avec defer ou async.

INP — Interaction to Next Paint

Définition

L'INP mesure la réactivité globale d'une page aux interactions de l'utilisateur (clics, saisies clavier, tapotements sur mobile). Il a remplacé le FID (First Input Delay) en mars 2024, car il mesure toutes les interactions sur la durée de la session plutôt que la première uniquement.

Seuils

| Score | Valeur | |---|---| | ✅ Bon | ≤ 200 ms | | ⚠️ À améliorer | 200 ms – 500 ms | | ❌ Mauvais | > 500 ms |

Causes fréquentes d'un INP élevé

  • Long Tasks JavaScript : des scripts qui bloquent le thread principal plus de 50 ms retardent la réponse aux interactions.
  • Hydration lourde : les frameworks SPA (React, Vue) qui hydratent un DOM complexe au chargement.
  • Event handlers inefficaces : calculs lourds déclenchés à chaque clic ou frappe clavier.
  • Trop de nœuds DOM : un DOM de 1 500 + nœuds ralentit les mises à jour visuelles.

Corrections

  • Code splitting : charger les modules JS à la demande plutôt qu'en un seul bundle.
  • Web Workers : déléguer les calculs lourds hors du thread principal.
  • Debounce / Throttle : limiter la fréquence d'exécution des handlers sur les événements fréquents (scroll, input).
  • Réduire la taille du DOM : paginer les longues listes, utiliser la virtualisation.

CLS — Cumulative Layout Shift

Définition

Le CLS mesure les décalages de mise en page inattendus — quand des éléments se déplacent après le rendu initial, forçant l'utilisateur à re-lire ou à cliquer à côté de sa cible.

Seuils

| Score | Valeur | |---|---| | ✅ Bon | ≤ 0,1 | | ⚠️ À améliorer | 0,1 – 0,25 | | ❌ Mauvais | > 0,25 |

Causes fréquentes d'un CLS élevé

  • Images sans dimensions déclarées : le navigateur ne réserve pas l'espace avant que l'image soit chargée.
  • Publicités ou embeds : les iframes et blocs publicitaires qui s'insèrent dans le contenu sans espace réservé.
  • Polices web avec flash : FOUT (Flash of Unstyled Text) provoquant un redimensionnement du texte.
  • Animations CSS : utiliser transform et opacity plutôt que top, left, width pour les animations.

Corrections

<!-- Toujours déclarer width et height sur les images -->
<img src="photo.webp" alt="..." width="800" height="450">

/* Réserver l'espace pour une pub avant chargement */
.ad-slot {
  min-height: 250px;
}

/* Polices : éviter le FOUT */
@font-face {
  font-display: optional; /* ou swap avec attention */
}

Comment mesurer les Core Web Vitals

PageSpeed Insights

L'outil gratuit de Google (pagespeed.web.dev) combine :

  • Lab data : mesures synthétiques de Lighthouse.
  • Field data : données réelles issues du Chrome User Experience Report (CrUX), disponibles si la page a suffisamment de trafic Chrome.

Analysez toujours le mobile en priorité : Google utilise le mobile-first indexing.

Google Search Console

Le rapport Expérience de page dans la Search Console affiche l'état CWV pour l'ensemble de votre domaine, distinguant les URLs en « Bonne expérience » / « À améliorer » / « Mauvaise expérience ». Idéal pour identifier des groupes de pages problématiques à l'échelle du site.

Chrome DevTools — onglet Performance

L'onglet Performance de Chrome DevTools permet d'enregistrer une session de navigation et d'identifier :

  • Les Long Tasks (blocs rouges > 50 ms).
  • Les moments où le LCP et le CLS se produisent.
  • Les scripts responsables du blocage du thread principal.

Lighthouse CI

Pour les équipes de développement, Lighthouse CI intégré dans la pipeline CI/CD détecte les régressions de performance avant la mise en production.

Impact sur le ranking SEO

Les Core Web Vitals sont un facteur de classement confirmé par Google, mais leur poids est modéré : ils ne compensent pas un contenu de mauvaise qualité ni un manque de backlinks. En revanche, ils constituent un facteur de départage entre des pages de qualité équivalente.

Leur impact est plus direct sur :

  • Le taux de rebond : une page lente perd des visiteurs avant même qu'ils lisent le contenu.
  • Le taux de conversion : chaque seconde de délai de chargement coûte des points de conversion.
  • L'expérience mobile : sur mobile, les pénalités de performance sont encore plus visibles.

FAQ : Core Web Vitals

Les Core Web Vitals sont-ils les mêmes pour desktop et mobile ?

Non. Google mesure et évalue séparément les scores desktop et mobile dans la Search Console. Le mobile est prioritaire depuis le passage au mobile-first indexing. Les seuils sont identiques, mais les scores sont généralement plus difficiles à atteindre sur mobile.

Un bon score PageSpeed garantit-il un bon classement ?

Pas directement. PageSpeed Insights mesure les performances techniques, mais le classement dépend aussi de la pertinence du contenu, de l'autorité du domaine et de l'intention de recherche. Un score parfait avec un contenu médiocre ne suffira pas.

Mon site utilise WordPress — comment améliorer les CWV ?

Commencez par choisir un hébergement rapide (Kinsta, WP Engine), installez un plugin de cache (WP Rocket, LiteSpeed Cache), utilisez un CDN (Cloudflare), optimisez les images avec ShortPixel ou Imagify, et désactivez les plugins inutiles.

À quelle fréquence faut-il surveiller les Core Web Vitals ?

La Search Console est à surveiller mensuellement. En période de développement actif (nouvelles fonctionnalités, changement de thème), une vérification hebdomadaire via PageSpeed Insights sur les pages critiques est recommandée.

Kenoby audite vos Core Web Vitals et identifie les optimisations prioritaires pour améliorer à la fois votre performance SEO et l'expérience de vos visiteurs.