Core Web Vitals : vitesse de page et SEO

Les Core Web Vitals sont les trois indicateurs de performance fondamentaux que Google utilise pour mesurer l'expérience réelle d'une page : la vitesse de chargement (LCP), la réactivité à l'interaction (INP) et la stabilité visuelle (CLS). Ces métriques façonnent à la fois le ressenti de l'utilisateur et — facteur réel mais modeste — votre classement dans les résultats de recherche. Dans ce guide, j'explique ce que signifie chaque métrique, quels seuils viser et comment les améliorer concrètement.

Que sont les Core Web Vitals et pourquoi sont-ils importants ?

Pour évaluer l'expérience de page, Google s'appuie sur des données de terrain collectées auprès des utilisateurs de Chrome (CrUX — Chrome User Experience Report). Vos scores ne sont donc pas mesurés en laboratoire, mais sur les appareils et connexions de vos visiteurs réels. Les trois métriques sont :

• LCP (Largest Contentful Paint) — le temps nécessaire pour afficher le plus grand élément de contenu visible (souvent une image ou un titre). Il représente la vitesse de chargement.
• INP (Interaction to Next Paint) — le délai avant que la page réagisse visuellement à un clic, un toucher ou une touche. Il a remplacé l'ancienne métrique FID en mars 2024 et constitue désormais la mesure officielle de la réactivité.
• CLS (Cumulative Layout Shift) — l'ampleur des déplacements inattendus des éléments pendant le chargement ; il mesure la stabilité visuelle.

Côté SEO, ces métriques sont un facteur de classement, mais elles pèsent moins que la qualité du contenu. Malgré tout, entre deux pages de qualité égale, la plus rapide l'emporte, et une mauvaise expérience nuit déjà aux conversions et au taux de rebond, ce qui influence indirectement le classement.

Seuils à viser

Google définit des seuils « bon », « à améliorer » et « médiocre » pour chaque métrique. La mesure se base sur la valeur observée par 75 % des visiteurs (le 75e centile) :

• LCP : bon ≤ 2,5 s — médiocre > 4 s
• INP : bon ≤ 200 ms — médiocre > 500 ms
• CLS : bon ≤ 0,1 — médiocre > 0,25

Votre objectif est de rester dans la zone « bon » sur les trois. Mobile et bureau sont évalués séparément ; le mobile est généralement plus exigeant, faites-en donc votre priorité.

Comment améliorer le LCP ?

Le LCP provient généralement soit d'une réponse serveur lente, soit d'une image volumineuse chargée trop tard. Les étapes d'amélioration :

• Chargez l'image principale tôt. Si l'élément LCP est une image hero, ne la mettez pas en lazy-load et priorisez-la avec fetchpriority="high".
• Utilisez des formats d'image modernes (WebP/AVIF) et servez-les à la bonne taille ; des images surdimensionnées gonflent le LCP.
• Préconnectez les ressources critiques.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<img src="hero.avif" fetchpriority="high" width="1200" height="630" alt="...">

Pour réduire le temps de réponse du serveur (TTFB), la mise en cache (par exemple php artisan optimize sous Laravel, le cache de page, un CDN) apporte généralement le plus grand gain.

Comment améliorer l'INP ?

L'INP est directement lié à la charge du thread principal (main thread). Si JavaScript exécute encore un travail lourd au moment du clic, le navigateur retarde la réponse. Les solutions :

• Réduisez la quantité de JavaScript et éliminez le code inutilisé ; les scripts tiers (widgets de chat, analytics, publicités) sont à l'origine de la plupart des problèmes d'INP.
• Découpez les tâches longues. Fractionnez les calculs lourds ou différez-les avec requestIdleCallback / setTimeout.
• Priorisez le retour visuel. Après un clic, mettez d'abord l'interface à jour et laissez le travail lourd pour ensuite.

button.addEventListener('click', () => {
  showSpinner();              // retour visuel instantané
  requestAnimationFrame(() => {
    doExpensiveWork();        // travail lourd à la prochaine frame
  });
});

Comment améliorer le CLS ?

Le CLS se produit lorsqu'un élément change de position pendant le chargement et pousse le reste du contenu — par exemple une publicité chargée tardivement qui décale le texte vers le bas. Les mesures les plus efficaces :

• Définissez toujours width et height sur les images et vidéos (ou le CSS aspect-ratio) afin que le navigateur réserve l'espace à l'avance.
• Utilisez des placeholders pour le contenu dynamique ; réservez un espace fixe pour les publicités et les contenus intégrés.
• Chargez les polices web avec font-display: swap et faites-en le preload si possible pour réduire le décalage du texte.

Outils de mesure

Vous travaillez avec deux types de données : laboratoire (tests contrôlés) et terrain (utilisateurs réels). Les deux sont nécessaires :

• PageSpeed Insights — affiche à la fois les données de terrain CrUX et le score de laboratoire Lighthouse ; le point de départ le plus pratique.
• Search Console > rapport Core Web Vitals — classe les groupes d'URL de tout votre site en « bon / à améliorer / médiocre ».
• Chrome DevTools (Lighthouse + panneau Performance) — pour analyser une page en profondeur.
• La bibliothèque web-vitals — pour collecter les métriques de vrais visiteurs et les envoyer à votre outil d'analytics.

Note importante : des métriques comme l'INP et le CLS s'accumulent au fil des interactions et du défilement ; un test de laboratoire ne reflète donc pas toujours l'expérience réelle. Fondez vos décisions sur les données de terrain.

Questions fréquentes

Le FID est-il encore utilisé ?

Non. Le FID (First Input Delay) a été officiellement abandonné en mars 2024 et remplacé par l'INP. Comme l'INP mesure la réactivité de toutes les interactions de la page et non seulement la première, c'est une métrique plus complète.

Les Core Web Vitals augmentent-ils directement mon classement ?

N'attendez pas un bond à eux seuls. Ces métriques sont un signal de classement, mais la pertinence et la qualité du contenu pèsent bien plus lourd. La meilleure approche consiste à associer un bon contenu à une page rapide.

Pourquoi mes scores PageSpeed fluctuent-ils ?

Le test de laboratoire Lighthouse peut varier à chaque exécution selon les conditions réseau et matériel. Pour décider, fiez-vous aux données de terrain CrUX sur 28 jours plutôt qu'à un seul test.

Votre page est lente ou votre rapport Core Web Vitals est au rouge ? Je peux auditer votre site et établir un plan d'amélioration concret pour amener LCP, INP et CLS dans les seuils cibles. Contactez-moi.