Les 3 métriques Core Web Vitals en 2026
Avant d'optimiser, il faut comprendre ce que Google mesure réellement. Les CWV ne sont pas des métriques Lighthouse — ce sont des métriques de terrain, mesurées sur de vrais utilisateurs via le Chrome UX Report (CrUX).
Lighthouse mesure des métriques lab dans un environnement contrôlé. Les Core Web Vitals qui comptent pour le ranking sont les métriques field du CrUX — mesurées sur de vrais utilisateurs Chrome. Un score Lighthouse 95 ne garantit pas de bons CWV terrain si votre JS est lourd pour les appareils mobiles bas de gamme.
Optimiser le LCP : image hero et première image produit
Sur une boutique e-commerce, le LCP est presque toujours une image. Voici les leviers les plus efficaces :
Preload de l'image LCP
Le navigateur découvre l'image LCP tard dans le parsing du HTML. Un preload explicite dans le <head> réduit le LCP de 200 à 800ms selon les cas :
<link rel="preload" as="image"
href="/img/hero-product.webp"
imagesrcset="/img/hero-product-480.webp 480w,
/img/hero-product-800.webp 800w"
imagesizes="(max-width:600px) 480px, 800px"
fetchpriority="high" />Format WebP et AVIF
AVIF offre 30 à 50% de compression supplémentaire par rapport à WebP sur les photos de produits. Sur PrestaShop 8, la génération AVIF est native. Sur PS 1.7, il faut passer par Cloudflare Polish ou un pipeline d'optimisation côté serveur.
Dimensionnement explicite
Toutes les images doivent avoir des attributs width et height explicites en HTML. Sans ça, le navigateur ne peut pas réserver l'espace avant le chargement — ce qui déclenche à la fois un LCP tardif et un CLS élevé.
CDN avec edge caching
Cloudflare avec Tiered Caching réduit la latence de 40 à 70% pour les utilisateurs éloignés du serveur d'origine. La configuration correcte des Cache-Control headers est essentielle pour que les assets statiques soient servis depuis l'edge.
Corriger le CLS : stabilité visuelle
Le CLS est souvent le plus facile à corriger une fois qu'on sait où regarder. Les coupables habituels sur une boutique e-commerce :
- Bannières de cookies / popups qui apparaissent après le premier rendu et poussent le contenu vers le bas. Solution : les rendre en position fixed ou les afficher en overlay sans modifier le flux du document.
- Images sans dimensions — le cas le plus fréquent. Chaque image doit avoir width et height dans le HTML, même si CSS les redimensionne ensuite via aspect-ratio.
- Fonts Google chargées de manière asynchrone — le FOUT (Flash of Unstyled Text) génère un layout shift. Solution : font-display: swap avec preload de la font principale.
- Publicités et iframes — les ad units de taille dynamique sont des générateurs de CLS. Réservez l'espace avec un conteneur min-height avant que la pub charge.
Améliorer l'INP : réactivité des interactions
L'INP est la métrique la plus technique à optimiser. Elle mesure le délai entre une interaction utilisateur (clic sur "Ajouter au panier", saisie dans la recherche) et le prochain rendu visible.
Identifier les tâches longues
Le Chrome DevTools Performance panel est votre meilleur allié. Cherchez les "Long Tasks" — toute tâche JavaScript dépassant 50ms sur le thread principal. Sur une boutique PrestaShop typique, les coupables sont souvent :
- Les scripts de tracking tiers (GA4, Meta Pixel, Criteo) qui s'exécutent sur le thread principal
- Les modules PS de recherche instantanée mal optimisés
- Les scripts de gestion du panier synchrones
Différer les scripts non critiques
// Charger les scripts de tracking après l'interaction utilisateur
// ou après un délai post-chargement
setTimeout(() => {
loadGoogleAnalytics();
loadMetaPixel();
}, 3000);
// Encore mieux : charger après la première interaction
document.addEventListener('pointerdown', loadTracking, { once: true });Web Workers pour les calculs lourds
Les calculs de prix avec remises, les filtres de catalogue côté client, les suggestions de recherche — tout ce qui bloque le thread principal plus de 50ms doit migrer vers un Web Worker. Sur PS 8, certains modules de recherche supportent déjà cette architecture.
Outils de mesure recommandés
- PageSpeed Insights — combine données Lighthouse (lab) et CrUX (field). C'est la référence pour voir les vrais CWV de votre boutique.
- Google Search Console → Expérience — agrégat de tous vos CWV en field data, par URL. Indique exactement quelles pages sont "Poor".
- WebPageTest — pour des analyses filmstrip détaillées et la simulation de connexions 3G/4G.
- Chrome DevTools → Performance — pour identifier les Long Tasks et les goulots d'étranglement JS spécifiques.
Sur ShoemaniaQ.com, après optimisation complète : LCP passé de 4.8s à 1.2s, CLS de 0.24 à 0.01, INP de 380ms à 44ms. Score PageSpeed mobile de 42 à 96. Le trafic organique a augmenté de 180% dans les 3 mois suivants.