Depuis 2021, Google intègre les Core Web Vitals dans son algorithme de classement. Ce n'est plus une tendance future — c'est une réalité qui impacte vos positions dès aujourd'hui. Et pourtant, la majorité des sites web d'entreprises françaises sont encore loin d'atteindre le seuil "Good" sur ces métriques. C'est une opportunité : si vous optimisez quand vos concurrents ne le font pas, vous prenez une avance précieuse. Chez Go To Agency, nous intégrons l'optimisation des Core Web Vitals dans tous nos projets de développement web.
Les trois métriques Core Web Vitals
LCP — Largest Contentful Paint : temps d'affichage du plus grand élément visible sur la page (généralement l'image hero ou le titre principal). Google vise moins de 2,5 secondes. Au-delà de 4 secondes, c'est "Poor". Le LCP est souvent pénalisé par des images non optimisées, un hébergement lent ou un JavaScript bloquant.
INP — Interaction to Next Paint : mesure la réactivité de la page à toutes les interactions utilisateur (clics, frappes clavier, taps). Remplace le FID depuis mars 2024. Vise moins de 200ms. Les sites avec beaucoup de JavaScript côté client (SPA mal optimisées) souffrent souvent sur cette métrique.
CLS — Cumulative Layout Shift : mesure la stabilité visuelle de la page. Un CLS élevé signifie que les éléments se déplacent pendant le chargement (pub qui s'insère, police qui remplace une police système, image sans dimensions définies). Vise moins de 0,1. Extrêmement frustrant pour l'utilisateur et pénalisé sévèrement.
Mesurer vos Core Web Vitals
PageSpeed Insights : l'outil Google qui combine les données de terrain (Chrome User Experience Report) et les données de laboratoire (Lighthouse). Analysez les deux : les données terrain reflètent la vraie expérience de vos visiteurs, les données lab identifient les problèmes techniques à corriger.
Google Search Console : le rapport "Expérience" vous donne une vue agrégée de vos URLs classées en "Good", "Needs Improvement" ou "Poor". Traitez en priorité les URLs "Poor" qui génèrent le plus de trafic.
Chrome DevTools : pour les développeurs, le panneau Performance et l'onglet Lighthouse intégré permettent une analyse fine en conditions de réseau contrôlées. La throttling (simulation réseau 3G/4G) révèle les problèmes invisibles sur les connexions rapides.
Optimiser le LCP : les actions prioritaires
Optimiser les images : convertissez en WebP (30-80% plus léger que JPEG/PNG), définissez des dimensions précises, utilisez le lazy loading pour les images hors écran. Pour l'image hero (qui impacte directement le LCP), chargez-la en priorité avec loading="eager" ou fetchpriority="high". Le composant Image de Next.js gère tout ça automatiquement.
Utiliser un CDN : servir vos assets statiques depuis un CDN (Cloudflare, Vercel Edge Network, AWS CloudFront) réduit la latence réseau de 50 à 80% pour les visiteurs éloignés de votre serveur. Sur Vercel, c'est inclus par défaut.
Éliminer le render-blocking : les scripts JavaScript et CSS qui bloquent le rendu de la page retardent l'affichage du LCP. Chargez les scripts en mode defer ou async, inlinez les CSS critiques dans le <head> et différez les CSS non critiques.
Précharger les ressources critiques : utilisez <link rel="preload"> pour les polices web et les images hero. Le navigateur télécharge ces ressources en priorité avant même de commencer à analyser le reste de la page.
Optimiser le CLS : stabiliser votre mise en page
Définir les dimensions des images et vidéos : toujours spécifier width et height dans le HTML pour que le navigateur réserve l'espace nécessaire avant le chargement. Sans dimensions, l'image provoque un layout shift au chargement.
Gérer les polices web : utilisez font-display: swap pour éviter que le texte soit invisible pendant le chargement de la police. Préchargez vos polices critiques. Ou mieux, auto-hébergez vos polices pour éviter la latence d'un serveur Google Fonts externe.
Éviter les insertions de contenu dynamique : les bannières cookies, les publicités, les widgets qui s'insèrent en haut de page après le chargement initial sont les principales causes de CLS élevé. Réservez un espace fixe pour ces éléments ou chargez-les avant le contenu principal.
Optimiser l'INP : réduire la latence des interactions
Fragmenter les tâches JavaScript longues : une tâche JS qui prend plus de 50ms bloque le thread principal et retarde la réponse aux interactions. Utilisez setTimeout, requestIdleCallback ou les Web Workers pour déplacer les traitements lourds hors du thread principal.
Réduire la taille du bundle JS : analysez votre bundle avec Webpack Bundle Analyzer ou Next.js Bundle Analyzer. Supprimez les dépendances inutiles, utilisez le code splitting dynamique (import()), différez le chargement des fonctionnalités non critiques.
Optimiser les event handlers : les handlers sur des événements fréquents (scroll, resize, mousemove) doivent être throttlés ou débounced. Un handler de scroll qui s'exécute 60 fois par seconde peut sérieusement impacter l'INP.
Votre site a des scores Core Web Vitals insuffisants ? Notre équipe réalise des audits techniques complets et propose un plan d'action priorisé. Prenez rendez-vous pour en discuter.