Core Web Vitals : passer LCP, INP et CLS au vert en 2 semaines

Depuis mars 2024, INP a remplacé FID. En 2026, les trois Core Web Vitals (LCP, INP, CLS) sont un signal de ranking stable, et surtout : un mauvais score casse le taux de rebond et pénalise toute la chaîne de conversion.

Semaine 1 — Audit et quick-wins

Jour 1 : mesure de base

Outils gratuits à utiliser dans cet ordre :

• PageSpeed Insights (données de terrain + lab)
• Search Console → Core Web Vitals (données CrUX agrégées)
• Chrome DevTools → Performance → Lighthouse (reproduction locale)
• WebPageTest.org (filmstrip détaillé, waterfall)

Jour 2-3 : optimiser LCP

LCP mesure le temps d'affichage du plus gros élément visible (souvent une image hero ou un titre). Les wins :

• Preload l'image LCP : <link rel="preload" as="image" href="hero.webp">
• Servir en WebP/AVIF : −60 à −80 % de poids vs JPEG
• Dimensions explicites (width, height)
• CDN avec edge locations proches de vos utilisateurs (Vercel, Cloudflare)
• Supprimer les render-blocking resources (JS synchrone, CSS externe bloquant)
• Inline critical CSS pour le above-the-fold

Jour 4-5 : optimiser CLS

CLS mesure les sauts de contenu pendant le chargement. Les causes fréquentes :

• Images sans width/height → toujours les préciser
• Fonts qui swap tardivement → font-display: optional ou preload + size-adjust
• Pubs ou embeds sans hauteur réservée → aspect-ratio ou conteneur fixe
• Contenu injecté dynamiquement au-dessus du fold (bannières cookies) → réserver l'espace

Jour 6-7 : optimiser INP

INP mesure la réactivité aux interactions (clic, scroll). Les leviers :

• Réduire le JavaScript main-thread : code-splitting, dynamic imports
• Débouncer les handlers coûteux
• Déplacer les tâches lourdes en Web Worker
• Utiliser requestIdleCallback pour les tâches non-critiques
• Désactiver les tiers scripts lourds ou les charger après interaction

Semaine 2 — Réécritures ciblées

Migration vers images modernes

Si votre site sert encore du JPEG/PNG classique : Next.js Image ou un CDN image (Cloudinary, imgix, Vercel Image) génère automatiquement WebP/AVIF. Gain typique : −50 % de LCP sur les pages hero.

Suppression des tiers scripts inutiles

Chaque tag tiers ajoute 50 à 300ms d'INP. Audit :

• Google Analytics → gtag → vérifier le nécessaire, envisager Plausible ou PostHog
• Facebook Pixel, LinkedIn Insight → ne charger qu'après consentement
• Chat widgets (Intercom, Drift) → lazy-load après 3s ou sur scroll
• A/B testing tools → délai de chargement en non-critique

Migration de stack si nécessaire

Si vous êtes sur WordPress shared hosting et que rien ne passe au vert malgré les correctifs, la stack elle-même peut être le bloqueur. Voir Next.js vs WordPress et le comparatif hébergement.

Cas concret : e-commerce passé de rouge à vert en 10 jours

Actions : preload image hero, compression WebP, hauteur explicite sur bannière promo, lazy-load du chat, code-splitting des composants de checkout.

Les Core Web Vitals ne sont pas un objectif en soi. C'est un proxy pour "le site marche bien". Optimiser CWV, c'est optimiser l'expérience — le SEO suit automatiquement.

Monitoring continu

Une fois au vert, mettre en place :

• Alertes Search Console pour toute dégradation
• RUM (Real User Monitoring) : Vercel Speed Insights, Sentry, SpeedCurve
• Review CWV mensuelle avec l'équipe