Core Web Vitals PrestaShop : le protocole pour atteindre 90+ sur Google PageSpeed
prestashop

Core Web Vitals PrestaShop : le protocole pour atteindre 90+ sur Google PageSpeed

Core Web Vitals PrestaShop : protocole complet pour passer de 55 à 90+ sur PageSpeed mobile. LCP, CLS, INP — audit, corrections et résultats chiffrés.

Publié le 17 mars 2026 10 min de lecture Alexandre Carette

Votre boutique PrestaShop affiche un score PageSpeed mobile sous la barre des 70, et vous savez que Google en tient compte dans son classement depuis 2021. Après 193 projets PrestaShop livrés, j'ai constaté que 80 % des boutiques que j'audite souffrent des mêmes pathologies sur les Core Web Vitals — et que la plupart se corrigent avec un protocole méthodique plutôt qu'une liste de plugins miracles. Sur mon propre Hub Pro (alexandrecarette.fr), je suis passé d'un score mobile de 55 à 91 après migration headless et optimisation nginx. Dans cet article, je vous livre le diagnostic complet, les corrections par ordre de priorité, et les résultats mesurables que vous pouvez attendre.

Nous allons couvrir les trois métriques qui comptent en 2026 — LCP, CLS et INP —, identifier les cinq problèmes structurels des thèmes PrestaShop classiques, puis dérouler un protocole en trois phases que vous pouvez appliquer dès aujourd'hui sur votre boutique.

Les 3 Core Web Vitals en 2026 : ce qui a changé pour PrestaShop

Cet article fait partie de notre dossier PrestaShop Headlessperformance.

Depuis mars 2024, Google a remplacé le First Input Delay (FID) par l'Interaction to Next Paint (INP). Ce changement est majeur pour l'écosystème PrestaShop : là où le FID mesurait uniquement le délai de la première interaction, l'INP évalue la réactivité de toutes les interactions utilisateur pendant la session. Concrètement, un module jQuery qui bloque le thread principal pendant 400 ms à chaque clic « Ajouter au panier » passait inaperçu avec le FID — il est désormais sanctionné par l'INP.

Les seuils à retenir :

  • LCP (Largest Contentful Paint) : inférieur à 2,5 secondes — c'est le temps d'affichage de l'élément le plus volumineux visible (souvent le slider ou l'image produit principale).
  • CLS (Cumulative Layout Shift) : inférieur à 0,1 — mesure la stabilité visuelle de la page pendant le chargement.
  • INP (Interaction to Next Paint) : inférieur à 200 ms — la réactivité perçue à chaque interaction (clic, tap, saisie clavier).

Selon Google Search Central, ces métriques constituent un facteur de classement officiel. Ce n'est plus un signal secondaire : un site qui échoue sur les CWV est objectivement désavantagé dans les résultats de recherche face à un concurrent qui les passe.

Les problématiques CWV typiques d'un PrestaShop non optimisé

ProblématiqueCause principaleImpact métier
LCP supérieur à 4 secondes sur mobileSlider homepage avec images PNG/JPG non compressées servies sans CDN, souvent en 1920×800 px sans srcset responsive53 % des visiteurs mobiles abandonnent après 3 secondes de chargement (source : Google). Perte directe de trafic et de CA.
CLS supérieur à 0,25 au chargementCalcul asynchrone des prix TTC/HT via JavaScript — le bloc prix se redimensionne après le rendu initial, décalant tout le contenu en dessousExpérience dégradée : l'utilisateur clique sur le mauvais élément, taux de rebond en hausse, perte de confiance.
INP supérieur à 500 ms sur les fiches produitListeners jQuery hérités des modules tiers (comparateur de prix, pop-ups newsletter, sliders de produits associés) qui bloquent le thread principalL'ajout au panier semble « gelé » pendant une demi-seconde — le client doute et quitte. INP « Poor » sur le rapport CrUX.
CSS et JS render-blockingLes thèmes classiques PrestaShop chargent 15 à 30 fichiers CSS/JS en synchrone dans le <head>, incluant des librairies rarement utilisées (Font Awesome complet, jQuery UI, Fancybox)Le First Contentful Paint est retardé de 2 à 4 secondes. Google PageSpeed signale systématiquement « Eliminate render-blocking resources ».
Images non optimisées (absence de WebP et lazy-load défaillant)Le CMS sert les images uploadées en format original (JPG/PNG) sans conversion WebP côté serveur. Le lazy-loading natif est mal implémenté ou absent sur les images above-the-fold.Poids de page moyen supérieur à 4 Mo sur les catégories produit. Le LCP explose sur les connexions 4G dégradées, typiques du m-commerce.

Protocole d'optimisation en 3 phases

Voici le protocole exact que j'applique sur les projets clients et que j'ai utilisé pour le Hub Pro alexandrecarette.fr. Il est structuré pour produire des résultats mesurables à chaque étape.

Phase 1 : Audit — mesurer avant d'agir

  1. Google Search Console → rapport Core Web Vitals : identifiez les URLs en statut « Poor » et « Needs Improvement ». Priorisez par volume de trafic.
  2. PageSpeed Insights : lancez un test sur vos 5 templates critiques (accueil, catégorie, fiche produit, panier, checkout). Notez le LCP, CLS et INP pour chacun.
  3. CrUX Dashboard (Chrome UX Report) : vérifiez les données terrain sur 28 jours. Les données lab (Lighthouse) et les données terrain (CrUX) divergent souvent — c'est le terrain qui compte pour Google.
  4. Chrome DevTools → onglet Performance : enregistrez une session de navigation réelle sur mobile throttled (4G lente). Identifiez les Long Tasks JavaScript qui bloquent le thread principal au-delà de 50 ms.

Dans un projet récent pour un client dans le secteur de la mode (catalogue de 3 500 références sur PrestaShop 1.7), l'audit a révélé que 72 % du temps de blocage JS provenait d'un seul module tiers de filtres à facettes. Le supprimer et le remplacer par une solution native a fait passer l'INP de 620 ms à 180 ms — sous le seuil « Good » — sans aucune autre modification.

Phase 2 : Quick wins — gains immédiats sans refonte

  • Compression Brotli/Gzip sur nginx : activez brotli on; et brotli_types text/html text/css application/javascript application/json image/svg+xml;. Gain typique : 20 à 30 % de réduction du poids transféré.
  • Cache navigateur agressif : configurez des headers Cache-Control: public, max-age=31536000, immutable sur les assets statiques (CSS, JS, images, fonts). Sur PrestaShop, activez le CCC (Combine, Compress & Cache) dans Paramètres avancés → Performances.
  • Preconnect CDN et polices : ajoutez <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin> et équivalent pour votre CDN dans le <head>. Cela réduit le LCP de 100 à 300 ms en éliminant le temps de résolution DNS et de négociation TLS.
  • Conversion WebP des images : utilisez cwebp ou un module PrestaShop dédié pour servir automatiquement les images en WebP. Réduction moyenne de 25 à 35 % par rapport au JPEG, à qualité visuelle équivalente.
  • Dimensions explicites sur les images et iframes : attribuez width et height à chaque balise <img> pour éliminer les décalages CLS. Réservez l'espace du bloc prix côté CSS avec une hauteur minimale.

Selon l'étude Google/Deloitte de 2020, régulièrement citée par web.dev, chaque amélioration de 0,1 seconde du LCP augmente le taux de conversion d'environ 8 % sur mobile. Sur un site e-commerce à 50 000 € de CA mensuel, c'est 4 000 € de revenu supplémentaire par mois pour quelques heures de configuration serveur.

Phase 3 : Optimisations structurelles — l'avantage headless

Les quick wins permettent généralement de passer de 45-55 à 65-75 sur mobile. Pour franchir la barre des 90, il faut adresser les problèmes structurels — et c'est là que l'architecture headless PrestaShop + Nuxt 3 offre un avantage décisif.

Avec un frontend Nuxt 3 en SSR (Server-Side Rendering), le HTML est pré-rendu côté serveur et envoyé complet au navigateur. Le LCP ne dépend plus du temps d'exécution JavaScript client — il dépend du temps de réponse serveur (TTFB) et du poids de la page. C'est exactement ce que j'ai implémenté sur le Hub Pro, et les résultats parlent d'eux-mêmes : 91 sur mobile, 98 sur desktop après la migration headless.

Voici la configuration nginx qui a fait la différence sur les pages blog — le LCP était systématiquement dégradé par l'image de couverture des articles :

  • Servir les images statiques directement via nginx : le répertoire /blog-covers/ est configuré comme un alias statique nginx avec cache longue durée. L'image ne passe jamais par le runtime Node.js/Nuxt — elle est servie directement par nginx avec les headers de cache appropriés. Résultat : le LCP sur les pages articles est passé de 3,2 s à 1,1 s sur mobile.
  • Critical CSS inline : Nuxt 3 extrait automatiquement le CSS critique et l'inline dans le <head>. Le reste est chargé en async. Aucun CSS render-blocking.
  • Hydratation sélective : les composants purement visuels (sections témoignages, footer, FAQ) ne sont pas hydratés côté client — ils restent en HTML statique. Moins de JS = INP structurellement meilleur.

Pour comprendre en détail comment cette architecture headless se met en place, j'ai documenté le processus complet dans mon article Hub Pro headless : Nuxt 3, Docker et PrestaShop découplé. Et si vous voulez automatiser les tests de performance dans votre pipeline, l'article sur le CI/CD avec GitHub Actions pour PrestaShop headless explique comment intégrer Lighthouse CI pour bloquer un déploiement si le score PageSpeed régresse.

Comparatif avant/après : résultats mesurables

Solution appliquéeComplexitéGain estimé sur le score PageSpeed
Activation CCC PrestaShop + compression Gzip nginxFaible+5 à +10 points (réduction du poids CSS/JS de 25 %)
Conversion WebP systématique + lazy-load natif corrigéFaible+8 à +15 points (LCP amélioré de 0,5 à 1,5 s)
Suppression des modules JS tiers non essentiels + defer des scripts restantsMoyenne+10 à +20 points (INP divisé par 2 à 3)
Compression Brotli + preconnect CDN + cache navigateur immutableFaible+5 à +8 points (TTFB et transfert réduits)
Migration headless Nuxt 3 SSR + images servies en statique nginxÉlevée+25 à +40 points (refonte structurelle : SSR, critical CSS inline, zéro render-blocking)

Sur le Hub Pro alexandrecarette.fr, le cumul de ces optimisations a produit les résultats suivants :

  • Score mobile : 55-62 → 91
  • Score desktop : 72 → 98
  • LCP mobile : 4,1 s → 1,1 s
  • CLS : 0,28 → 0,02
  • INP : 380 ms → 95 ms

"Good page experience involves more than Core Web Vitals. Good stats in the Core Web Vitals report in Search Console or third-party CWV reports don't guarantee good rankings. [...] However, having good Core Web Vitals can give your site a ranking advantage over sites with poor Core Web Vitals, all other things being equal."

Google Search Central, Core Web Vitals & Page Experience (2024)

Conclusion : la performance n'est pas un luxe, c'est un levier de conversion

Les Core Web Vitals ne sont pas un exercice académique. Ce sont des métriques directement corrélées à vos revenus : chaque 0,1 seconde gagnée sur le LCP représente environ 8 % de conversions supplémentaires sur mobile. Avec 53 % des visiteurs mobiles qui abandonnent au-delà de 3 secondes, un PrestaShop non optimisé laisse littéralement de l'argent sur la table. Le protocole en trois phases — audit terrain, quick wins serveur, puis optimisations structurelles — permet de passer progressivement d'un score de 50-60 à 90+ sans tout casser du jour au lendemain. Et si votre ambition est de franchir durablement cette barre, l'architecture headless PrestaShop + Nuxt 3 offre un avantage structurel que les thèmes monolithiques ne pourront jamais égaler.

Vous souhaitez savoir où se situent les Core Web Vitals de votre boutique PrestaShop et quels leviers prioriser ? Je propose un audit CWV personnalisé : analyse de vos 5 pages critiques, identification des 3 corrections à plus fort impact, et estimation du gain en score et en taux de conversion. Contactez-moi : contact@alexandrecarette.fr

Sources et références

Questions fréquentes

Tout ce que vous devez savoir sur ce sujet.

Un projet PrestaShop ?

Discutons-en directement.

★★★★★

193 projets livrés

Gratuit & sans engagement — réponse sous 24h

Alexandre Carette

Alexandre Carette

Expert PrestaShop & Architecture E-commerce

Développeur PrestaShop freelance avec 10 ans d'expérience et 193 projets livrés. Je conçois des architectures headless Nuxt + PrestaShop, des pipelines DevOps Docker/CI-CD et des outils d'automatisation IA pour mes clients e-commerce.