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

Vous avez construit une application web moderne, mais les utilisateurs se plaignent de lenteur. Les classements dans les moteurs de recherche baissent et le taux de rebond augmente. Le coupable pourrait être de mauvais Core Web Vitals—les métriques de Google pour l'expérience utilisateur réelle. Dans ce guide, vous allez découvrir ce qu'elles sont, comment les mesurer avec précision et des étapes pratiques pour améliorer chacune d'elles.

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 de contenu (image ou bloc de texte) devienne visible. Bon : ≤ 2,5 s.
• Interaction to Next Paint (INP) : Mesure la réactivité—le temps entre une interaction utilisateur (clic, tap, pression de touche) et la prochaine mise à jour visuelle. Bon : ≤ 200 ms.
• Cumulative Layout Shift (CLS) : Quantifie les décalages de mise en page inattendus. Bon : ≤ 0,1.

Ces métriques font partie des signaux d'expérience de page de Google et impactent directement le SEO et la satisfaction 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 aident au débogage ; les données de terrain reflètent les utilisateurs réels.

Outils de laboratoire

• Lighthouse dans Chrome DevTools : Lancez un audit pour obtenir le LCP, le CLS et le TBT (un proxy pour l'INP).
• WebPageTest : Tests avancés avec filmstrips et waterfall charts.
• PageSpeed Insights : Combine données de laboratoire et de terrain.

Outils de terrain

• Chrome UX Report (CrUX) : Jeu de données public de métriques d'utilisateurs réels.
• Bibliothèque web-vitals : Envoyez les métriques à votre outil d'analyse.

Exemple : Utilisation de la bibliothèque web-vitals pour journaliser les métriques :

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);

Améliorer le LCP

Le LCP est souvent la métrique la plus impactante à corriger. Causes courantes : réponse serveur lente, ressources bloquant le rendu et images non optimisées.

1. Optimisez les images : Compressez, utilisez des formats modernes (WebP/AVIF) et définissez les dimensions. Pour une compression rapide, essayez notre Compresseur d'images.
2. Préchargez les ressources critiques : Utilisez <link rel="preload"> pour les images héros et les polices.
3. Réduisez le temps de réponse du serveur : Utilisez la mise en cache, un CDN et optimisez les requêtes backend.
4. Éliminez les ressources bloquant le rendu : Intégrez le CSS critique, différez le JS non critique.

Exemple : Précharger l'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 et retardent le retour visuel.

1. Fractionnez les tâches longues : Utilisez setTimeout ou scheduler.yield pour céder la main au thread principal.
2. Optimisez les gestionnaires d'événements : Utilisez le debounce et le throttle quand c'est approprié ; évitez le travail synchrone lourd.
3. Réduisez le JavaScript : Faites du code-splitting, du tree-shaking et différez les scripts non critiques.
4. Utilisez des web workers pour les tâches gourmandes en CPU.

Exemple : Céder la main avec scheduler.yield (si pris en charge) :

async function handleClick() {
  // Faire du travail
  await scheduler.yield();
  // Continuer après avoir cédé la main
}

Améliorer le CLS

Le CLS concerne la stabilité visuelle. Les décalages de mise en page se produisent lorsque des éléments changent de position de manière inattendue.

1. Définissez les attributs de taille sur les images et vidéos (width/height).
2. Réservez de l'espace pour les publicités et les intégrations : Utilisez aspect-ratio en CSS ou des dimensions fixes.
3. Évitez d'insérer du contenu au-dessus du contenu existant sauf si déclenché par une interaction utilisateur.
4. Utilisez des animations par transform au lieu de propriétés qui déclenchent un recalcul de mise en page.

Exemple : Réserver de l'espace avec aspect-ratio :

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Comparaison des Core Web Vitals

Outils et flux de travail

Intégrez la surveillance des performances dans votre pipeline CI/CD. Utilisez Lighthouse CI pour détecter les régressions. Pour les données de terrain, mettez en place un tableau de bord avec web-vitals et votre outil d'analyse.

Lors de l'optimisation des images, vous pouvez les compresser rapidement avec notre Compresseur d'images avant de les télécharger sur votre site.

FAQ

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois métriques—LCP, INP et CLS—que Google utilise pour mesurer l'expérience utilisateur sur les pages web.

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

En continu sur le terrain via des outils d'analyse, et à chaque déploiement en laboratoire avec Lighthouse CI pour détecter les régressions.

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

Oui. De nombreuses améliorations comme l'optimisation des images, le préchargement et la définition des dimensions peuvent être réalisées de manière incrémentale sans refonte complète.

Commencez par mesurer vos scores actuels avec Lighthouse, puis attaquez la métrique ayant le plus grand impact. Des optimisations petites et régulières mènent à des gains significatifs en expérience utilisateur et en SEO.