Les Core Web Vitals en Détail

1) Qu'est-ce que les Core Web Vitals ?

Les Core Web Vitals sont 3 métriques définies par Google pour mesurer concrètement l'expérience utilisateur sur un site web. Depuis 2021, ces métriques sont un facteur de classement SEO officiel, ce qui signifie qu'elles influencent directement ta position dans les résultats de recherche.

Chaque métrique mesure un aspect différent de l'expérience : le LCP évalue la vitesse de chargement, l'INP mesure la réactivité aux interactions, et le CLS vérifie la stabilité visuelle de la page. Ensemble, ces trois indicateurs donnent une image complète de la qualité perçue par tes visiteurs.

2) LCP - Largest Contentful Paint (Chargement)

Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible de la page. C'est généralement une grande image (hero image, bannière), un bloc de texte principal ou une vidéo. Cette métrique représente le moment où l'utilisateur perçoit que le contenu principal est chargé.

Un mauvais LCP est souvent causé par des images trop lourdes qui mettent du temps à se télécharger, un serveur lent à répondre (TTFB élevé), ou du CSS/JavaScript qui bloque l'affichage du contenu principal. Optimiser ces éléments permet généralement d'améliorer significativement cette métrique.

3) INP - Interaction to Next Paint (Interactivité)

L'INP mesure la rapidité de réaction de ton site quand un utilisateur interagit avec lui. Cela inclut les clics sur des boutons ou liens, la saisie au clavier, et les interactions tactiles sur mobile. Cette métrique a remplacé le FID depuis mars 2024 car elle donne une vision plus complète de la réactivité.

Les causes les plus fréquentes d'un mauvais INP sont le JavaScript trop lourd, les tâches longues qui bloquent le navigateur (plus de 50ms), ou simplement trop de scripts qui s'exécutent en même temps. Quand le navigateur est occupé à exécuter du code, il ne peut pas répondre aux interactions de l'utilisateur.

4) CLS - Cumulative Layout Shift (Stabilité visuelle)

Le CLS mesure la stabilité visuelle de ta page : est-ce que les éléments "sautent" pendant le chargement ? Tu as sûrement déjà vécu cette situation frustrante : tu veux cliquer sur un bouton, une publicité apparaît soudainement, et tu cliques dessus par erreur. C'est exactement ce que le CLS cherche à éviter.

Les décalages de mise en page sont généralement causés par des images sans dimensions définies (le navigateur ne sait pas quelle place réserver), des publicités qui s'insèrent dans le contenu, des polices qui changent de taille au chargement (FOUT), ou du contenu injecté dynamiquement par JavaScript. Définir les dimensions à l'avance et réserver l'espace pour le contenu dynamique résout la plupart de ces problèmes.

5) Autres métriques à connaître

Au-delà des 3 Core Web Vitals, d'autres métriques complètent l'analyse de performance :

• TTFB (Time To First Byte) : Temps avant de recevoir le premier octet du serveur. Indicateur de la réactivité serveur.
• FCP (First Contentful Paint) : Premier élément affiché à l'écran (texte, image, etc.).
• TBT (Total Blocking Time) : Temps total où le navigateur est bloqué par JavaScript. Corrélé à l'INP.
• Speed Index : Mesure la rapidité de remplissage visuel de la page.