Core Web Vitals : Mesurez et améliorez les performances web

Web2026-10-30TryQuickToolBox

Vous avez construit un site web rapide, mais les utilisateurs se plaignent encore de lenteur. Ou peut-être que votre classement SEO a chuté après une mise à jour de Google. Le coupable pourrait être les Core Web Vitals—les métriques de Google pour l'expérience utilisateur. Dans ce guide, vous apprendrez ce qu'elles sont, comment les mesurer et les étapes concrètes pour améliorer chacune d'elles.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois métriques qui quantifient des aspects clés de l'expérience utilisateur :

Largest Contentful Paint (LCP) : Temps nécessaire pour que le plus grand élément de contenu (image, vidéo ou bloc de texte) devienne visible. Bon : ≤2,5s.
Interaction to Next Paint (INP) : Mesure la réactivité—le temps entre une interaction utilisateur (clic, tap, pression de touche) et la prochaine image affichée. Bon : ≤200ms.
Cumulative Layout Shift (CLS) : Quantifie les décalages de mise en page inattendus pendant le chargement. Bon : ≤0,1.

Ces métriques font partie des signaux d'expérience de page de Google et impactent directement le SEO et la satisfaction des utilisateurs.

Comment mesurer les Core Web Vitals

Vous avez besoin de données de laboratoire et de terrain. Les données de laboratoire (tests synthétiques) aident au débogage ; les données de terrain (surveillance des utilisateurs réels) reflètent l'expérience réelle.

Outils de laboratoire

Lighthouse dans Chrome DevTools : Lancez des audits et obtenez des scores avec des opportunités d'amélioration.
WebPageTest : Tests avancés avec des filmstrips et des diagrammes en cascade.
PageSpeed Insights : Combine les données de laboratoire et de terrain de CrUX.

Outils de terrain

Chrome User Experience Report (CrUX) : Ensemble de données public de métriques d'utilisateurs réels.
Bibliothèque JavaScript web-vitals : Collectez les métriques des utilisateurs réels via des analyses.
Search Console : Le rapport Core Web Vitals montre les groupes d'URL nécessitant une attention.

Voici comment utiliser la bibliothèque web-vitals pour envoyer les métriques à vos analyses :

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Utilisez navigator.sendBeacon si disponible
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

Améliorer le LCP

Le LCP est souvent la métrique la plus impactante. Pour l'améliorer :

Optimisez l'élément LCP : Identifiez-le (généralement une image hero ou un titre) et assurez-vous qu'il se charge rapidement.
Préchargez les ressources critiques : Utilisez <link rel="preload"> pour les images, polices et feuilles de style.
Utilisez des formats d'image modernes : Servez du WebP ou AVIF avec des fallbacks.
Implémentez le lazy loading avec soin : Ne lazy-loadez pas l'image LCP ; priorisez-la.
Réduisez le temps de réponse du serveur : Utilisez des CDN, du caching et optimisez le backend.
Éliminez les ressources bloquant le rendu : Différez le CSS et JavaScript non critiques.

Exemple : préchargez votre image hero :

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Améliorer l'INP

L'INP mesure la réactivité. Un INP élevé provient souvent de tâches longues bloquant le thread principal.

Fractionnez les tâches longues : Utilisez setTimeout, requestIdleCallback ou scheduler.yield() pour céder au thread principal.
Optimisez les gestionnaires d'événements : Déboncez ou throttlez les opérations coûteuses.
Réduisez l'exécution JavaScript : Code-splitting, tree-shaking et différez les scripts non critiques.
Évitez les mises à jour massives du DOM : Regroupez les modifications du DOM et utilisez judicieusement le DOM virtuel.
Utilisez des web workers pour les tâches gourmandes en CPU.

Exemple : céder avec scheduler.yield() (là où c'est supporté) :

async function handleClick() {
  // Faire du travail
  await scheduler.yield();
  // Continuer après avoir cédé
}

Améliorer le CLS

Le CLS concerne la stabilité visuelle. Prévenez les décalages inattendus :

Incluez toujours les attributs width et height sur les images et vidéos.
Réservez de l'espace pour les publicités et intégrations avec CSS aspect-ratio ou des dimensions fixes.
Évitez d'insérer du contenu au-dessus du contenu existant sauf si déclenché par une interaction utilisateur.
Utilisez les transformations CSS pour les animations au lieu de propriétés déclenchant un recalcul de mise en page.
Préchargez les polices et utilisez font-display: swap pour éviter les décalages de texte invisible.

Exemple : réservez de l'espace avec aspect-ratio :

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Comparaison des Core Web Vitals

Métrique	Ce qu'elle mesure	Seuil de bon	Correctifs courants
LCP	Performance de chargement	≤2,5s	Optimisez les images, préchargez, réduisez le temps serveur
INP	Réactivité	≤200ms	Fractionnez les tâches longues, optimisez le JS, utilisez des workers
CLS	Stabilité visuelle	≤0,1	Définissez les dimensions, réservez de l'espace, évitez les insertions dynamiques

Outils et flux de travail

Intégrez la surveillance des Core Web Vitals dans votre flux de développement :

Exécutez Lighthouse en CI pour détecter les régressions.
Utilisez RUM (Real User Monitoring) pour suivre les données de terrain.
Définissez des budgets de performance et des alertes.
Auditez régulièrement les scripts tiers—ils impactent souvent l'INP et le LCP.

Pour une optimisation rapide des images avant de les télécharger sur votre site, essayez notre Compresseur d'images pour réduire la taille des fichiers sans perte de qualité.

FAQ

Quels sont les seuils actuels des Core Web Vitals ?

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

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

En continu via les données de terrain, et à chaque changement de code significatif via des outils de laboratoire. Configurez des alertes pour les régressions.

Puis-je améliorer les Core Web Vitals sans reconstruire mon site ?

Oui—de nombreux correctifs comme l'optimisation des images, la précharge et le report des scripts peuvent être appliqués de manière incrémentale.