Signaux essentiels du Web : LCP, FID et CLS
Comprenez ce que mesurent Largest Contentful Paint, First Input Delay et Cumulative Layout Shift, et pourquoi Google les utilise comme signaux de classement.
Signaux essentiels du Web : LCP, FID et CLS est une leçon Frontend 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi les performances sont importantes
Les pages lentes font fuir les utilisateurs. Google a fait des performances un critère de classement : les sites ayant de mauvais scores aux indicateurs Web Vitals essentiels apparaissent plus bas dans les résultats de recherche. Au-delà du référencement naturel, chaque délai de 100 ms réduit de manière mesurable les conversions et l'engagement.
Les trois indicateurs Web Vitals essentiels
Google mesure trois indicateurs de l'expérience utilisateur : LCP (vitesse de chargement), FID (interactivité) et CLS (stabilité visuelle). Chacun possède des seuils « Bon », « À améliorer » et « Mauvais ».
Plus grand affichage de contenu (LCP)
LCP mesure le moment où le plus grand élément de contenu visible (image, aperçu vidéo ou bloc de texte) finit d'être affiché. Bon : moins de 2,5 s. Mauvais : plus de 4 s. Optimisez ce paramètre en préchargeant les images principales, en réduisant les ressources qui bloquent l'affichage et en utilisant un CDN rapide.
Délai avant la première interaction (FID) et INP
FID mesure le délai entre la première interaction d'un utilisateur (clic, appui) et la réponse du navigateur. Bon : moins de 100 ms. En 2024, FID a été remplacé par Interaction jusqu'au prochain affichage (INP), qui mesure toutes les interactions et pas seulement la première.
Décalage cumulatif de la mise en page (CLS)
CLS mesure les décalages inattendus de la mise en page pendant le chargement de la page. Bon : inférieur à 0,1. Médiocre : supérieur à 0,25. Ils sont causés par des images sans dimensions, des polices chargées tardivement et des publicités injectées après le premier rendu.
Mesurer les CWV dans le navigateur
Utilisez le package npm web-vitals pour recueillir les métriques des utilisateurs réels et les envoyer à votre point de terminaison d'analyse.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}Corriger le LCP : précharger l'image principale
Indiquez au navigateur de télécharger rapidement l'image principale, avant d'analyser le reste du HTML.
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">Corriger le CLS : réserver l'espace
Définissez toujours width et height sur les images et les contenus intégrés afin que le navigateur réserve l'espace nécessaire avant l'arrivée de la ressource. Utilisez le CSS aspect-ratio pour les conteneurs adaptatifs.
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">Corriger l'INP : fractionner les tâches longues
Les tâches JavaScript longues bloquent le fil d'exécution principal et retardent la réponse aux clics. Fractionnez le travail en plusieurs blocs avec scheduler.yield() ou setTimeout afin que le navigateur puisse effectuer le rendu et réagir aux entrées.
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}Données de laboratoire ou données de terrain
Les données de laboratoire (Lighthouse) correspondent à une évaluation synthétique réalisée dans un environnement contrôlé. Les données de terrain (CrUX, RUM) sont recueillies auprès d'utilisateurs réels sur des appareils réels. Les données de terrain sont la source de référence pour le classement dans les moteurs de recherche.
Budgets de performance
Définissez des limites précises : par exemple, un LCP inférieur à 2 s et un paquet JavaScript inférieur à 200 Ko. Faites-les respecter dans l'intégration continue avec Lighthouse CI ou @bundle-analyzer afin d'échouer les compilations qui dégradent les performances.
Vérification rapide
Quel indicateur essentiel des performances web mesure les sauts visuels inattendus pendant le chargement d'une page ?
Récapitulatif : Core Web Vitals
LCP : vitesse de chargement du plus grand élément, avec un objectif inférieur à 2,5 s. INP (anciennement FID) : réactivité, avec un objectif inférieur à 200 ms. CLS : stabilité visuelle, avec un objectif inférieur à 0,1. Mesurez-les avec le package web-vitals en production et utilisez Lighthouse dans l'intégration continue. Le référencement naturel dépend des données de terrain, et non des données de laboratoire.
Questions Fréquemment Posées
La leçon « Signaux essentiels du Web : LCP, FID et CLS » est-elle gratuite ?
Oui — le texte complet de « Signaux essentiels du Web : LCP, FID et CLS » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Signaux essentiels du Web : LCP, FID et CLS » ?
Comprenez ce que mesurent Largest Contentful Paint, First Input Delay et Cumulative Layout Shift, et pourquoi Google les utilise comme signaux de classement. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 « Signaux essentiels du Web : LCP, FID et CLS » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- Signaux essentiels du Web : LCP, FID et CLS
- Audits et évaluation avec Lighthouse
- Optimisation des images : chargement différé et formats WebP
- Division du code et routes chargées à la demande