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

Pourquoi les Core Web Vitals sont importants pour votre site

Vous avez probablement entendu parler des Core Web Vitals (CWV) — les métriques de Google pour l'expérience utilisateur. Mais si votre site semble lent ou saccadé, vous n'êtes pas seul. De nombreux développeurs ont du mal à traduire les scores CWV en correctifs concrets. Ce guide vous accompagne dans la mesure et l'amélioration de chaque vital avec des étapes pratiques et des extraits de code.

Les Core Web Vitals sont trois métriques spécifiques : Largest Contentful Paint (LCP) pour les performances de chargement, First Input Delay (FID) pour l'interactivité, et Cumulative Layout Shift (CLS) pour la stabilité visuelle. Google les utilise comme signaux de classement, donc les optimiser profite à la fois aux utilisateurs et au SEO.

Comprendre les trois Core Web Vitals

Avant de plonger dans les correctifs, clarifions ce que chaque métrique mesure et les seuils pour un bon score.

Remarque : FID est remplacé par Interaction to Next Paint (INP) en mars 2024, mais les principes d'optimisation sont similaires. Nous nous concentrons ici sur FID car il est encore largement référencé.

Comment mesurer les Core Web Vitals

Vous avez besoin de données de laboratoire et de terrain pour obtenir une image complète. Les données de laboratoire (tests synthétiques) aident au débogage, tandis que les données de terrain (surveillance des utilisateurs réels) montrent l'expérience utilisateur réelle.

Outils de laboratoire

• Lighthouse dans Chrome DevTools : Lancez un audit dans l'onglet Lighthouse.
• PageSpeed Insights : Fournit des données de laboratoire et de terrain pour une URL.
• WebPageTest : Tests avancés avec des conditions réseau personnalisées.

Outils de terrain

• Chrome User Experience Report (CrUX) : Ensemble de données public de métriques d'utilisateurs réels.
• Google Search Console : Le rapport Core Web Vitals montre les performances du groupe.
• Bibliothèque JavaScript web-vitals : Collectez les métriques des utilisateurs réels dans vos analyses.

Pour collecter des données de terrain, incluez la bibliothèque web-vitals et envoyez les métriques à votre point de terminaison d'analyse :

<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>

Cela vous donne des données du monde réel pour compléter les tests de laboratoire.

Améliorer Largest Contentful Paint (LCP)

LCP mesure le moment où le plus grand élément de contenu (image, bloc de texte ou vidéo) devient visible. Pour l'améliorer, concentrez-vous sur le temps de réponse du serveur, le chargement des ressources et les ressources bloquant le rendu.

1. Optimiser le temps de réponse du serveur

• Utilisez un CDN pour servir le contenu plus près des utilisateurs.
• Activez la mise en cache (en-têtes de cache HTTP, cache côté serveur).
• Améliorez l'hébergement si le TTFB (Time to First Byte) est constamment élevé.

2. Optimiser les images

• Compressez les images et utilisez des formats modernes comme WebP ou AVIF.
• Utilisez des images réactives avec srcset et sizes.
• Chargez en lazy-load les images sous la ligne de flottaison, mais évitez le lazy-loading de l'image LCP.

Pour une compression rapide des images, essayez notre Compresseur d'images.

3. Éliminer les ressources bloquant le rendu

• Intégrez le CSS critique et différez le CSS non critique.
• Utilisez async ou defer pour JavaScript.
• Minifiez le CSS et le JavaScript.

4. Précharger les ressources importantes

Utilisez <link rel="preload"> pour les ressources clés comme les polices ou les images principales :

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

Améliorer First Input Delay (FID)

FID mesure le temps entre la première interaction d'un utilisateur avec votre page et le moment où le navigateur peut répondre. Les longues tâches JavaScript bloquent le thread principal, provoquant des retards.

1. Fractionner les longues tâches

Divisez le JavaScript de longue durée en plus petits morceaux en utilisant setTimeout ou requestIdleCallback. Par exemple :

function processItems(items) {
  if (items.length === 0) return;
  const item = items.pop();
  // Traiter l'élément
  setTimeout(() => processItems(items), 0);
}

2. Optimiser les gestionnaires d'événements

• Appliquez un debounce ou un throttle aux gestionnaires de saisie.
• Évitez les calculs complexes dans les écouteurs d'événements ; déchargez-les vers des Web Workers.

3. Réduire le temps d'exécution JavaScript

• Fractionnez le code avec des imports dynamiques.
• Supprimez le JavaScript inutilisé (tree shaking).
• Utilisez loading="lazy" pour les iframes non critiques.

4. Utiliser des Web Workers pour les tâches lourdes

Déplacez le travail gourmand en CPU hors du thread principal :

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* gérer le résultat */ };

Améliorer Cumulative Layout Shift (CLS)

CLS mesure les décalages de mise en page inattendus. Les causes courantes incluent les images sans dimensions, les publicités, les intégrations et les polices web.

1. Toujours définir la largeur et la hauteur sur les médias

Incluez les attributs width et height sur les images et vidéos, ou utilisez le CSS aspect-ratio :

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

2. Réserver de l'espace pour le contenu dynamique

Pour les publicités ou les intégrations, réservez de l'espace avec un élément placeholder ou définissez une taille fixe.

3. Éviter d'insérer du contenu au-dessus du contenu existant

Si vous devez insérer une bannière, utilisez une animation de transformation ou une superposition qui ne décale pas la mise en page.

4. Utiliser Font-Display: swap

Évitez le texte invisible et les décalages de mise en page dus aux polices web :

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Surveillance et amélioration continue

L'optimisation des Core Web Vitals n'est pas une tâche ponctuelle. Mettez en place une surveillance continue avec des outils comme :

• Google Search Console : Alertes pour les régressions CWV.
• Lighthouse CI : Lancez des audits à chaque pull request.
• Real User Monitoring (RUM) : Des outils comme New Relic, Datadog ou des analyses personnalisées.

Examinez régulièrement les données de terrain et itérez sur les correctifs. Priorisez d'abord la métrique avec le pire score.

FAQ

Que sont les Core Web Vitals ?

Les Core Web Vitals sont un ensemble de métriques que Google utilise pour mesurer l'expérience utilisateur : LCP (chargement), FID (interactivité) et CLS (stabilité visuelle).

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

Surveillez les données de terrain en continu via Search Console ou RUM. Lancez des tests de laboratoire après des changements majeurs et au moins mensuellement.

L'amélioration des Core Web Vitals affecte-t-elle le SEO ?

Oui, les Core Web Vitals sont un signal de classement. De meilleurs scores peuvent améliorer la visibilité dans les recherches et la satisfaction des utilisateurs.

Prêt à optimiser vos images pour un meilleur LCP ? Utilisez notre Compresseur d'images gratuit pour réduire la taille des fichiers sans perte de qualité.