Core Web Vitals : comprendre les indicateurs de performance web

1 Accroche

Quand un site te fait attendre

Tu cliques sur un site. La page commence à s'afficher. Tu attends. Puis encore un peu. Tu commences à te demander si ton clic a bien fonctionné. Et finalement, tu quittes le site. Tu viens de vivre un problème de performance web.

Un site performant n'est pas seulement un site qui affiche rapidement une page. Il doit aussi pouvoir réagir correctement à tes actions et rester stable pendant son chargement. Google s'intéresse donc à plusieurs aspects de cette expérience grâce à des indicateurs appelés les Core Web Vitals. Le nom peut sembler compliqué. Mais le principe est finalement assez simple : mesurer certains éléments qui influencent la qualité de l'expérience vécue par un visiteur sur une page web.

Dans ce chapitre, nous allons voir les trois indicateurs principaux à connaître : LCP, INP et CLS.

2 Ce que tu vas apprendre

À la fin de ce chapitre, tu sauras

✓ Ce que sont les Core Web Vitals
✓ À quoi servent le LCP, l'INP et le CLS
✓ Pourquoi ces indicateurs sont importants
✓ Comment savoir si ton site présente de bonnes performances
✓ Quelles erreurs peuvent dégrader l'expérience de tes visiteurs
✓ Pourquoi un site peut être rapide mais malgré tout désagréable à utiliser

3 Le concept expliqué simplement

Les Core Web Vitals, c'est quoi ?

Les Core Web Vitals sont un ensemble d'indicateurs utilisés pour mesurer certains aspects de l'expérience utilisateur sur une page web. Aujourd'hui, trois indicateurs principaux sont à connaître : LCP, INP et CLS.

Pas besoin de retenir immédiatement leurs noms compliqués. Le plus important est d'abord de comprendre ce que chacun cherche à mesurer.

On peut résumer les trois questions ainsi :

LCP : est-ce que le contenu principal apparaît suffisamment vite ?

INP : est-ce que la page réagit correctement quand j'interagis avec elle ?

CLS : est-ce que la page reste stable pendant son chargement ?

Ces trois indicateurs permettent donc de regarder la performance sous des angles différents.

Le LCP : à quelle vitesse le contenu principal apparaît ?

LCP signifie Largest Contentful Paint. Il cherche notamment à mesurer le temps nécessaire pour afficher le principal élément de contenu visible dans la fenêtre du navigateur. Cela peut par exemple être une grande image, un titre important ou un bloc principal de contenu.

En résumé : « Combien de temps faut-il avant que je voie réellement le contenu principal de la page ? »

Si ton visiteur arrive sur une page et doit attendre longtemps avant de voir son contenu principal, l'expérience peut rapidement devenir frustrante.

💡 Analogie — Imagine que tu entres dans un restaurant : le LCP correspond au temps nécessaire avant que ton plat principal arrive sur la table. Si tu attends très longtemps sans rien voir arriver, tu risques de commencer à t'impatienter.

L'INP : est-ce que la page réagit correctement ?

INP signifie Interaction to Next Paint. Cet indicateur concerne la réactivité de la page lorsqu'un utilisateur interagit avec elle. Tu cliques sur un bouton, tu ouvres un menu, tu remplis un formulaire, tu appuies sur un élément interactif. Si le site met beaucoup de temps à réagir, l'expérience devient désagréable. L'INP cherche justement à mesurer cette réactivité.

La question à retenir est donc : « Lorsque j'interagis avec la page, est-ce qu'elle réagit correctement ? »

💡 Analogie — Toujours dans le restaurant : l'INP correspond au temps que met le serveur à réagir lorsque tu lui demandes quelque chose. Tu poses une question ou tu demandes de l'eau : tu t'attends à ce qu'il réagisse rapidement.

Le CLS : est-ce que la page bouge pendant son chargement ?

CLS signifie Cumulative Layout Shift. Cette fois, on s'intéresse à la stabilité visuelle de la page. Imagine que tu veux cliquer sur un bouton. Tu places ton doigt. Et au dernier moment, une image se charge au-dessus du bouton. Le bouton descend. Tu cliques… Mais tu viens finalement de cliquer sur autre chose. C'est un déplacement inattendu de la mise en page. Le CLS mesure ce type d'instabilité.

La question à retenir est donc : « Est-ce que les éléments restent à leur place pendant que la page se charge ? »

💡 Analogie — Toujours dans le restaurant : le CLS, c'est comme si ta table changeait de place pendant que tu es en train de manger. Tu avais posé ton verre quelque part et, soudain, tout se déplace. Ce n'est pas très confortable.

Trois indicateurs, trois problèmes différents

Tu peux maintenant retenir une idée très simple :

LCP → affichage du contenu principal

INP → réactivité aux interactions

CLS → stabilité de la page

Les trois problèmes sont différents. Une page peut donc afficher rapidement son contenu mais mal réagir aux clics, être réactive mais déplacer constamment ses éléments, ou rester stable mais mettre longtemps à afficher son contenu principal.

⚠️ Les pièges à éviter

✗ Croire que les Core Web Vitals signifient simplement que le site doit être rapide
✗ Regarder uniquement le LCP
✗ Oublier la réactivité de la page
✗ Négliger les déplacements inattendus des éléments
✗ Chercher uniquement à obtenir une bonne note sans regarder l'expérience réelle
✗ Penser qu'un seul test suffit pour juger définitivement les performances

4 Exemple concret

Une page d'accueil qui cumule plusieurs problèmes

Imagine une page d'accueil avec une grande image en haut, plusieurs scripts, une fenêtre de consentement, des polices externes et plusieurs animations. La page commence à s'afficher. Mais l'image principale met plusieurs secondes à apparaître. Pendant ce temps, un script lourd ralentit les interactions. Puis une bannière apparaît et pousse une partie du contenu vers le bas.

Tu peux alors avoir trois problèmes différents : LCP mauvais (le contenu principal apparaît trop tard), INP mauvais (la page réagit difficilement aux interactions), CLS mauvais (les éléments se déplacent pendant le chargement).

Le visiteur, lui, ne connaît aucun de ces termes. Il dira simplement : « Ce site est lent et pénible à utiliser. »

C'est justement tout l'intérêt des Core Web Vitals : décomposer cette expérience en plusieurs aspects mesurables.

5 Comment le mettre en pratique

1

Teste ton site

Commence par utiliser PageSpeed Insights. Entre l'URL d'une page importante. Ne teste pas uniquement ta page d'accueil. Tu peux également tester une page de contenu, une page commerciale ou une fiche produit si tu as un e-commerce. Les résultats peuvent varier d'une page à l'autre.

2

Regarde les trois indicateurs

Observe notamment LCP, INP et CLS. Ne cherche pas immédiatement à comprendre toutes les informations affichées par l'outil. Commence simplement par identifier les indicateurs qui posent éventuellement problème. L'objectif est de savoir où se situe le problème avant de chercher à le corriger.

3

Regarde les recommandations

PageSpeed Insights peut te proposer différentes pistes d'amélioration. Tu peux notamment rencontrer des recommandations concernant l'optimisation des images, la réduction du JavaScript, la suppression de certaines ressources inutiles, la réservation de l'espace nécessaire aux images ou l'amélioration du serveur. Ces recommandations ne signifient pas forcément qu'il faut tout appliquer immédiatement. Commence par comprendre le problème avant de modifier ton site.

4

Corrige une chose à la fois

Ne cherche pas à tout modifier simultanément. Commence par le problème qui semble avoir le plus d'impact. Par exemple, si une image très lourde ralentit fortement l'affichage du contenu principal, commence par travailler sur cette image. Tu pourras ensuite mesurer à nouveau le résultat.

💡 Bon réflexe — Une optimisation est beaucoup plus facile à comprendre lorsque tu sais quelle modification a produit quel effet.

5

Reteste

Après tes modifications, effectue un nouveau test. Compare les résultats avant et après. Mais attention : un test ponctuel ne représente pas nécessairement toute la réalité. Les performances peuvent varier selon l'appareil utilisé, la connexion réseau, les conditions de chargement ou la page testée. L'objectif n'est donc pas simplement de faire disparaître un mauvais résultat sur un test. Il faut chercher à améliorer réellement l'expérience des visiteurs.

6 Le jargon de ce chapitre

Mini-lexique

Terme	Définition simple
Core Web Vitals	Indicateurs mesurant certains aspects de l'expérience utilisateur
LCP	Indicateur lié à l'affichage du contenu principal
INP	Indicateur lié à la réactivité aux interactions
CLS	Indicateur lié aux déplacements inattendus de la mise en page
Performance web	Capacité d'un site à charger et à réagir efficacement
PageSpeed Insights	Outil permettant d'analyser les performances d'une page

7 Quiz — Vérifie que tu as compris

Question 1/5

Question 1 — Que mesurent les Core Web Vitals ?

A Le nombre de visiteurs

B Certains aspects de l'expérience utilisateur

C Le nombre de pages d'un site

D Le nombre de backlinks

💡 Bonne réponse : B. Les Core Web Vitals permettent notamment d'observer l'affichage du contenu principal, la réactivité et la stabilité visuelle.

8 Et après ?

Tu connais maintenant les Core Web Vitals et les trois indicateurs principaux à retenir :

LCP → le contenu principal apparaît-il suffisamment vite ?

INP → la page réagit-elle correctement ?

CLS → la page reste-t-elle stable pendant son chargement ?

Tu as également vu comment commencer à analyser les performances de ton site avec PageSpeed Insights. Mais derrière une page lente, on retrouve très souvent un élément que l'on sous-estime : les images.

Une seule image trop lourde peut ralentir considérablement l'affichage d'une page. Dans le prochain chapitre, nous allons donc nous intéresser à un sujet très concret.

Chapitre suivant

Le poids des images et pourquoi ça ralentit ton site

Continuer →

Les Core Web Vitals expliqués simplement