Analyse des Core Web Vitals

Comment fonctionne cette vérification

Scanaris n'invente pas de chiffres de performance : il demande à PageSpeed Insights, le service de Google qui exécute Lighthouse, de mesurer ta page en mode mobile et lit le résultat. Il en tire la note de 0 à 100 et trois métriques : LCP (Largest Contentful Paint, le temps que met le plus grand élément visible à s'afficher), CLS (Cumulative Layout Shift, à quel point la page « saute » pendant le chargement) et TBT (Total Blocking Time, combien de temps le JavaScript bloque le fil principal). La note est conservée dans un constat informatif qui ne coûte rien et qui alimente la note du pilier performance. Il n'ouvre des constats avec sévérité que lorsqu'une métrique tombe dans la plage que Google qualifie de « mauvaise » : LCP au-dessus de 4 secondes (moyenne), CLS au-dessus de 0,25 (faible) ou TBT au-dessus de 600 millisecondes (faible). Si Lighthouse ne renvoie pas de note (page non mesurable, erreur de l'outil), il n'y a pas de constat.

Pourquoi c'est important

La performance, c'est de l'expérience utilisateur et c'est du SEO. Google utilise les Core Web Vitals comme signal de classement depuis 2021, et il mesure celles de tes vrais utilisateurs dans Chrome, pas seulement celles du laboratoire. Mais l'effet le plus direct est sur l'activité : chaque seconde de chargement en plus sur mobile réduit les conversions de façon mesurable, et un LCP de 5 secondes signifie qu'une bonne partie de tes visiteurs voient un écran blanc assez longtemps pour partir. Les métriques sont mesurées sur mobile parce que c'est là que la plupart des sites sont les moins performants et là que Google indexe en premier.

Comment corriger

LCP élevé

L'image principale est généralement l'élément LCP. Sers-la en WebP ou AVIF, à la taille affichée et non à l'originale, avec fetchpriority="high" et sans loading="lazy". Dans Nuxt et Next.js, les composants d'image (NuxtImg, next/image) le font pour toi.
Le temps de réponse du serveur s'ajoute à tout le reste. Cache de page, CDN devant et, sous WordPress, un plugin de cache bien configuré.
CSS et JavaScript bloquants : intègre le CSS critique en ligne et charge le reste ensuite ; les scripts tiers avec defer ou async.
Polices web : font-display: swap, préchargement de la police principale et, si tu peux, héberge-les toi-même plutôt que de les charger depuis Google Fonts.

CLS élevé

Presque toujours des images sans width et height, des publicités ou des intégrations qui apparaissent d'un coup, et des polices qui changent de taille au chargement. Déclare les dimensions de chaque image et iframe, réserve l'espace des blocs dynamiques avec min-height et n'insère jamais de contenu au-dessus de ce que l'utilisateur est déjà en train de lire.

TBT élevé

Trop de JavaScript exécuté au démarrage. Découpe le bundle par route, charge les composants lourds seulement quand ils servent, retarde les scripts d'analyse et de chat jusqu'après l'interaction, et vérifie le poids des bibliothèques : bibliothèques obsolètes et une copie complète de jQuery pour un menu sont les cas typiques.

Vérifie que c'est corrigé

npx lighthouse https://tondomaine.com --only-categories=performance --preset=perf --form-factor=mobile --screenEmulation.mobile --view

Ou colle l'URL dans PageSpeed Insights, qui en plus de la mesure de laboratoire montre les données des utilisateurs réels des 28 derniers jours. Objectif : LCP sous 2,5 s, CLS sous 0,1 et TBT sous 200 ms. Mesure plusieurs fois : les résultats de laboratoire varient un peu d'une exécution à l'autre.

Questions fréquentes

Mon site charge vite sur mon ordinateur. Pourquoi la note est-elle mauvaise ?

Parce que la mesure simule un téléphone de milieu de gamme sur une connexion 4G lente, ce qu'utilise une grande partie de tes visiteurs. Ton portable en fibre n'est pas le cas représentatif.

Un 100 en performance aide-t-il le SEO plus qu'un 90 ?

Pas de façon perceptible. Google distingue « bon », « à améliorer » et « mauvais » par métrique ; une fois dans « bon », le reste est de l'expérience utilisateur, pas du classement. Concentre-toi sur sortir du rouge, pas sur courir après le 100.

Cette vérification mesure-t-elle toutes mes pages ?

Seulement l'URL analysée. Si ta page produit ou ton blog ont des problèmes différents, analyse-les à part. Les autres vérifications de ce pilier, comme accessibilité, travaillent aussi sur la page précise.