Mesurer les indicateurs Web essentiels dans les applications React
Utilisez Lighthouse, WebPageTest et la bibliothèque web-vitals pour recueillir les scores LCP, INP et CLS.
Mesurer les indicateurs Web essentiels dans les applications React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Que sont les indicateurs essentiels du Web ?
Les indicateurs essentiels du Web sont les métriques d’expérience utilisateur de Google qui influencent le classement SEO : LCP (affichage du plus grand élément de contenu — chargement), INP (interaction jusqu’au prochain affichage — réactivité) et CLS (décalage cumulatif de la mise en page — stabilité visuelle).
Seuils recommandés
Valeurs cibles : LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1. Les valeurs dépassant le seuil de médiocrité (LCP > 4 s, INP > 500 ms, CLS > 0,25) nuisent considérablement à l’expérience utilisateur et au référencement.
Bibliothèque web-vitals
Le package npm web-vitals mesure les CWV dans les navigateurs réels grâce à une API simple.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Envoyer les métriques aux outils d’analyse
Envoyez les métriques à votre point de terminaison d’analyse pour effectuer une surveillance des utilisateurs réels (RUM) : Lighthouse mesure les performances en laboratoire, tandis que le RUM montre ce que vivent réellement les utilisateurs.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Métriques intégrées de Next.js
Next.js instrumente automatiquement les indicateurs essentiels du Web. Exportez une fonction reportWebVitals depuis _app.js (Pages) ou utilisez la prise en charge intégrée de l’App Router.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse dans Chrome DevTools
Exécutez un audit Lighthouse dans Chrome DevTools (onglet Lighthouse) pour obtenir des mesures des CWV en laboratoire. Utilisez le mode navigation privée pour éviter les interférences des extensions et activez la limitation du réseau pour simuler un appareil mobile.
WebPageTest
WebPageTest.org fournit des graphiques détaillés en cascade, des captures vidéo et des mesures des CWV réalisées sur de vrais appareils situés dans différentes zones géographiques — avec des résultats plus réalistes que ceux de Lighthouse en local.
Rapport sur l’expérience utilisateur de Chrome (CrUX)
L’ensemble de données CrUX de Google agrège les données CWV d’utilisateurs réels pour des millions de sites Web. Vous pouvez y accéder via Google Search Console, PageSpeed Insights ou l’API CrUX.
PerformanceObserver pour le LCP
Utilisez l’API native PerformanceObserver pour observer les entrées LCP et déterminer quel élément constitue le plus grand contenu affiché.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });Débogage du CLS
Utilisez les régions de décalage de mise en page de Chrome DevTools (dans le panneau de rendu) pour mettre en évidence, avec des superpositions rouges, les éléments qui provoquent des décalages de mise en page.
Données d’attribution
La bibliothèque web-vitals fournit des données d’attribution qui identifient ce qui a causé la mauvaise métrique — l’élément LCP, l’interaction INP ou l’élément à l’origine du CLS.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Vérification rapide
Quel indicateur essentiel du Web mesure la réactivité, c’est-à-dire la rapidité avec laquelle la page répond aux interactions de l’utilisateur ?
Récapitulatif
Mesurez les CWV avec la bibliothèque web-vitals ou Lighthouse. Envoyez les métriques à vos outils d’analyse pour surveiller les utilisateurs réels. Visez un LCP ≤ 2,5 s, un INP ≤ 200 ms et un CLS ≤ 0,1. Utilisez les données d’attribution pour identifier les éléments ou les interactions précis à l’origine des mauvais scores.
Questions Fréquemment Posées
La leçon « Mesurer les indicateurs Web essentiels dans les applications React » est-elle gratuite ?
Oui — le texte complet de « Mesurer les indicateurs Web essentiels dans les applications React » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Mesurer les indicateurs Web essentiels dans les applications React » ?
Utilisez Lighthouse, WebPageTest et la bibliothèque web-vitals pour recueillir les scores LCP, INP et CLS. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Mesurer les indicateurs Web essentiels dans les applications React » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Mesurer les indicateurs Web essentiels dans les applications React
- Analyse du bundle et stratégie de séparation du code
- Optimisation des images et des polices dans React
- Réduire l’INP : optimisation des gestionnaires d’événements