Les Core Web Vitals ne sont pas qu’un sujet de geek. Depuis 2024, Google les utilise comme signal de classement réel sur les requêtes commerciales, et l’impact sur la conversion est mesurable : un site qui passe de 4 secondes à 2 secondes de LCP gagne typiquement entre 10 et 25 % de conversion mobile. Ce guide explique précisément les trois métriques actuelles, comment les mesurer, et comment les optimiser sur PrestaShop et WordPress en 2026.
Les trois Core Web Vitals à connaître
LCP — Largest Contentful Paint
Le LCP mesure le temps entre le début du chargement de la page et l’apparition du plus gros élément visible dans la fenêtre. Sur une boutique e-commerce, cet élément est presque toujours une image : la photo principale du produit sur une fiche, le hero de la homepage, l’image de bannière de la catégorie.
Cibles officielles Google :
- Bon : moins de 2,5 secondes
- À améliorer : entre 2,5 et 4 secondes
- Mauvais : plus de 4 secondes
CLS — Cumulative Layout Shift
Le CLS mesure la stabilité visuelle de la page pendant son chargement. Concrètement : un bouton qui se déplace après que l’utilisateur a commencé à cliquer, une image qui pousse le contenu vers le bas en arrivant tardivement, une bannière de cookies qui décale tout. Plus le score est bas, mieux c’est.
- Bon : moins de 0,1
- À améliorer : entre 0,1 et 0,25
- Mauvais : plus de 0,25
INP — Interaction to Next Paint
L’INP a remplacé le FID (First Input Delay) en mars 2024. Il mesure le délai entre l’interaction de l’utilisateur (clic, tap, frappe) et la réponse visible du navigateur, sur l’ensemble des interactions de la session — pas juste la première.
- Bon : moins de 200 ms
- À améliorer : entre 200 et 500 ms
- Mauvais : plus de 500 ms
L’INP est plus exigeant que le FID parce qu’il inclut toutes les interactions, pas seulement la première. Les sites qui passaient à peine le FID échouent souvent à l’INP, surtout WooCommerce avec ses scripts variations et ajout au panier en AJAX.
Comment mesurer ses Core Web Vitals
Quatre outils complémentaires :
- PageSpeed Insights (gratuit, par Google) — donne une note synthétique avec les recommandations spécifiques. Distingue données « lab » (test simulé) et « field » (réelles, basées sur Chrome User Experience Report)
- Lighthouse (intégré à Chrome DevTools) — audit complet en local, utile pour identifier les goulets
- Google Search Console → Expérience → Core Web Vitals — vue agrégée de votre site basée sur les données réelles des utilisateurs Chrome
- WebPageTest — test détaillé avec waterfall et choix de la connexion
Important : les données « lab » d’un test isolé ne reflètent pas ce que vivent vos utilisateurs. Les données « field » dans Search Console sont plus représentatives. C’est elles qui comptent pour Google.
Optimiser le LCP
Identifier l’élément LCP
Dans Lighthouse, la section Largest Contentful Paint element indique précisément quel élément de votre page est le LCP. Sur une fiche produit PrestaShop ou WooCommerce, c’est presque toujours la photo principale.
Optimiser les images
Trois actions essentielles :
- Convertir en WebP ou AVIF — réduit la taille de fichier de 30 à 60 % sans perte visible. Sur PrestaShop, des modules dédiés font la conversion automatique. Sur WordPress, des plugins comme ShortPixel, Imagify ou Smush.
- Servir les bonnes dimensions — n’envoyez pas une image de 2000 × 2000 pour un emplacement de 400 × 400. Utilisez
srcsetetsizespour servir l’image adaptée à chaque viewport. - Précharger l’image LCP — ajoutez
<link rel="preload" as="image">dans le<head>pour l’image principale. Le navigateur la télécharge en priorité absolue.
Activer un cache HTTP
Sur PrestaShop : cache Smarty + cache full-page via un module ou un reverse-proxy comme Varnish. Sur WordPress : un plugin de cache (LiteSpeed Cache si votre serveur tourne sous LiteSpeed Web Server, sinon WP Rocket). Le gain de LCP avec un cache HTTP correctement configuré est typiquement de 1 à 2 secondes.
Utiliser un CDN
Cloudflare, BunnyCDN, ou un CDN intégré à votre hébergeur. Pour vos images, vidéos et assets statiques. Réduit le LCP des utilisateurs géographiquement éloignés de votre serveur.
Optimiser le CLS
Le CLS est souvent le plus simple à corriger. Trois actions principales :
Toujours spécifier width et height sur les images
Le navigateur a besoin de réserver l’espace de l’image avant qu’elle soit chargée. Sans dimensions, l’espace réservé est nul et le contenu en dessous se décale quand l’image arrive.
<img src="produit.webp" width="800" height="600" alt="..." />Le rapport de dimensions est ce qui compte. Le navigateur utilisera CSS pour adapter à la taille réelle d’affichage, mais réservera un espace au bon ratio.
Réserver l’espace des bannières et popups
Les bandeaux cookies, popups newsletter, bannières d’urgence en haut de page créent du CLS s’ils s’injectent après le chargement. Solutions : les rendre côté serveur (HTML déjà présent au chargement, juste rendu visible par CSS), ou réserver la hauteur en CSS dès le début.
Charger les polices web correctement
Les FOUT (Flash of Unstyled Text) et FOIT (Flash of Invisible Text) provoquent du CLS quand la police de remplacement et la police finale ont des dimensions différentes. Solutions : font-display: swap avec un fallback bien choisi (taille proche), préchargement des polices critiques avec <link rel="preload">, ou utilisation de font-size-adjust pour aligner les métriques.
Optimiser l’INP
L’INP est le plus difficile des trois. Il dépend de la qualité du JavaScript exécuté quand l’utilisateur interagit avec la page.
Réduire le JavaScript bloquant
Auditez vos scripts tiers : analytics, chat, A/B test, retargeting, popups. Chacun ajoute du temps d’exécution sur le thread principal. Soyez impitoyables : si un script ne génère pas de revenu mesurable, supprimez-le.
Pour les scripts conservés : chargez-les en defer ou async quand c’est possible. Les balises de tracking peuvent presque toujours être différées.
Découper le JavaScript en morceaux
Sur les sites avec beaucoup de JS, le code splitting (charger uniquement le code nécessaire pour la page courante) réduit l’INP. Sur PrestaShop 8 avec ses bundles, c’est limité — sur WordPress avec des plugins lourds, c’est souvent une optimisation majeure.
Optimiser les interactions
Les interactions courantes qui plombent l’INP :
- Ajout au panier (sur WooCommerce particulièrement)
- Application d’une variation produit
- Recherche dans une mégamenu avec auto-complétion
- Application d’un filtre dans un listing produit
Pour chacune, l’optimisation passe par le profiling Chrome (Performance tab) pour identifier les fonctions lentes, puis leur refactorisation.
Spécifique PrestaShop
Sur PrestaShop, les actions les plus rentables :
- Activer le cache Smarty et la combinaison/minification des assets dans Paramètres avancés → Performance
- Compiler les templates Smarty et désactiver la recompilation à chaque visite
- Utiliser un module de génération de CSS critique pour le above-the-fold
- Auditer les modules tiers : un seul module mal codé peut ajouter 500 ms de temps serveur
Spécifique WordPress / WooCommerce
Sur WordPress, les actions principales :
- Plugin de cache obligatoire (LiteSpeed Cache, WP Rocket, W3 Total Cache)
- Audit des plugins : désactiver et supprimer ceux non utilisés
- Conversion massive des images en WebP via ShortPixel ou équivalent
- Limiter les scripts WooCommerce sur les pages où ils ne servent pas (homepage, articles de blog) — un plugin comme Asset CleanUp permet ça
- Hébergeur sérieux : sur un mutualisé bas de gamme, vous ne dépasserez jamais un score Lighthouse mobile de 50
Les erreurs fréquentes
- Optimiser uniquement la note Lighthouse desktop. Mobile est ce qui compte pour Google.
- Ignorer les données field au profit des données lab
- Installer 5 plugins de cache « pour être sûr » — ils se bagarrent et le résultat est pire
- Compresser à mort les images au point de les rendre moches — visez 75-85 % de qualité, pas plus bas
- Bloquer le JavaScript essentiel par excès de zèle (le bouton ajout panier ne marche plus)
Pour aller plus loin
Tous nos articles dédiés à la performance sont rangés dans la catégorie Performance & Core Web Vitals. Pour les solutions techniques, explorez nos modules SEO PrestaShop qui incluent des optimisations Core Web Vitals (génération CSS critique, lazy loading avancé, conversion WebP). Une boutique rapide est une boutique qui convertit — c’est probablement le meilleur investissement technique de 2026.