Core Web Vitals: comment améliorer LCP, INP et CLS en pratique

Pourquoi les Core Web Vitals comptent en 2025

Les Core Web Vitals (LCP, INP, CLS) sont des signaux clés de l'expérience utilisateur pris en compte par Google. Les améliorer, c'est gagner en visibilité SEO, en taux de conversion et en satisfaction.

Les 3 indicateurs à connaître

LCP — Largest Contentful Paint

Mesure le temps de chargement du plus grand élément visible (souvent l'image ou le titre héro). Objectif : ≤ 2,5 s (Bon), 2,5–4 s (À améliorer), > 4 s (Mauvais).

INP — Interaction to Next Paint

Mesure la réactivité globale lors des interactions (clics, saisie, etc.). A remplacé FID. Objectif : ≤ 200 ms (Bon), 200–500 ms (À améliorer), > 500 ms (Mauvais).

CLS — Cumulative Layout Shift

Mesure la stabilité visuelle (décalages de mise en page). Objectif : ≤ 0,1 (Bon), 0,1–0,25 (À améliorer), > 0,25 (Mauvais).

Mesurer vos scores avec les bons outils

• PageSpeed Insights et Lighthouse pour l'audit rapide.
• Search Console (rapport Core Web Vitals) pour les données de vos utilisateurs réels.
• CrUX (Chrome UX Report) pour les tendances de votre domaine.
• WebPageTest pour les analyses avancées (TTFB, waterfall, CDN).

En 2025/2026, distinguez bien données labo (Lighthouse) et données terrain (CrUX/Search Console). L’évaluation CWV de Google se base sur le 75e percentile des données terrain, d’où des écarts possibles avec vos tests locaux.

Comment améliorer LCP (Largest Contentful Paint)

Priorités techniques

• Optimiser l'élément LCP (souvent l'image héro) : formats WebP/AVIF, taille adaptée, compression efficace.
• Ajouter fetchpriority="high" sur l’image héro et decoding="async".
• Déclarer width et height (ou aspect-ratio) + srcset/sizes adaptés.
• Preload sélectif de l’image héro et des polices critiques (pas tout), preconnect aux origines utiles.
• Critical CSS au-dessus de la ligne de flottaison, différer le reste.
• Réduire le TTFB : cache serveur, CDN, optimisations PHP/MySQL, HTTP/2 ou HTTP/3.
• Éviter l’image héro en background CSS (non candidate LCP) : préférer un <img> dans le DOM.
• Retarder les scripts non essentiels (defer/async), supprimer le JS non utilisé.
• Lazy‑load toutes les images non héro (loading="lazy").

Quick wins

• Compresser l'image héro à < 150 Ko si possible (AVIF + fallback).
• Réduire le CSS bloquant, minifier et regrouper prudemment.
• Mettre en place un cache navigateur long pour les assets stables.

Ces actions offrent souvent des gains immédiats, surtout si les images ne sont pas optimisées et que le CSS est globalisé.

Comment améliorer INP (Interaction to Next Paint)

Priorités techniques

• Alléger la charge JS : code splitting, suppression du JS non essentiel, désactivation de plugins coûteux.
• Éviter les long tasks (> 50 ms) : déporter en Web Worker et découper en micro‑tâches.
• Déférer le JS non critique et charger au moment de l'interaction (lazy‑hydrate).
• Utiliser des listeners passifs ({ passive: true }) pour le scroll/touch.
• Préférer le CSS pour les animations; limiter les recalculs de style et réconciliations DOM.
• Mesurer avec l’API Event Timing et profiler les handlers lents.

Quick wins

• Supprimer les carrousels lourds si non indispensables.
• Reporter le chargement des widgets tiers (chat, maps) après interaction.
• Limiter le reflow en regroupant les lectures/écritures DOM.

Ces mesures réduisent la latence perçue et évitent la sensation de “site qui rame” lors des premières interactions.

Comment améliorer CLS (Cumulative Layout Shift)

Priorités techniques

• Réserver l'espace des images/iframes/publicités via width/height ou aspect-ratio.
• Éviter l'injection tardive de bannières/consentements sans espace réservé.
• Utiliser transform pour les animations (pas top/left).
• Gérer les polices : font-display: swap, preload si nécessaire, et size-adjust pour aligner la police de secours.
• Placer les éléments dynamiques (notifs, toasts) dans des conteneurs dédiés avec dimensions fixes.

Plan d'action en 30 jours

1. Semaine 1 — Audit (PageSpeed, Lighthouse, Search Console). Cartographier l’élément LCP, les long tasks et les sources de CLS.
2. Semaine 2 — Optimisations ciblées: images/polices (AVIF/WebP, fetchpriority, preload), critical CSS, lazy‑load, cache/CDN.
3. Semaine 3 — Alléger le JS: defer/async, workers, suppression des scripts tiers lents, hydratation différée.
4. Semaine 4 — QA, tests sur appareils réels, suivi Search Console (données terrain), itérations.

Maintenez un suivi continu (alertes, rapports CWV) et intégrez la performance dans votre pipeline CI/CD pour éviter les régressions.

FAQ rapide

Les Core Web Vitals influencent-ils directement le SEO ?

Ils font partie des signaux d'expérience de page pris en compte par Google. Un bon score n'assure pas un top 1, mais il consolide votre visibilité et améliore la conversion.

Dois-je tout réécrire pour de bons scores ?

Non. Commencez par les quick wins (images, CSS critique, defers) puis traitez les goulots d'étranglement JS.

Le background-image compte-t-il pour le LCP ?

Non. En 2025/2026, l’élément LCP est généralement un <img>, la post‑image d’une vidéo ou un élément texte. Une image en background CSS n’est pas candidate LCP : placez l’image héro dans le DOM avec un <img>, ses dimensions et, si nécessaire, fetchpriority="high".

Dois‑je passer l’image héro en AVIF ?

Oui, dans la majorité des cas. Utilisez AVIF avec fallback (WebP/PNG) et un srcset/sizes adapté. Vérifiez visuellement la qualité (banding) et mesurez l’impact sur le LCP.

Quels contenus puis-je lire ensuite ?

• Les erreurs à éviter lors de la création de votre site
• Qu'est-ce qu'un site vitrine ?
• Site responsive vs application mobile

Conclusion

Améliorer les Core Web Vitals, c'est investir dans l'expérience utilisateur et la croissance. En ciblant les bonnes actions, les gains sont rapides et mesurables.