Core Web Vitals : optimiser LCP, INP et CLS sur un site e-commerce

Les Core Web Vitals sont devenus un signal de classement Google en 2021 et continuent d’évoluer. En 2025, les trois métriques à maîtriser sont LCP (Largest Contentful Paint), INP (Interaction to Next Paint, remplaçant de FID depuis mars 2024) et CLS (Cumulative Layout Shift). Sur un site e-commerce, chaque dixième de seconde compte pour la conversion.

Mesurer avant d’optimiser

Avant tout correctif, mesurez l’état réel avec des données terrain (Real User Monitoring), pas seulement en laboratoire.

Outils de mesure terrain :

• Google Search Console > Core Web Vitals (données réelles 28 jours)
• PageSpeed Insights (données CrUX par URL)
• Web Vitals JS (import { onLCP, onINP, onCLS } from 'web-vitals')

Outils de laboratoire :

• Chrome DevTools > Performance / Lighthouse
• WebPageTest

Les données laboratoire servent à reproduire et déboguer. Les données terrain montrent ce que vivent vraiment vos utilisateurs.

LCP — Largest Contentful Paint

LCP mesure quand le plus grand élément visible est rendu. Sur un e-commerce, c’est souvent l’image hero ou la vignette produit principale. Cible : < 2,5 secondes.

Causes fréquentes d’un LCP dégradé

Image héro non préchargée : le navigateur découvre l’image seulement en parsant le HTML, trop tard.

<!-- Solution : preload de l'image LCP -->
<link rel="preload" as="image" href="/images/hero.webp"
      imagesrcset="/images/hero-640.webp 640w, /images/hero-1200.webp 1200w"
      imagesizes="100vw" fetchpriority="high" />

Format non optimisé : JPEG ou PNG au lieu de WebP/AVIF. Un <picture> avec formats modernes réduit le poids de 30 à 50%.

Hébergement lent : TTFB (Time to First Byte) > 600ms plombe le LCP avant même que l’image charge. Vérifiez votre Time to First Byte avec un CDN ou du cache HTTP côté serveur.

Lazy loading sur l’image LCP : loading="lazy" sur l’image au-dessus de la fold est une erreur fréquente. Utilisez loading="eager" et fetchpriority="high" pour l’image LCP.

INP — Interaction to Next Paint

INP mesure la réactivité aux interactions (clic, tap, frappe clavier). Il remplace FID depuis mars 2024 car il couvre toute la durée de vie de la page, pas seulement le premier clic. Cible : < 200 ms.

Causes fréquentes d’un INP dégradé

Long tasks JavaScript : des scripts qui monopolisent le thread principal pendant plus de 50ms bloquent les interactions. Utilisez les Chrome DevTools > Performance pour identifier les Long Tasks.

// Problème : traitement synchrone lourd au clic
button.addEventListener('click', () => {
  const result = heavyComputation(data); // bloque 300ms
  updateUI(result);
});

// Solution : découper avec scheduler ou déléguer au worker
button.addEventListener('click', async () => {
  updateUI('Chargement...');
  await scheduler.postTask(() => heavyComputation(data), { priority: 'background' });
  updateUI(result);
});

Hydration côté client : sur les SPA (React, Angular), l’hydration bloque parfois les interactions au chargement. Utilisez le code splitting et le chargement différé des composants non critiques.

Event listeners trop larges : un listener sur document qui exécute beaucoup de code à chaque clic dégrade l’INP global.

CLS — Cumulative Layout Shift

CLS mesure les décalages de mise en page inattendus. Un bouton qui se déplace pendant que l’utilisateur clique — c’est du CLS. Cible : < 0,1.

Causes fréquentes d’un CLS élevé

Images sans dimensions : le navigateur ne réserve pas la place avant le chargement.

<!-- Mauvais : pas de dimensions, décalage au chargement -->
<img src="/product.webp" alt="Produit" />

<!-- Bon : dimensions explicites, place réservée -->
<img src="/product.webp" alt="Produit" width="800" height="600"
     style="aspect-ratio: 4/3;" />

Polices web non préchargées : le texte s’affiche en police système (Flash of Unstyled Text), puis change de police. Préchargez les polices critiques avec rel="preload" et utilisez font-display: optional ou swap.

Publicités et iframes sans dimensions réservées : réservez toujours un espace avec min-height ou un conteneur d’aspect ratio fixe.

Bannières de cookies qui poussent le contenu : placez-les en position: fixed au bas de l’écran plutôt qu’en haut.

Sur un e-commerce AEM spécifiquement

Lazy loading des composants AEM : les composants chargés dynamiquement (recommandations produits, avis clients) doivent avoir un conteneur avec hauteur réservée pour éviter le CLS.

Images DAM : configurez des rendus webp dans les profils de traitement DAM. Les images servies via Dynamic Media ou Scene7 peuvent être optimisées avec des paramètres d’URL (?fmt=webp&wid=800).

Scripts tiers : tagmanager, chat, A/B testing — chargez-les en async ou defer, après les ressources critiques. Chaque script tiers peut contribuer à l’INP.

Conclusion

Améliorer les Core Web Vitals sur un e-commerce n’est pas un projet one-shot : c’est un travail continu, car chaque déploiement peut réintroduire des régressions. Intégrez Lighthouse CI dans votre pipeline et définissez des seuils de blocage. Une alerte à chaque déploiement vaut mieux qu’une mauvaise surprise dans Google Search Console.