Core Web Vitals : mesurer et améliorer

Vos utilisateurs attendent des pages rapides et réactives. Les Core Web Vitals (CWV) de Google quantifient cette expérience : Largest Contentful Paint (LCP) mesure le chargement, Interaction to Next Paint (INP) mesure l'interactivité, et Cumulative Layout Shift (CLS) mesure la stabilité visuelle. De mauvais scores nuisent à la satisfaction des utilisateurs et peuvent affecter le classement dans les moteurs de recherche. Ce guide vous montre comment mesurer précisément les CWV et corriger les problèmes courants avec des étapes concrètes.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois métriques qui reflètent l'expérience utilisateur dans le monde réel :

• LCP : Temps jusqu'au rendu du plus grand élément de contenu (image, bloc de texte). Bon : ≤2,5 s.
• INP : Temps entre une interaction utilisateur et la prochaine peinture. Bon : ≤200 ms.
• CLS : Somme des scores de décalage de mise en page. Bon : ≤0,1.

Ces seuils sont évalués au 75e percentile des chargements de page, ce qui signifie que 75 % des visites doivent atteindre la cible.

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

Outils de laboratoire

• Lighthouse dans Chrome DevTools : Lancez des audits pour la performance, l'accessibilité et le SEO. Il fournit des scores CWV de laboratoire et des opportunités d'amélioration.
• WebPageTest : Tests avancés avec des conditions réseau personnalisées et l'émulation d'appareils.

Outils de terrain

• Chrome UX Report (CrUX) : Ensemble de données public de métriques d'utilisateurs réels. Accessible via PageSpeed Insights ou BigQuery.
• Bibliothèque JavaScript web-vitals : Collectez les CWV auprès d'utilisateurs réels et envoyez-les à votre outil d'analyse.

Utilisez les données de terrain pour identifier les problèmes réels, puis les outils de laboratoire pour déboguer et vérifier les corrections.

Améliorer Largest Contentful Paint (LCP)

Le LCP est souvent l'image principale ou le titre principal. Optimisez ces éléments :

1. Optimisez les images : Compressez les images, utilisez des formats modernes comme WebP ou AVIF, et servez des tailles responsives avec srcset.
2. Préchargez les ressources critiques : Ajoutez <link rel="preload"> pour l'image ou la police LCP.
3. Réduisez le temps de réponse du serveur : Utilisez la mise en cache, les CDN et un code backend efficace.
4. Éliminez les ressources bloquant le rendu : Différez le CSS/JS non critique, intégrez le CSS critique.

Exemple : préchargez votre image LCP :

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

Définissez également fetchpriority="high" sur la balise <img> pour indiquer son importance.

Améliorer Interaction to Next Paint (INP)

L'INP mesure la réactivité aux clics, aux taps et aux saisies clavier. Les tâches longues bloquent le thread principal. Pour améliorer l'INP :

• Fractionnez les tâches longues : Utilisez setTimeout ou requestIdleCallback pour céder la main au navigateur.
• Optimisez les gestionnaires d'événements : Appliquez un debounce ou un throttle aux opérations coûteuses.
• 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.

Exemple : cédez la main au thread principal :

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // Faire du travail
  await yieldToMain();
  // Continuer
}

Améliorer 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.

• Définissez largeur et hauteur sur les images et vidéos, ou utilisez aspect-ratio en CSS.
• Réservez de l'espace pour le contenu dynamique (publicités, intégrations) avec min-height.
• Utilisez font-display: swap et préchargez les polices pour éviter le texte invisible causant des décalages.
• Évitez d'insérer du contenu au-dessus du contenu existant sauf si déclenché par une interaction utilisateur.

Exemple : réservez de l'espace pour une publicité :

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

Comparaison des métriques et des outils

Flux de travail pratique pour améliorer les CWV

1. Mesurez les données de terrain avec PageSpeed Insights ou CrUX pour identifier les pages avec de mauvais scores.
2. Lancez Lighthouse sur ces pages pour obtenir des opportunités spécifiques.
3. Priorisez les corrections par impact : souvent LCP et CLS sont les plus faciles à améliorer.
4. Implémentez les changements et testez en laboratoire.
5. Déployez et surveillez les données de terrain pour confirmer l'amélioration.
6. Itérez sur les problèmes restants.

N'oubliez pas que les CWV sont centrés sur l'utilisateur ; validez toujours avec des données d'utilisateurs réels.

FAQ

Que sont les Core Web Vitals et pourquoi sont-ils importants ?

Les Core Web Vitals sont trois métriques (LCP, INP, CLS) qui quantifient le chargement, l'interactivité et la stabilité visuelle. Ils sont importants car ils reflètent l'expérience utilisateur réelle et sont utilisés par Google comme signal de classement.

À 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 des changements majeurs. Une revue mensuelle des données CrUX est une bonne pratique.

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 corrections de mise en page peuvent être appliquées progressivement sans reconstruction complète.

Besoin de compresser des images pour un LCP plus rapide ? Essayez notre Compresseur d'images gratuit pour réduire la taille des fichiers sans perte de qualité.