Core Web Vitals : mesurer et améliorer les performances web

Vos utilisateurs sont impatients. Si votre site met plus de quelques secondes à charger, ils partent. Les moteurs de recherche le remarquent aussi : les Core Web Vitals sont des signaux de classement. Mais les améliorer ressemble à un labyrinthe de métriques et d'outils. Ce guide va droit au but. Vous apprendrez ce que chaque métrique signifie, comment la mesurer précisément et les étapes concrètes pour l'améliorer.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois métriques qui quantifient l'expérience utilisateur réelle :

• Largest Contentful Paint (LCP) : temps nécessaire pour que le contenu principal se charge. Objectif : moins de 2,5 secondes.
• Interaction to Next Paint (INP) : rapidité avec laquelle la page répond aux interactions utilisateur. Objectif : moins de 200 millisecondes.
• Cumulative Layout Shift (CLS) : ampleur des décalages de mise en page pendant le chargement. Objectif : moins de 0,1.

Ces métriques sont mesurées à partir de sessions utilisateur réelles (données de terrain) et de tests synthétiques (données de laboratoire). Les données de terrain sont celles qui comptent pour le classement.

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 et des opportunités d'amélioration.
• PageSpeed Insights : combine données de laboratoire et de terrain pour une URL.
• WebPageTest : analyse avancée en cascade (waterfall).

Outils de terrain

• Chrome User Experience Report (CrUX) : données d'utilisateurs réels de Chrome, disponibles via PageSpeed Insights ou BigQuery.
• Bibliothèque JavaScript web-vitals : collectez les métriques de vos propres utilisateurs et envoyez-les à votre outil d'analyse.

Pour collecter des données de terrain, ajoutez la bibliothèque web-vitals à votre site :

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 métriques d'utilisateurs réels.

Améliorer le LCP

Le LCP correspond généralement à l'image, la vidéo ou le bloc de texte le plus grand. Pour l'améliorer, concentrez-vous sur le chemin critique.

1. Optimisez les images : compressez les images, utilisez des formats modernes comme WebP ou AVIF, et définissez des largeur et hauteur explicites. Des outils comme le Compresseur d'images peuvent aider à réduire la taille des fichiers sans perte de qualité visible.
2. Préchargez la ressource LCP : ajoutez <link rel="preload"> pour l'image principale ou la police.
3. Réduisez le temps de réponse du serveur : utilisez un CDN, activez la mise en cache et optimisez les requêtes backend.
4. Éliminez les ressources bloquant le rendu : intégrez le CSS critique, différez le JavaScript non critique.
5. Utilisez des images responsives : servez des images de taille appropriée avec srcset.

Exemple de préchargement d'une image LCP :

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Améliorer l'INP

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

• Découpez les tâches longues : utilisez setTimeout ou requestIdleCallback pour céder la main au thread principal.
• Optimisez les gestionnaires d'événements : appliquez debounce ou throttle sur les gestionnaires coûteux.
• Réduisez le JavaScript : supprimez le code inutilisé, faites du code-splitting et du lazy-loading des modules non critiques.
• Utilisez les web workers pour les calculs lourds.
• Évitez les DOM volumineux : gardez le DOM sous 1 500 nœuds.

Exemple pour céder la main 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

Le CLS se produit lorsque des éléments se déplacent de façon inattendue. Causes courantes : images sans dimensions, publicités, intégrations (embeds) et contenu injecté dynamiquement.

• Définissez toujours largeur et hauteur sur les images et vidéos.
• Réservez de l'espace pour les publicités et les embeds avec CSS aspect-ratio ou des conteneurs à taille fixe.
• Évitez d'insérer du contenu au-dessus du contenu existant sauf si déclenché par une interaction utilisateur.
• Utilisez font-display: optional pour éviter les décalages liés au changement de police, ou préchargez les polices.
• Privilégiez les animations transform plutôt que les propriétés qui déclenchent un recalcul de mise en page.

Exemple pour réserver de l'espace pour une image :

<img src="#" width="800" height="600" alt="...">

Outils et workflow

Intégrez les vérifications de performance dans votre workflow de développement :

• Lancez Lighthouse en CI pour détecter les régressions.
• Utilisez web-vitals pour surveiller les données de terrain et configurer des alertes.
• Analysez les logs serveur pour identifier les endpoints lents. L'Analyseur de logs Nginx peut vous aider à repérer les requêtes lentes et les erreurs.
• Testez sur des appareils réels et des réseaux bridés.

Comparaison des métriques et des objectifs

FAQ

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois métriques — LCP, INP et CLS — qui mesurent le chargement, l'interactivité et la stabilité visuelle. Elles sont utilisées par Google comme signaux de classement.

Comment mesurer les Core Web Vitals ?

Utilisez des outils de laboratoire comme Lighthouse pour le débogage et des outils de terrain comme la bibliothèque web-vitals ou CrUX pour les données d'utilisateurs réels. Les deux sont importants.

Qu'est-ce qu'un bon score LCP ?

Un bon LCP est inférieur à 2,5 secondes. Au-delà de 4 secondes, il est mauvais. Optimisez les images, préchargez les ressources critiques et réduisez le temps de réponse du serveur.

Prêt à accélérer votre site ? Commencez par compresser vos images avec notre Compresseur d'images gratuit pour améliorer instantanément le LCP.