Core Web Vitals en 2026 : la checklist concrète pour passer au vert

Depuis mars 2024, l'INP a remplacé le FID dans les Core Web Vitals. Ça change concrètement ce sur quoi vous devez travailler. Voici la check 2026, avec ce qui marche vraiment et ce qui ne sert à rien.

Les 3 métriques qui comptent en 2026

• LCP (Largest Contentful Paint) : le plus gros élément visible doit s'afficher en moins de 2,5 secondes.
• INP (Interaction to Next Paint) : votre site doit répondre en moins de 200 ms à une interaction.
• CLS (Cumulative Layout Shift) : la mise en page ne doit pas sauter pendant le chargement (score sous 0,1).

Améliorer le LCP

1. 01Identifiez l'élément LCP avec PageSpeed Insights : c'est presque toujours une image hero ou un titre H1.
2. 02Si c'est une image : preload, format AVIF ou WebP, taille adaptée au viewport, attribute fetchpriority="high".
3. 03Si c'est un titre : assurez-vous que la police est preloaded, sinon le texte attend la police avant de s'afficher.
4. 04Supprimez les CSS bloquants au-dessus de la ligne de flottaison. Inlinez le critical CSS.
5. 05Hébergez vos polices en local plutôt que de les charger depuis Google Fonts.

Améliorer l'INP

L'INP mesure la réactivité de votre site. Si vous avez beaucoup de JavaScript qui s'exécute au chargement, votre site n'est pas réactif. Voici les leviers principaux :

• Code-splittez votre JavaScript. Avec Next.js, c'est natif par route.
• Différez les scripts tiers (analytics, chat, pixel) avec defer ou async.
• Utilisez des Web Workers pour les calculs lourds.
• Évitez les listeners trop coûteux sur scroll ou resize : debouncez et throttlez.
• Limitez les re-renders React inutiles (memo, useCallback bien placés).

Améliorer le CLS

1. 01Réservez l'espace de toutes les images avec width et height (ou aspect-ratio).
2. 02Évitez d'injecter du contenu dynamique au-dessus du contenu existant (bannières, popups, cookies).
3. 03Pour les fonts : utilisez font-display: swap avec un fallback similaire en métrique.
4. 04Pour les iframes (vidéo, carte) : fixez une hauteur explicite.
5. 05Pour les ads : réservez la slot avec sa taille définitive.

L'outil unique à utiliser

PageSpeed Insights donne les Core Web Vitals à un instant T. Mais ce qui compte pour Google, ce sont les données « réelles » collectées par Chrome User Experience Report (CrUX). Connectez-vous à Search Console > Core Web Vitals pour voir ce que Google mesure vraiment sur vos pages.

Le mythe à enterrer

« 100/100 sur PageSpeed » n'est pas le but. Ce qui compte, c'est de passer au vert sur les 3 métriques en données réelles. Un site à 85/100 mais avec un LCP réel à 1,8s rankera mieux qu'un site à 95/100 avec un LCP réel à 3,2s.