Core Web Vitals : comment les mesurer et les améliorer

Pourquoi les Core Web Vitals sont importants pour votre site

Vous avez probablement vu des rapports indiquant que votre site est lent, mais vous ne savez pas par où commencer. Les Core Web Vitals 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). Ils influencent le classement dans les résultats de recherche et, plus important encore, la façon dont les utilisateurs perçoivent votre site. Un LCP lent frustre les visiteurs, un INP élevé rend la page peu réactive et un CLS médiocre provoque des clics accidentels. Ce guide vous montre comment mesurer ces métriques et les améliorer avec des étapes concrètes.

Comprendre les trois Core Web Vitals

Avant d'optimiser, sachez ce que chaque métrique mesure et ses seuils.

Ces seuils sont basés sur des données de terrain (utilisateurs réels), et non sur des tests en laboratoire. Visez la plage « Bon » pour au moins 75 % des chargements de page.

Comment mesurer les Core Web Vitals

Vous avez besoin à la fois de données de laboratoire et de terrain. Les données de laboratoire vous aident à déboguer ; les données de terrain reflètent l'expérience utilisateur réelle.

Outils de laboratoire

• Lighthouse dans Chrome DevTools : lancez un audit pour obtenir des scores de performance et des opportunités spécifiques.
• WebPageTest : tests avancés avec filmstrips et waterfall charts.
• Chrome UX Report (CrUX) : données de terrain provenant d'utilisateurs réels, accessibles via PageSpeed Insights ou l'API CrUX.

Outils de terrain

• PageSpeed Insights : affiche à la fois les données de laboratoire et de terrain pour une URL.
• Google Search Console : le rapport Core Web Vitals regroupe les URL par statut.
• Bibliothèque JavaScript web-vitals : collectez les métriques des utilisateurs réels dans vos propres analyses.

Pour instrumenter votre site, incluez la bibliothèque web-vitals et envoyez les métriques à votre point de terminaison 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);

Cela vous fournit un flux continu de données de terrain pour suivre les améliorations.

Améliorer le Largest Contentful Paint (LCP)

Le LCP est souvent le plus grand défi. Le plus grand élément est généralement une image hero ou un grand bloc de texte. Optimisez son chemin de chargement.

1. Identifiez l'élément LCP à l'aide de Lighthouse ou du panneau Performance de DevTools.
2. Priorisez son chargement : utilisez fetchpriority="high" sur l'image ou préchargez-la avec <link rel="preload">.
3. Optimisez les images : compressez, utilisez des formats modernes (WebP/AVIF) et servez des tailles responsives avec srcset.
4. Réduisez le temps de réponse du serveur : utilisez la mise en cache, un CDN et optimisez les requêtes backend.
5. Éliminez les ressources bloquant le rendu : intégrez le CSS critique, différez le JS non critique.

Exemple : préchargez l'image hero et définissez la priorité de récupération :

<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" alt="Hero" width="1200" height="600" fetchpriority="high">

Définissez toujours la largeur et la hauteur pour éviter les décalages de mise en page.

Améliorer l'Interaction to Next Paint (INP)

L'INP mesure la réactivité. Les tâches longues bloquent le thread principal, retardant le retour visuel. Pour améliorer l'INP :

• Fractionnez les tâches longues : utilisez setTimeout ou scheduler.yield pour céder la main au navigateur.
• Optimisez les gestionnaires d'événements : limitez les entrées (debounce), évitez le travail synchrone lourd.
• Réduisez le JavaScript : faites du code-splitting, du tree-shaking et différez les scripts non critiques.
• Utilisez des web workers pour les tâches gourmandes en CPU.
• Évitez les mises à jour massives du DOM : regroupez les modifications du DOM et utilisez requestAnimationFrame.

Exemple : cédez la main au thread principal pendant une boucle longue :

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    // do work
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Cela maintient la page réactive pendant un traitement intensif.

Améliorer le Cumulative Layout Shift (CLS)

Le CLS se produit lorsque des éléments se déplacent de manière inattendue. Causes courantes : images sans dimensions, publicités, intégrations et polices web.

• Incluez toujours la largeur et la hauteur sur les images et les vidéos.
• Réservez de l'espace pour le contenu dynamique (publicités, intégrations) avec CSS min-height ou des boîtes aspect-ratio.
• Utilisez font-display: swap et préchargez les polices pour éviter le texte invisible et les décalages de mise en page.
• Évitez d'insérer du contenu au-dessus du contenu existant sauf en réponse à une interaction utilisateur.

Exemple : utilisez aspect-ratio pour réserver de l'espace :

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

Cela évite les décalages lors du chargement de la vidéo.

Surveiller et itérer

La performance n'est pas une correction ponctuelle. Mettez en place une surveillance continue avec des métriques utilisateur réelles. Utilisez des tableaux de bord pour suivre LCP, INP et CLS au fil du temps. Après chaque modification, vérifiez avec des outils de laboratoire et consultez les données de terrain après quelques jours. Priorisez les correctifs qui affectent le plus d'utilisateurs.

FAQ

Quels sont les seuils actuels des Core Web Vitals ?

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

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

Surveillez les données de terrain en continu et lancez des tests en laboratoire après chaque modification importante. Consultez Search Console chaque semaine pour suivre les tendances.

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

Oui. De nombreuses améliorations comme l'optimisation des images, le préchargement et les ajustements CSS peuvent être appliquées progressivement sans reconstruction complète.

Besoin de compresser rapidement des images pour améliorer le LCP ? Essayez notre Compresseur d'images gratuit pour réduire la taille des fichiers sans perte de qualité.