Core Web Vitals : Mesurez et Améliorez la Performance Web

Web2026-10-15TryQuickToolBox

Vous avez construit un site web rapide, mais les utilisateurs se plaignent encore de lenteur, et vos classements dans les moteurs de recherche ne sont pas à la hauteur. Le problème ? Vous ne mesurez pas les bonnes choses. Les Core Web Vitals (CWV) sont les métriques de Google pour l'expérience utilisateur réelle : Largest Contentful Paint (LCP), Interaction to Next Paint (INP) et Cumulative Layout Shift (CLS). Si vous les ignorez, vous passez à côté de performances — et de SEO — précieux.

Ce guide vous montre comment mesurer précisément les CWV et corriger les problèmes les plus courants. Pas de blabla, juste des étapes concrètes.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois métriques spécifiques qui quantifient la façon dont les utilisateurs perçoivent le chargement, l'interactivité et la stabilité visuelle :

LCP mesure la performance de chargement. Il indique quand le plus grand élément de contenu (image, vidéo, bloc de texte) devient visible. Visez ≤ 2,5 secondes.
INP mesure la réactivité. Il enregistre la latence de toutes les interactions (clics, taps, pressions de touches) et rapporte une valeur de centile élevé. Visez ≤ 200 millisecondes.
CLS mesure la stabilité visuelle. Il calcule les décalages de mise en page inattendus. Visez ≤ 0,1.

Ces seuils sont basés sur des données d'utilisateurs réels du Chrome User Experience Report (CrUX). Les respecter améliore la satisfaction des utilisateurs et peut booster les classements dans les moteurs de recherche.

Comment mesurer les Core Web Vitals

Vous avez besoin à la fois de données de laboratoire et de terrain. Les outils de laboratoire simulent des conditions ; les données de terrain reflètent les utilisateurs réels.

Outils de laboratoire

Lighthouse (dans Chrome DevTools ou CI) donne un instantané avec des diagnostics.
PageSpeed Insights combine données de laboratoire et de terrain pour une URL.
Web Vitals Extension enregistre les CWV dans la console Chrome pendant que vous naviguez.

Outils de terrain

Chrome UX Report (CrUX) montre des données agrégées d'utilisateurs réels pour des millions de sites.
La bibliothèque JavaScript web-vitals vous permet de collecter les CWV de vos propres utilisateurs et de les envoyer à vos outils d'analyse.
Search Console rapporte le statut des CWV pour votre site en fonction de CrUX.

Commencez par les données de terrain pour identifier les pages problématiques, puis utilisez les outils de laboratoire pour déboguer.

Améliorer le LCP

Le LCP est souvent le plus facile à améliorer avec quelques correctifs ciblés.

Optimisez les images. Utilisez des formats modernes (WebP, AVIF), compressez sans perte de qualité visible et définissez des largeur/hauteur explicites. Des outils comme Image Compressor peuvent aider à réduire la taille des fichiers.
Préchargez l'image LCP. Ajoutez <link rel="preload" as="image" href="#"> dans le head.
Éliminez les ressources bloquant le rendu. Intégrez le CSS critique, différez le CSS/JS non critique et évitez les scripts synchrones dans le head.
Utilisez un CDN. Servez les ressources depuis un emplacement proche de l'utilisateur pour réduire la latence.
Activez la compression de texte. Brotli ou gzip pour HTML, CSS, JS.

Exemple de préchargement d'une image LCP :

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

Améliorer l'INP

L'INP mesure la rapidité avec laquelle votre page répond aux entrées utilisateur. Les tâches longues bloquent le thread principal et retardent les interactions.

Fractionnez les tâches longues. Utilisez setTimeout ou requestIdleCallback pour céder la main au thread principal.
Optimisez les gestionnaires d'événements. Appliquez un debounce ou throttle aux événements à haute fréquence comme scroll et resize.
Réduisez le JavaScript. Faites du code splitting, du tree-shaking et du lazy-loading des scripts non critiques.
Utilisez des web workers pour les calculs lourds.
Évitez les DOM de grande taille. Gardez le DOM sous 1500 nœuds si possible.

Exemple de cession au thread principal :

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Améliorer le CLS

Les décalages de mise en page se produisent lorsque des éléments changent de position de manière inattendue. Causes courantes : images sans dimensions, publicités, intégrations et contenu injecté dynamiquement.

Définissez toujours largeur et hauteur sur les images et vidéos. Cela permet au navigateur de réserver l'espace.
Réservez de l'espace pour les publicités et intégrations. Utilisez CSS aspect-ratio ou des conteneurs fixes.
Évitez d'insérer du contenu au-dessus du contenu existant sauf si déclenché par une interaction utilisateur.
Utilisez font-display: swap et préchargez les polices pour éviter les décalages de texte invisible.
Faites attention aux animations. Utilisez transform et opacity au lieu de propriétés qui déclenchent une mise en page.

Surveillance et amélioration continue

La performance n'est pas un correctif ponctuel. Mettez en place une surveillance pour détecter les régressions.

Utilisez la bibliothèque web-vitals pour envoyer les CWV à vos outils d'analyse :

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Configurez des alertes lorsque les métriques dépassent les seuils.
Exécutez Lighthouse en CI pour chaque pull request.
Examinez les données CrUX mensuellement pour suivre les tendances.

Comparaison des Core Web Vitals

Métrique	Ce qu'elle mesure	Seuil bon	Correctifs courants
LCP	Performance de chargement	≤ 2,5s	Optimiser les images, précharger, CDN
INP	Réactivité	≤ 200ms	Fractionner les tâches longues, réduire le JS
CLS	Stabilité visuelle	≤ 0,1	Définir les dimensions, réserver l'espace

FAQ

Quels sont les seuils actuels des Core Web Vitals ?

LCP : bon ≤ 2,5s, à améliorer ≤ 4,0s, mauvais > 4,0s. INP : bon ≤ 200ms, à améliorer ≤ 500ms, mauvais > 500ms. CLS : bon ≤ 0,1, à améliorer ≤ 0,25, mauvais > 0,25.

À quelle fréquence dois-je vérifier les Core Web Vitals ?

Surveillez les données de terrain en continu via vos outils d'analyse. Examinez CrUX et Search Console mensuellement. Exécutez des tests de laboratoire (Lighthouse) à chaque changement de code significatif.

Puis-je améliorer les Core Web Vitals sans développeur ?

Certains correctifs comme la compression d'images ou l'activation du cache peuvent être réalisés via des plugins ou des paramètres d'hébergement. Mais les optimisations plus poussées (code splitting, réduction du JS) nécessitent généralement l'intervention d'un développeur.

Prêt à optimiser vos images pour un meilleur LCP ? Essayez notre Image Compressor gratuit pour réduire la taille des fichiers sans perdre en qualité.