Core Web Vitals PrestaShop : optimiser LCP, INP et CLS pour le SEO

Pourquoi les Core Web Vitals sont devenus incontournables pour votre boutique PrestaShop

Depuis que Google a intégré les Core Web Vitals comme signal de classement en juin 2021, la performance de votre site n'est plus un luxe technique — c'est un levier SEO direct. En tant que consultant spécialisé PrestaShop, je constate chaque semaine des boutiques e-commerce qui perdent des positions faute d'avoir pris ce sujet au sérieux.

Les chiffres parlent d'eux-mêmes : selon une étude Google/Deloitte publiée sur web.dev, une amélioration de seulement 0,1 seconde du temps de chargement peut augmenter les conversions de 8,4 % en e-commerce et de 10,1 % dans le secteur du voyage (source : web.dev — Milliseconds Make Millions). Et d'après Think with Google, 53 % des visiteurs mobiles quittent un site qui met plus de 3 secondes à charger (source : Think with Google).

Dans cet article, je vous guide pas à pas : du diagnostic de vos métriques actuelles jusqu'aux solutions concrètes, métrique par métrique, pour améliorer votre score PageSpeed et gagner en visibilité sur Google.

Les 3 Core Web Vitals en 2025 : LCP, INP et CLS

Avant de plonger dans l'optimisation, il faut comprendre précisément ce que Google mesure. Les Core Web Vitals se composent de trois métriques, chacune évaluant un aspect différent de l'expérience utilisateur. Notez que depuis mars 2024, l'INP (Interaction to Next Paint) a remplacé le FID (First Input Delay) comme métrique d'interactivité officielle (source : web.dev — INP becomes a Core Web Vital).

Source des seuils : web.dev — Web Vitals. Pour réussir l'évaluation, au moins 75 % des visites doivent atteindre le seuil "Bon" au 75e percentile des données utilisateur réelles.

L'impact réel des Core Web Vitals sur le référencement e-commerce

Soyons clairs : les Core Web Vitals ne vont pas, à eux seuls, propulser une page vide en première position. Google reste un moteur qui classe d'abord la pertinence du contenu. Mais dans un secteur concurrentiel comme le e-commerce, où des dizaines de boutiques proposent des produits similaires, ces métriques deviennent un facteur de départage décisif.

Voici ce que les données nous montrent :

1. Selon le HTTP Archive et le rapport CrUX 2025, seulement 48 % des sites mobiles et 56 % des sites desktop réussissent l'évaluation Core Web Vitals — contre 32 % mobile en 2021 (source : HTTP Archive — Web Almanac 2025). Passer dans le bon groupe vous donne déjà un avantage sur la moitié de vos concurrents.
2. D'après Google Search Central, les signaux d'expérience de page, dont les CWV, sont utilisés comme facteur de classement. À qualité de contenu égale, le site le plus rapide et le plus stable sera favorisé (source : Google Search Central).
3. Les taux de rebond augmentent de 103 % lorsque le temps de chargement passe de 1 à 2 secondes supplémentaires, et les conversions chutent de 4,42 % pour chaque seconde additionnelle entre 0 et 5 secondes (source : Huckabuy — Page Speed Statistics).

Pour un site PrestaShop qui génère 50 000 € de CA mensuel, améliorer le temps de chargement de 0,1 seconde pourrait donc représenter plus de 4 000 € de revenus supplémentaires par mois. Ce n'est pas théorique — c'est mathématique.

Étape 1 : Diagnostiquer vos Core Web Vitals actuels

Avant toute optimisation, je commence toujours par un diagnostic précis. Voici les outils que j'utilise systématiquement lors d'un audit SEO de boutique PrestaShop :

1. PageSpeed Insights (pagespeed.web.dev) — Donne à la fois les données terrain (CrUX, utilisateurs réels) et les données de laboratoire (Lighthouse). C'est l'outil de référence car il utilise les mêmes données que Google pour le classement.
2. Google Search Console — Le rapport "Signaux Web essentiels" identifie les URL problématiques regroupées par type de problème (LCP lent, CLS élevé, INP insuffisant). C'est la vue la plus fiable pour prioriser vos corrections.
3. Lighthouse (dans Chrome DevTools, onglet "Performance") — Parfait pour un diagnostic page par page avec des recommandations détaillées et actionnables.
4. Chrome UX Report (CrUX) — Les données réelles de vos visiteurs Chrome, agrégées sur 28 jours. Accessible via BigQuery ou PageSpeed Insights.

Mon conseil : ne vous fiez jamais uniquement au score Lighthouse (données de laboratoire). Ce qui compte pour Google, ce sont les données terrain du CrUX. Un score Lighthouse de 90 avec un LCP terrain à 4 secondes ne vous protège pas.

Quelles pages tester en priorité ?

Sur une boutique PrestaShop, concentrez votre diagnostic sur ces pages stratégiques :

• La page d'accueil (souvent la plus lourde à cause des sliders et modules)
• Les pages catégories (listing produits avec de nombreuses images)
• Les fiches produits (images HD, variations, modules de cross-selling)
• Les pages CMS principales (vos pages de services et contenus SEO)

Étape 2 : Optimiser le LCP — le chargement du contenu principal

Le LCP est souvent la métrique la plus problématique sur PrestaShop. D'après le HTTP Archive, seulement 48 % des origines atteignent un bon score LCP (source : HTTP Archive 2025). Sur les boutiques e-commerce, c'est encore pire à cause des images produits lourdes et des nombreux modules.

Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible dans le viewport. Sur PrestaShop, c'est généralement l'image du slider hero, l'image produit principale, ou un grand bloc de texte. Selon web.dev, il faut examiner l'intégralité du processus de chargement pour optimiser efficacement le LCP (source : web.dev — Optimize LCP).

Les 4 piliers de l'optimisation LCP sur PrestaShop

1. Réduire le TTFB (Time to First Byte)
   • Activez le cache Smarty dans le back-office PrestaShop (Paramètres avancés > Performance)
   • Utilisez un hébergement avec PHP 8.1+ et OPcache activé
   • Activez la compression Gzip ou Brotli au niveau serveur
   • Configurez le cache HTTP (headers Cache-Control) pour les ressources statiques
2. Optimiser les images
   • Convertissez vos images au format WebP (compression 25 à 35 % meilleure que le JPEG)
   • Utilisez des dimensions adaptées : pas de photo 4000×3000 px affichée en 400×300 px
   • Implémentez le lazy loading natif (loading="lazy") sur toutes les images sauf la hero
   • Ajoutez fetchpriority="high" sur l'image LCP pour indiquer au navigateur de la prioriser
3. Éliminer les ressources bloquantes
   • Activez la combinaison et minification CSS/JS dans le back-office (CCC — Combine, Compress, Cache)
   • Différez le JavaScript non critique avec defer ou async
   • Extrayez le CSS critique (above-the-fold) et chargez le reste en asynchrone
   • Évaluez chaque module installé : chacun ajoute potentiellement du CSS et du JS
4. Utiliser un CDN
   • Configurez un CDN pour servir les fichiers statiques (images, CSS, JS) depuis des serveurs géographiquement proches de vos visiteurs
   • PrestaShop permet nativement de définir un domaine CDN dans Paramètres avancés > Performance > Serveurs de médias

Étape 3 : Optimiser l'INP — la réactivité aux interactions

L'INP (Interaction to Next Paint) a remplacé le FID en mars 2024 et mesure la réactivité de votre site à toutes les interactions utilisateur — pas seulement la première. C'est une métrique plus exigeante que le FID car elle prend en compte le délai d'entrée, le temps de traitement ET le délai de présentation avant la prochaine mise à jour visuelle.

Sur PrestaShop, les problèmes d'INP viennent principalement de :

• Du JavaScript tiers (analytics, chat en ligne, pixels de tracking, modules marketing)
• Des gestionnaires d'événements longs (click handlers sur les filtres, les variations produits)
• De la sur-utilisation de jQuery et des modules qui chargent leur propre version

Solutions concrètes pour améliorer l'INP

1. Auditez vos scripts tiers — Chaque script de tracking ou widget externe bloque potentiellement le thread principal. Chargez-les avec async ou defer, et préférez le chargement différé après interaction utilisateur pour les widgets non critiques (chat, avis clients).
2. Fragmentez les tâches longues — Si un gestionnaire d'événement prend plus de 50 ms, découpez-le en tâches plus petites avec requestAnimationFrame ou scheduler.yield() pour libérer le thread principal.
3. Réduisez le nombre de modules — Sur PrestaShop, chaque module peut injecter du JavaScript sur chaque page. Auditez vos modules et désactivez ceux que vous n'utilisez plus. J'ai vu des boutiques avec 80+ modules dont la moitié étaient inactifs mais continuaient de charger des scripts.
4. Optimisez les filtres à facettes — Les modules de navigation à facettes sont souvent les pires coupables. Assurez-vous que le filtrage utilise des requêtes AJAX sans recharger toute la page.

Étape 4 : Optimiser le CLS — la stabilité visuelle

Le CLS mesure les décalages de mise en page inattendus. Vous savez, ce moment agaçant où vous allez cliquer sur un bouton et une image qui finit de charger décale tout le contenu — vous cliquez sur le mauvais lien. C'est exactement ce que Google pénalise.

D'après les données du CrUX, le CLS est la métrique la plus difficile à optimiser : seulement 46 % des origines atteignent le seuil "Bon" (source : DebugBear — Hardest CWV Metric). Les images non dimensionnées sont responsables d'environ 60 % des problèmes de CLS.

Checklist CLS pour PrestaShop

1. Dimensionnez toutes vos images
   • Ajoutez systématiquement les attributs width et height sur chaque balise <img>
   • Utilisez la propriété CSS aspect-ratio pour réserver l'espace avant le chargement
   • Dans PrestaShop, vérifiez les templates Smarty de votre thème : les fichiers product-miniature.tpl, product-cover-thumbnails.tpl et les templates de slider sont souvent les coupables
2. Contrôlez le chargement des polices
   • Utilisez font-display: swap dans vos déclarations @font-face pour éviter le texte invisible
   • Préchargez vos polices principales avec <link rel="preload" as="font">
   • Utilisez les propriétés size-adjust, ascent-override et descent-override pour faire correspondre la police de repli à votre police personnalisée — cela peut réduire le CLS lié aux polices de 70 %
3. Réservez l'espace pour le contenu dynamique
   • Les bannières de cookies, les modules d'avis clients et les pop-ups de newsletter sont des générateurs de CLS classiques
   • Utilisez des conteneurs avec des dimensions fixes (min-height) pour les zones où du contenu sera injecté dynamiquement
   • Pour les bannières de cookies, préférez un positionnement fixe en bas de page (position: fixed) qui ne décale pas le contenu
4. Évitez l'injection de contenu au-dessus du viewport
   • Les modules qui insèrent des éléments dans le header (barre de livraison, promotions) après le chargement initial sont dévastateurs pour le CLS
   • Intégrez ces éléments directement dans le template HTML plutôt que via JavaScript

Optimisations avancées spécifiques à PrestaShop

Au-delà des trois métriques individuelles, voici les optimisations avancées que je mets en place systématiquement sur les boutiques PrestaShop que j'accompagne :

Configuration du back-office Performance

• Smarty : passez en mode "Jamais recompiler" en production et activez le cache
• CCC : activez la combinaison et la minification pour le CSS et le JavaScript. Attention : la compression HTML "haut risque" peut casser certains modules — je recommande de la laisser désactivée
• Cache : activez le cache de PrestaShop et optez pour un système comme Memcached ou Redis si votre hébergeur le propose

Optimisation du thème

• Auditez votre fichier theme.yml : chaque fichier CSS ou JS déclaré est chargé sur toutes les pages
• Utilisez le chargement conditionnel : certains scripts ne sont nécessaires que sur certaines pages (slider uniquement sur la home, zoom uniquement sur les fiches produits)
• Compilez et minifiez vos assets avec Webpack — le thème Classic de PrestaShop utilise déjà Webpack, profitez-en pour tree-shaker votre JavaScript

Optimisation serveur

• PHP 8.1 minimum avec OPcache activé — le gain est significatif par rapport à PHP 7.4
• MySQL/MariaDB : configurez le query cache et optimisez vos tables régulièrement
• HTTP/2 ou HTTP/3 : le multiplexage des requêtes améliore le chargement parallèle des ressources
• Compression Brotli (si supportée) pour des fichiers texte 15 à 20 % plus petits que Gzip

Mesurer l'impact : avant/après en chiffres

Pour illustrer concrètement l'impact de ces optimisations, voici les résultats typiques que j'observe sur les boutiques PrestaShop après un travail complet sur les Core Web Vitals :

Les effets sur le SEO ne sont pas immédiats — comptez 2 à 4 semaines pour que Google réévalue vos signaux d'expérience de page via le CrUX (cycle de 28 jours de collecte). Mais les effets sur le taux de rebond et les conversions se voient souvent dès les premiers jours.

Les erreurs les plus fréquentes que je rencontre

Après avoir audité des dizaines de boutiques PrestaShop, voici les erreurs récurrentes qui plombent les Core Web Vitals :

• Trop de modules installés — Chaque module ajoute son propre CSS et JavaScript, même sur les pages où il n'est pas utilisé. Une boutique avec 60+ modules actifs aura presque toujours un LCP supérieur à 4 secondes.
• Images non optimisées — Des photos produits uploadées directement depuis l'appareil photo, en JPEG 5000×4000 px à 3 Mo pièce, affichées en 300×300 px.
• Pas de lazy loading — Toutes les images de la page (y compris celles tout en bas) chargées au premier affichage, alors que seule l'image visible au-dessus de la ligne de flottaison est critique.
• Scripts tiers non contrôlés — Google Analytics, Facebook Pixel, Google Ads, chat en ligne, widgets d'avis… tous chargés en synchrone dans le <head> au lieu d'être différés.
• Thème non optimisé — Certains thèmes PrestaShop premium embarquent des frameworks CSS entiers (Bootstrap complet + leur propre framework) quand seule une fraction est réellement utilisée.

Si vous reconnaissez votre boutique dans cette liste, un audit SEO complet de votre PrestaShop est le point de départ indispensable avant toute optimisation.