Core Web Vitals : Mesurer et Améliorer les Performances Web

Vos utilisateurs sont impatients. Si votre page met trop de temps à charger ou saute dans tous les sens pendant qu'ils essaient de lire, ils partent. Les Core Web Vitals (CWV) sont les métriques de Google qui quantifient ces frustrations : Largest Contentful Paint (LCP) pour la vitesse de chargement, Interaction to Next Paint (INP) pour la réactivité, et Cumulative Layout Shift (CLS) pour la stabilité visuelle. Dans ce guide, vous allez apprendre à mesurer ces métriques et à appliquer des correctifs pratiques qui fonctionnent.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont un ensemble de métriques réelles qui reflètent l'expérience utilisateur. Ils font partie des signaux d'expérience de page de Google et sont utilisés dans le classement. Chaque métrique a un seuil « bon » :

• LCP : Doit être ≤ 2,5 secondes.
• INP : Doit être ≤ 200 millisecondes.
• CLS : Doit être ≤ 0,1.

Ces seuils sont mesuré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 données de laboratoire vous aident à déboguer ; les données de terrain montrent l'expérience utilisateur réelle.

Données de terrain (utilisateurs réels)

• Chrome User Experience Report (CrUX) : Fournit des données agrégées d'utilisateurs réels pour votre origine. Accessible via PageSpeed Insights ou le tableau de bord CrUX.
• Bibliothèque JavaScript web-vitals : Ajoutez ce script léger à votre site pour envoyer les métriques à vos outils 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);

Données de laboratoire (synthétiques)

• Lighthouse : Intégré à Chrome DevTools, il audite les performances et donne un score.
• WebPageTest : Pour une analyse plus approfondie avec limitation de réseau.

Utilisez les données de laboratoire pour itérer rapidement, mais validez toujours avec les données de terrain.

Améliorer le Largest Contentful Paint (LCP)

LCP mesure le moment où le plus grand élément de contenu (généralement une image hero ou un titre) devient visible. Pour l'améliorer :

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 : Utilisez <link rel="preload"> pour l'image LCP et les polices clés.
3. Éliminez les ressources bloquant le rendu : Différez le CSS et le JavaScript non critiques. Intégrez le CSS critique.
4. Utilisez un CDN : Servez les ressources depuis des emplacements proches des utilisateurs.
5. Activez la compression de texte : Utilisez Brotli ou gzip pour les ressources textuelles.

Pour la compression d'images, vous pouvez utiliser un outil comme Image Compressor pour réduire rapidement la taille des fichiers sans perte de qualité.

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

INP mesure la réactivité de votre page aux interactions utilisateur. Un INP élevé signifie que le navigateur est occupé et ne peut pas répondre rapidement. Pour l'améliorer :

1. Divisez les tâches longues : Fractionnez le travail JavaScript en petits morceaux en utilisant setTimeout ou requestIdleCallback.
2. Optimisez les gestionnaires d'événements : Appliquez un debounce ou un throttle aux gestionnaires coûteux. Évitez le layout thrashing.
3. Réduisez le JavaScript : Supprimez le code inutilisé, faites du code-splitting et différez les scripts non critiques.
4. Utilisez des web workers : Déchargez les calculs lourds sur un thread worker.

Assurez-vous également de ne pas bloquer le thread principal avec des scripts tiers. Auditez-les régulièrement.

Améliorer le Cumulative Layout Shift (CLS)

CLS mesure les décalages de mise en page inattendus. Pour le maintenir bas :

1. Définissez les attributs de taille : Incluez toujours width et height sur les images et vidéos.
2. Réservez de l'espace pour le contenu dynamique : Utilisez aspect-ratio en CSS ou des placeholders pour les publicités et les intégrations.
3. Évitez d'insérer du contenu au-dessus du contenu existant : Sauf en réponse à une interaction utilisateur.
4. Utilisez des animations transform : Préférez transform et opacity pour les animations au lieu de propriétés qui déclenchent un recalcul de mise en page.

Outils et flux de travail

Voici un flux de travail simple pour surveiller et améliorer continuellement les CWV :

N'oubliez pas que les améliorations doivent être validées avec les données utilisateur réelles au fil du temps.

FAQ

Quels sont les seuils actuels des Core Web Vitals ?

LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1, mesurés au 75e percentile des chargements de page.

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

Surveillez les données de terrain en continu et effectuez des audits de laboratoire après des changements majeurs. Une revue mensuelle est une bonne pratique.

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

Oui. De nombreuses améliorations comme l'optimisation d'images, le report de scripts et la définition d'attributs de taille peuvent être réalisées avec des modifications de code minimales.

Prêt à optimiser vos images pour un meilleur LCP ? Essayez notre Image Compressor gratuit pour réduire instantanément la taille des fichiers.