Mesurer les indicateurs essentiels du Web
Suivez et améliorez les indicateurs de performance
Mesurer les indicateurs essentiels du Web est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Pourquoi les indicateurs sont importants
Les Core Web Vitals sont les indicateurs de performance de Google centrés sur l’utilisateur. Ils quantifient le chargement, l’interactivité et la stabilité visuelle, et influencent à la fois l’expérience utilisateur et le classement dans les résultats de recherche.
Les trois indicateurs
Le trio se compose de LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) et INP (Interaction to Next Paint). Chacun cible un aspect différent de la performance perçue.
LCP
LCP mesure le moment où le plus grand élément visible (image principale, titre) termine son rendu. Une bonne valeur est inférieure à 2,5 secondes. SSR aide en livrant ce contenu dans le HTML initial.
CLS
CLS mesure les décalages inattendus de la mise en page pendant le chargement de la page. Une bonne valeur est inférieure à 0,1. Réservez de l’espace pour les images et les publicités, et évitez d’insérer du contenu au-dessus d’un contenu existant.
<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->INP
INP mesure la réactivité aux interactions de l’utilisateur pendant toute la durée de vie de la page, en remplacement de l’ancien FID. Une bonne valeur est inférieure à 200 ms. Un code JS lourd sur le thread principal dégrade l’INP.
Comment SSR améliore les indicateurs
SSR améliore le LCP en affichant le contenu plus tôt et peut réduire le CLS en fournissant rapidement une mise en page stable. L’hydratation incrémentale améliore l’INP en chargeant moins de JavaScript au départ.
Données de laboratoire et données réelles
Les données de laboratoire proviennent d’outils de simulation comme Lighthouse, dans un environnement contrôlé. Les données réelles (CrUX, RUM) proviennent d’utilisateurs véritables. Optimisez en utilisant les deux ; ce sont les données réelles qui servent au classement.
Mesurer avec Lighthouse
Exécutez Lighthouse dans Chrome DevTools ou en intégration continue pour obtenir le LCP et le CLS de laboratoire, ainsi qu’un indicateur indirect du temps total de blocage pour l’INP et des diagnostics exploitables.
// npx lighthouse https://example.com --viewLa bibliothèque web-vitals
Collectez les indicateurs réels dans le navigateur avec la bibliothèque web-vitals, puis envoyez-les à votre point de terminaison d’analyse.
import { onLCP, onCLS, onINP } from 'web-vitals';
onLCP(console.log);
onCLS(console.log);
onINP(console.log);Réduire JavaScript
Des lots plus petits améliorent l’INP et le délai d’interactivité. Utilisez le chargement différé au niveau des routes, @defer, l’hydratation incrémentale et la suppression de code inutilisé pour réduire le JS livré.
Itérer et vérifier
Améliorer les performances consiste à mesurer, modifier, puis mesurer à nouveau. Après avoir activé SSR, l’hydratation ou defer, relancez Lighthouse et suivez l’évolution des données réelles pendant plusieurs semaines afin de confirmer les gains effectifs.
Vérification rapide
Vérifiez vos connaissances sur les Core Web Vitals.
Récapitulatif
Vous avez découvert les Core Web Vitals (LCP, CLS, INP), la manière dont SSR et l’hydratation incrémentale les améliorent, la différence entre données de laboratoire et données réelles, ainsi que la mesure avec Lighthouse et la bibliothèque web-vitals, avant d’itérer en effectuant de nouvelles mesures.
Questions Fréquemment Posées
La leçon « Mesurer les indicateurs essentiels du Web » est-elle gratuite ?
Oui — le texte complet de « Mesurer les indicateurs essentiels du Web » 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 Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Mesurer les indicateurs essentiels du Web » ?
Suivez et améliorez les indicateurs de performance Tu pratiques Angular 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 Angular Academy ?
Aucune expérience préalable n'est requise. Angular 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 4 sur 4.
Combien de temps prend la leçon « Mesurer les indicateurs essentiels du Web » ?
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 Angular Academy ?
Oui. Chaque leçon Angular 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
- Qu’est-ce que l’hydratation
- Activer l’hydratation complète
- Hydratation incrémentielle avec @defer
- Mesurer les indicateurs essentiels du Web