Core Web Vitals : Mesurez et améliorez les performances web

Vous avez construit un site web rapide, mais les utilisateurs se plaignent encore de lenteur. Ou peut-être que votre classement SEO a chuté après une mise à jour de Google. Le coupable pourrait être les Core Web Vitals — les métriques de Google pour l'expérience utilisateur. Dans ce guide, vous apprendrez ce qu'elles sont, comment les mesurer avec des données réelles et les étapes pratiques pour les améliorer.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois métriques qui quantifient des aspects clés de l'expérience utilisateur :

• Largest Contentful Paint (LCP) : Temps nécessaire pour que le plus grand élément visible (par exemple, une image principale ou un titre) s'affiche. Bon : ≤2,5 s.
• First Input Delay (FID) : Temps entre la première interaction de l'utilisateur (par exemple, un clic sur un lien) et la réponse du navigateur. Bon : ≤100 ms.
• Cumulative Layout Shift (CLS) : Mesure la stabilité visuelle — combien les éléments se déplacent de manière inattendue. Bon : ≤0,1.

Ces métriques font partie des signaux d'expérience de page de Google et ont un impact direct sur le SEO. Mais plus important encore, elles reflètent la frustration réelle des utilisateurs.

Comment mesurer les Core Web Vitals

Vous avez besoin à la fois de données de laboratoire et de terrain. Les données de laboratoire (par exemple, Lighthouse) aident au débogage, tandis que les données de terrain (surveillance des utilisateurs réels) montrent les performances réelles.

1. Utilisez le Chrome UX Report (CrUX)

CrUX fournit des données agrégées d'utilisateurs réels pour des millions de sites. Vous pouvez les consulter dans PageSpeed Insights ou le tableau de bord CrUX. Il montre la distribution du LCP, du FID et du CLS pour votre origine.

2. Mettez en place une surveillance des utilisateurs réels (RUM)

Des outils comme Google Analytics 4, Vercel Analytics ou des bibliothèques open source (web-vitals) vous permettent de collecter les Core Web Vitals auprès des visiteurs réels. Voici comment envoyer les métriques à votre point de terminaison d'analyse :

import {onLCP, onFID, onCLS} from 'web-vitals';

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

Cet extrait utilise la bibliothèque web-vitals pour capturer les métriques et les envoyer via sendBeacon sans affecter le chargement de la page.

3. Utilisez Lighthouse pour les tests en laboratoire

Lighthouse (dans Chrome DevTools ou PageSpeed Insights) simule un chargement de page et rapporte les Core Web Vitals ainsi que les opportunités d'amélioration. Exécutez-le sur les pages clés et suivez les changements au fil du temps.

Améliorer le LCP

Le LCP est souvent la métrique la plus impactante. Pour l'améliorer :

• Optimisez les images : Compressez les images, utilisez des formats modernes (WebP, AVIF) et servez des tailles adaptatives avec srcset.
• Préchargez les ressources critiques : Utilisez <link rel="preload"> pour l'image ou la police du LCP.
• Réduisez le temps de réponse du serveur : Utilisez un CDN, la mise en cache et optimisez les requêtes backend.
• Éliminez les ressources bloquant le rendu : Différez le CSS/JS non critique, intégrez le CSS critique.

Par exemple, préchargez votre image principale :

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Améliorer le FID

Le FID mesure la réactivité aux entrées. Pour l'améliorer :

• Divisez les tâches longues : Utilisez setTimeout ou requestIdleCallback pour céder la main au thread principal.
• Minimisez le travail sur le thread principal : Réduisez le temps d'exécution JavaScript, évitez les bundles volumineux.
• Utilisez des web workers pour les calculs lourds.
• Optimisez les gestionnaires d'événements : Appliquez un debounce ou un throttle aux événements rapides.

Envisagez également de passer à Interaction to Next Paint (INP), qui remplacera le FID en 2024. INP mesure toutes les interactions, donc les mêmes optimisations s'appliquent.

Améliorer le CLS

Le CLS concerne la stabilité visuelle. Causes courantes et correctifs :

• Images sans dimensions : Définissez toujours les attributs width et height ou utilisez aspect-ratio en CSS.
• Publicités, intégrations et iframes : Réservez de l'espace avec un placeholder ou définissez des dimensions fixes.
• Injection de contenu dynamique : Évitez d'insérer du contenu au-dessus du contenu existant, sauf en réponse à une interaction utilisateur.
• Polices web : Utilisez font-display: swap et préchargez les polices pour éviter le texte invisible et les décalages de mise en page.

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

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

Comparaison des Core Web Vitals

Outils pour une surveillance continue

Améliorer les Core Web Vitals n'est pas une tâche ponctuelle. Mettez en place des tableaux de bord pour suivre les données de terrain. Utilisez :

• Google Search Console : Le rapport Core Web Vitals montre les groupes d'URL nécessitant une attention.
• PageSpeed Insights : Combine données de laboratoire et de terrain.
• Extension Web Vitals : Métriques en temps réel pendant la navigation.
• Outils RUM : Comme SpeedCurve, Calibre ou des alternatives open source.

Auditez régulièrement votre site, surtout après des changements majeurs.

FAQ

Que sont les Core Web Vitals et pourquoi sont-elles importantes ?

Les Core Web Vitals sont trois métriques (LCP, FID, CLS) que Google utilise pour mesurer l'expérience utilisateur. Elles sont importantes car elles influencent le classement SEO et reflètent la satisfaction réelle des utilisateurs.

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

En continu via la surveillance des utilisateurs réels, et après tout changement significatif de code ou de contenu. Les tests en laboratoire doivent être exécutés pendant le développement et avant les versions.

Puis-je améliorer les Core Web Vitals sans développeur ?

Certaines corrections comme la compression d'images ou la définition des dimensions d'image peuvent être faites par les éditeurs de contenu. Mais les optimisations plus poussées nécessitent souvent l'intervention d'un développeur.

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