Core Web Vitals PrestaShop : passer de 30 à 95 sur PageSpeed

Vos Core Web Vitals PrestaShop sont au rouge et votre score PageSpeed plafonne à 30 ? Après 193 projets PrestaShop livrés, j'ai constaté que 8 boutiques sur 10 traînent les mêmes goulets d'étranglement : un thème surchargé, un cache mal configuré et des images non optimisées qui sabotent le LCP. La bonne nouvelle, c'est qu'on peut systématiquement remonter au-dessus de 90 sans réécrire le front.

Depuis que Google a remplacé FID par INP en mars 2024, l'enjeu n'est plus seulement d'afficher vite, mais de rester réactif tout au long de la session. Cet article décrit les problématiques que je rencontre le plus souvent en audit, puis détaille la méthode exacte que j'applique pour passer de 30 à 95 sur PageSpeed Insights — et surtout pour faire bouger l'aiguille du SEO et du taux de conversion.

Les problématiques courantes des Core Web Vitals sur PrestaShop

Cet article fait partie de notre dossier PrestaShop Headless › performance.

Diagnostic : mesurer avant d'optimiser le LCP, l'INP et le CLS

Avant de toucher une seule ligne de code, je commence toujours par établir une baseline mesurable. Sans données de départ, impossible d'objectiver les gains auprès du client. Je croise systématiquement quatre sources : PageSpeed Insights (lab), le rapport d'expérience utilisateur Chrome (CrUX, données terrain), Search Console (rapport Signaux Web essentiels) et un trace WebPageTest sur connexion 4G simulée.

Selon le rapport Web Almanac 2024 du HTTP Archive, seules 47 % des origines mobiles obtiennent un statut « bon » sur l'ensemble des Core Web Vitals — et le secteur e-commerce reste sous la moyenne. Sur PrestaShop spécifiquement, la moyenne que j'observe en audit tourne autour de 38 sur PageSpeed mobile.

1. Mesurer la page d'accueil, une catégorie peuplée et 3 fiches produit représentatives.
2. Isoler les ressources qui bloquent le rendu via l'onglet « Diagnostics » de PageSpeed.
3. Identifier le LCP element exact (souvent l'image hero ou la première image produit).
4. Tracer les long tasks supérieures à 50 ms dans Performance DevTools pour comprendre l'INP.
5. Documenter le tout dans un tableau partagé client — cela évite les débats subjectifs.

La méthode concrète pour passer de 30 à 95 sur PageSpeed

Une fois la baseline posée, j'applique toujours la même séquence — c'est ce qui fait la différence entre une optimisation cosmétique et une vraie remontée durable des Core Web Vitals PrestaShop. L'ordre compte : on attaque le serveur avant le front, sinon les gains du front sont mangés par un TTFB pourri.

• Cache full-page via un module type Hummingbird ou un reverse proxy Varnish : −60 % de TTFB en moyenne.
• Activer HTTP/2 ou HTTP/3, gzip/brotli côté Nginx, et un CDN (BunnyCDN, Cloudflare) pour les assets statiques.
• Convertir toutes les images produit en WebP ou AVIF via le module ac_smartproducts ou ImageMagick côté serveur.
• Précharger l'image LCP avec <link rel="preload" as="image"> et fixer les attributs width/height pour éliminer le CLS.
• Différer les scripts non critiques (chat, A/B testing, retargeting) avec defer ou un consent manager intelligent.
• Purger les modules natifs inutiles : Facebook pixel doublé, ps_socialfollow, ps_emailsubscription si remplacés.
• Indexer les colonnes SQL utilisées par les modules custom — j'ai déjà gagné 800 ms de TTFB juste avec un INDEX bien placé.

Dans un projet récent pour un client du secteur cosmétique haut de gamme (catalogue de 1 200 références, thème custom hérité de PrestaShop 1.7), nous sommes passés d'un score mobile de 28 à 94 en trois semaines. Le LCP est descendu de 5,2 s à 1,8 s, l'INP de 620 ms à 140 ms, et le CLS de 0,31 à 0,02. Côté business, le taux de conversion mobile a progressé de 22 % sur les 30 jours suivants — un retour sur investissement direct, mesuré dans Matomo, sans changer une virgule du tunnel d'achat.

Pour les boutiques qui ne peuvent plus avancer avec le rendu Smarty classique, l'étape suivante est l'architecture headless : PrestaShop reste le back-office, mais le front est servi par un Nuxt 3 ultra-optimisé. C'est exactement le pattern que j'utilise sur l'architecture headless PrestaShop, et c'est le socle de CodeMyShop.

Les solutions pour optimiser durablement les Core Web Vitals

« Les Core Web Vitals sont conçus pour quantifier l'expérience réelle d'une page web. Améliorer ces métriques rend votre site plus agréable à utiliser pour vos visiteurs, et permet aussi de mieux performer dans les résultats de recherche Google. »

Conclusion : la performance, un actif SEO et business

Passer de 30 à 95 sur PageSpeed n'a rien d'un coup de chance : c'est une séquence rigoureuse qui combine cache serveur, optimisation des images, purge des modules JS et — quand le thème legacy est à bout — bascule vers une architecture headless. Les Core Web Vitals sont aujourd'hui un signal SEO confirmé par Google, mais surtout un levier de conversion mesurable sur le terrain. Une boutique rapide vend mieux, indexe mieux, et fidélise davantage.

L'erreur la plus courante reste de chercher la solution miracle dans un module « speed booster » du marketplace : la performance se gagne par l'architecture, pas par un plugin. Pour aller plus loin sur l'écosystème, voir aussi la checklist SEO technique PrestaShop.

Vous souhaitez auditer les Core Web Vitals de votre boutique PrestaShop et bâtir un plan de remontée chiffré ? Discutons de votre projet : contact@alexandrecarette.fr