[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"in-situ-overrides-\u002Fblog\u002Fprestashop\u002Fcore-web-vitals-pagespeed-90":21,"$fxYH8t7nWrPNEi3AWoDlyC8GKq3Zcw493Eo_cJLSEfiA":26,"$fonjche6f7QA5Su_c-6PxpuZDqFJJ76I80Pz0r1RuVaw":31,"i18n-alternates-_root-fr":28,"$fIs0dh7fuovvwHZADsactr4Cln73M2KPCFick9JMrMG0":57,"$fO0ESFrZEw1QJxd_gHdKU7Qy0sPkojjyQCm_buh8HZSU":61,"$fNV0gIFxVud0AjfmqZsazWbsZnQcG3B_3n0c8SXlfV3w":123,"$fiMYp06gWRXQg2pxtLSstIVzkZJn0f-01dYiVyTrGuxI":124},{"theme":4},{"colors":5,"typography":12,"ui":16,"defaultColorMode":20},{"primary":6,"secondary":7,"background":8,"foreground":9,"headerBg":8,"footerBg":10,"topBarBg":6,"topBarText":11},"#7C3AED","#10B981","#0F0F1A","#F8FAFC","#07070F","#ffffff",{"fontFamily":13,"fontUrl":14,"baseFontSize":15},"'Inter', system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap","16px",{"borderRadius":17,"contentWidth":18,"shadow":19},"lg","7xl",true,"light",{"ok":19,"isEmployee":22,"count":23,"overrides":24,"css":25},false,0,[],"",{"tree_loaded":19,"found":22,"kind":27,"id":28,"path":25,"path_fr":25,"pilier_slug":25,"pilier_slug_fr":25,"slug":25,"name":25,"description":25,"meta_title":25,"meta_description":25,"breadcrumb":29,"children":30},"category",null,[],[],{"tree_loaded":19,"found":19,"kind":32,"id":33,"path":34,"path_fr":34,"pilier_slug":34,"pilier_slug_fr":34,"slug":34,"name":35,"description":36,"meta_title":37,"meta_description":38,"breadcrumb":39,"children":41},"pilier",556,"prestashop","PrestaShop","Architecture, développement et performance PrestaShop.","PrestaShop — Blog CodeMyShop","Articles PrestaShop : architecture headless, développement de modules, performance, CI\u002FCD.",[40],{"id":33,"slug":34,"path":34,"label":35},[42,47,52],{"id":43,"slug":44,"path":45,"label":46},567,"architecture","prestashop\u002Farchitecture","Architecture",{"id":48,"slug":49,"path":50,"label":51},568,"developpement","prestashop\u002Fdeveloppement","Développement",{"id":53,"slug":54,"path":55,"label":56},569,"performance","prestashop\u002Fperformance","Performance",{"academy":58,"blog":59,"expertise":60},[],[],[],{"id":62,"canonicalInnerPath":63,"indexable":19,"title":64,"h1":64,"category":34,"categoryName":35,"pillarName":35,"subcategory":25,"slug":65,"coverImage":66,"thumbnailImage":66,"content":67,"visuels":68,"faq":69,"metaDescription":115,"active":19,"datePublished":116,"dateUpdated":117,"readingTime":118,"mentor":28,"alternates":119,"langsWithContent":121,"audioEnabled":22,"audioUrl":25,"author":28},15,"prestashop\u002Fcore-web-vitals-pagespeed-90","Core Web Vitals PrestaShop : protocole pour atteindre 90+ Pagespeed","core-web-vitals-pagespeed-90","\u002Fblog-covers\u002F74b8418636ba.webp","\u003Cp class=\"lead\">Votre boutique \u003Cstrong>PrestaShop\u003C\u002Fstrong> 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 \u003Cstrong>Core Web Vitals\u003C\u002Fstrong> — 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.\u003C\u002Fp>\n\n\u003Cp>Nous allons couvrir les trois métriques qui comptent en 2026 — LCP, CLS et INP —, identifier les cinq problèmes structurels des thèmes \u003Ca href=\"\u002Fblog\u002Fprestashop\u002Fperformance\u002Fdocker-vps-deploy-production\" title=\"Docker PrestaShop VPS : déployer en production sans stress\">PrestaShop\u003C\u002Fa> classiques, puis dérouler un protocole en trois phases que vous pouvez appliquer dès aujourd'hui sur votre boutique.\u003C\u002Fp>\n\n\u003Ch2>Les 3 Core Web Vitals en 2026 : ce qui a changé pour PrestaShop\u003C\u002Fh2>\n\u003Cp class=\"article-nav-context\" style=\"font-size:0.9em;color:#64748b;margin:0.5em 0 1.5em;\">Cet article fait partie de notre dossier \u003Ca href=\"\u002Fblog\u002Fprestashop\u002F\" title=\"Tous nos articles PrestaShop Headless\">PrestaShop Headless\u003C\u002Fa> › \u003Ca href=\"\u002Fblog\u002Fprestashop\u002Fperformance\u002F\" title=\"Articles performance\">performance\u003C\u002Fa>.\u003C\u002Fp>\n\n\n\u003Cp>Depuis mars 2024, Google a remplacé le First Input Delay (FID) par l'\u003Cstrong>Interaction to Next Paint (INP)\u003C\u002Fstrong>. 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 \u003Cem>toutes\u003C\u002Fem> 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.\u003C\u002Fp>\n\n\u003Cp>Les seuils à retenir :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>LCP (Largest Contentful Paint)\u003C\u002Fstrong> : 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).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>CLS (Cumulative Layout Shift)\u003C\u002Fstrong> : inférieur à 0,1 — mesure la stabilité visuelle de la page pendant le chargement.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>INP (Interaction to Next Paint)\u003C\u002Fstrong> : inférieur à 200 ms — la réactivité perçue à chaque interaction (clic, tap, saisie clavier).\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Selon \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fcore-web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\">Google Search Central\u003C\u002Fa>, 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.\u003C\u002Fp>\n\n\u003Ch2>Les problématiques CWV typiques d'un PrestaShop non optimisé\u003C\u002Fh2>\n\n\u003Ctable class=\"article-table\">\n\u003Cthead>\n\u003Ctr>\u003Cth>Problématique\u003C\u002Fth>\u003Cth>Cause principale\u003C\u002Fth>\u003Cth>Impact métier\u003C\u002Fth>\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>LCP supérieur à 4 secondes sur mobile\u003C\u002Ftd>\u003Ctd>Slider homepage avec images PNG\u002FJPG non compressées servies sans CDN, souvent en 1920×800 px sans srcset responsive\u003C\u002Ftd>\u003Ctd>53 % des visiteurs mobiles abandonnent après 3 secondes de chargement (source : Google). Perte directe de trafic et de CA.\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>CLS supérieur à 0,25 au chargement\u003C\u002Ftd>\u003Ctd>Calcul asynchrone des prix TTC\u002FHT via JavaScript — le bloc prix se redimensionne après le rendu initial, décalant tout le contenu en dessous\u003C\u002Ftd>\u003Ctd>Expérience dégradée : l'utilisateur clique sur le mauvais élément, taux de rebond en hausse, perte de confiance.\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>INP supérieur à 500 ms sur les fiches produit\u003C\u002Ftd>\u003Ctd>Listeners jQuery hérités des modules tiers (comparateur de prix, pop-ups newsletter, sliders de produits associés) qui bloquent le thread principal\u003C\u002Ftd>\u003Ctd>L'ajout au panier semble « gelé » pendant une demi-seconde — le client doute et quitte. INP « Poor » sur le rapport CrUX.\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>CSS et JS render-blocking\u003C\u002Ftd>\u003Ctd>Les thèmes classiques PrestaShop chargent 15 à 30 fichiers CSS\u002FJS en synchrone dans le <head>, incluant des librairies rarement utilisées (Font Awesome complet, jQuery UI, Fancybox)\u003C\u002Ftd>\u003Ctd>Le First Contentful Paint est retardé de 2 à 4 secondes. Google PageSpeed signale systématiquement « Eliminate render-blocking resources ».\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Images non optimisées (absence de WebP et lazy-load défaillant)\u003C\u002Ftd>\u003Ctd>Le CMS sert les images uploadées en format original (JPG\u002FPNG) sans conversion WebP côté serveur. Le lazy-loading natif est mal implémenté ou absent sur les images above-the-fold.\u003C\u002Ftd>\u003Ctd>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.\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003Ch2>Protocole d'optimisation en 3 phases\u003C\u002Fh2>\n\n\u003Cp>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 \u003Ca href=\"\u002Fblog\u002Fseo\u002Fautomatisation\u002Fpipeline-automatise-resultats\" title=\"Pipeline SEO automatisé avec Claude : méthode et résultats concrets pour PrestaShop\">résultats\u003C\u002Fa> mesurables à chaque étape.\u003C\u002Fp>\n\n\u003Ch3>Phase 1 : Audit — mesurer avant d'agir\u003C\u002Fh3>\n\n\u003Col>\n\u003Cli>\u003Cstrong>Google Search Console → rapport Core Web Vitals\u003C\u002Fstrong> : identifiez les URLs en statut « Poor » et « Needs Improvement ». Priorisez par volume de trafic.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fpagespeed\u002Finsights\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights\u003C\u002Fa>\u003C\u002Fstrong> : lancez un test sur vos 5 templates critiques (accueil, catégorie, fiche produit, panier, checkout). Notez le LCP, CLS et INP pour chacun.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>CrUX Dashboard (Chrome UX Report)\u003C\u002Fstrong> : 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.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Chrome DevTools → onglet Performance\u003C\u002Fstrong> : 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.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Cp>Dans un projet récent pour un client dans le secteur de la mode (catalogue de 3 500 références sur \u003Ca href=\"\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fdocker-headless-multi-conteneurs\" title=\"Docker PrestaShop Headless : Architecture multi-conteneurs pour la production\">PrestaShop\u003C\u002Fa> 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.\u003C\u002Fp>\n\n\u003Ch3>Phase 2 : Quick wins — gains immédiats sans refonte\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>Compression Brotli\u002FGzip sur nginx\u003C\u002Fstrong> : activez \u003Ccode>brotli on;\u003C\u002Fcode> et \u003Ccode>brotli_types text\u002Fhtml text\u002Fcss application\u002Fjavascript application\u002Fjson image\u002Fsvg+xml;\u003C\u002Fcode>. Gain typique : 20 à 30 % de réduction du poids transféré.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Cache navigateur agressif\u003C\u002Fstrong> : configurez des headers \u003Ccode>Cache-Control: public, max-age=31536000, immutable\u003C\u002Fcode> sur les assets statiques (CSS, JS, images, fonts). Sur PrestaShop, activez le CCC (Combine, Compress & Cache) dans Paramètres avancés → Performances.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Preconnect CDN et polices\u003C\u002Fstrong> : ajoutez \u003Ccode><link rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.google.com\" crossorigin>\u003C\u002Fcode> et équivalent pour votre CDN dans le \u003Ccode><head>\u003C\u002Fcode>. Cela réduit le LCP de 100 à 300 ms en éliminant le temps de résolution DNS et de négociation TLS.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Conversion WebP des images\u003C\u002Fstrong> : utilisez \u003Ccode>cwebp\u003C\u002Fcode> 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.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Dimensions explicites sur les images et iframes\u003C\u002Fstrong> : attribuez \u003Ccode>width\u003C\u002Fcode> et \u003Ccode>height\u003C\u002Fcode> à chaque balise \u003Ccode><img>\u003C\u002Fcode> pour éliminer les décalages CLS. Réservez l'espace du bloc prix côté CSS avec une hauteur minimale.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Selon l'étude Google\u002FDeloitte de 2020, régulièrement citée par \u003Ca href=\"https:\u002F\u002Fweb.dev\u002Fvitals\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">web.dev\u003C\u002Fa>, 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.\u003C\u002Fp>\n\n\u003Ch3>Phase 3 : Optimisations structurelles — l'avantage headless\u003C\u002Fh3>\n\n\u003Cp>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'\u003Cstrong>architecture headless PrestaShop + Nuxt 3\u003C\u002Fstrong> offre un avantage décisif.\u003C\u002Fp>\n\n\u003Cp>Avec un frontend \u003Cstrong>Nuxt 3 en SSR\u003C\u002Fstrong> (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 : \u003Cstrong>91 sur mobile, 98 sur desktop\u003C\u002Fstrong> après la migration headless.\u003C\u002Fp>\n\n\u003Cp>Voici la configuration \u003Ca href=\"\u002Fdictionnaire\u002Fnginx\" title=\"Définition : Nginx\" class=\"dict-link\">nginx\u003C\u002Fa> qui a fait la différence sur les pages blog — le LCP était systématiquement dégradé par l'image de couverture des articles :\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>Servir les images statiques directement via nginx\u003C\u002Fstrong> : le répertoire \u003Ccode>\u002Fblog-covers\u002F\u003C\u002Fcode> est configuré comme un alias statique nginx avec cache longue durée. L'image ne passe jamais par le runtime Node.js\u002FNuxt — 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.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Critical CSS inline\u003C\u002Fstrong> : Nuxt 3 extrait automatiquement le CSS critique et l'inline dans le \u003Ccode><head>\u003C\u002Fcode>. Le reste est chargé en \u003Ccode>async\u003C\u002Fcode>. Aucun CSS render-blocking.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Hydratation sélective\u003C\u002Fstrong> : 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.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Pour comprendre en détail comment cette architecture headless se met en place, j'ai documenté le processus complet dans mon article \u003Ca href=\"\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fhub-pro-headless-nuxt-docker\">Hub Pro headless : Nuxt 3, Docker et PrestaShop découplé\u003C\u002Fa>. Et si vous voulez automatiser les tests de performance dans votre pipeline, l'article sur le \u003Ca href=\"\u002Fblog\u002Fprestashop\u002Fdeveloppement\u002Fcicd-github-actions-headless-nuxt\">CI\u002FCD avec GitHub Actions pour PrestaShop headless\u003C\u002Fa> explique comment intégrer Lighthouse CI pour bloquer un déploiement si le score PageSpeed régresse.\u003C\u002Fp>\n\n\u003Ch2>Comparatif avant\u002Faprès : résultats mesurables\u003C\u002Fh2>\n\n\u003Ctable class=\"article-table\">\n\u003Cthead>\n\u003Ctr>\u003Cth>Solution appliquée\u003C\u002Fth>\u003Cth>Complexité\u003C\u002Fth>\u003Cth>Gain estimé sur le score PageSpeed\u003C\u002Fth>\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>Activation CCC PrestaShop + compression Gzip nginx\u003C\u002Ftd>\u003Ctd>Faible\u003C\u002Ftd>\u003Ctd>+5 à +10 points (réduction du poids CSS\u002FJS de 25 %)\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Conversion WebP systématique + lazy-load natif corrigé\u003C\u002Ftd>\u003Ctd>Faible\u003C\u002Ftd>\u003Ctd>+8 à +15 points (LCP amélioré de 0,5 à 1,5 s)\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Suppression des modules JS tiers non essentiels + defer des scripts restants\u003C\u002Ftd>\u003Ctd>Moyenne\u003C\u002Ftd>\u003Ctd>+10 à +20 points (INP divisé par 2 à 3)\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Compression Brotli + preconnect CDN + cache navigateur immutable\u003C\u002Ftd>\u003Ctd>Faible\u003C\u002Ftd>\u003Ctd>+5 à +8 points (TTFB et transfert réduits)\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Migration headless Nuxt 3 SSR + images servies en statique nginx\u003C\u002Ftd>\u003Ctd>Élevée\u003C\u002Ftd>\u003Ctd>+25 à +40 points (refonte structurelle : SSR, critical CSS inline, zéro render-blocking)\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003Cp>Sur le Hub Pro alexandrecarette.fr, le cumul de ces optimisations a produit les résultats suivants :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Score mobile\u003C\u002Fstrong> : 55-62 → \u003Cstrong>91\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Score desktop\u003C\u002Fstrong> : 72 → \u003Cstrong>98\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>LCP mobile\u003C\u002Fstrong> : 4,1 s → \u003Cstrong>1,1 s\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>CLS\u003C\u002Fstrong> : 0,28 → \u003Cstrong>0,02\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>INP\u003C\u002Fstrong> : 380 ms → \u003Cstrong>95 ms\u003C\u002Fstrong>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cblockquote class=\"expert-quote\">\n\u003Cp>\"Good page experience involves more than \u003Ca href=\"\u002Fdictionnaire\u002Fcore-web-vitals\" title=\"Définition : Core Web Vitals\" class=\"dict-link\">Core Web Vitals\u003C\u002Fa>. 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.\"\u003C\u002Fp>\n— \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fcore-web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\">Google Search Central\u003C\u002Fa>, \u003Ccite>Core Web Vitals & Page Experience\u003C\u002Fcite> (2024)\n\u003C\u002Fblockquote>\n\n\u003Ch2>Conclusion : la performance n'est pas un luxe, c'est un levier de conversion\u003C\u002Fh2>\n\n\u003Cp>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 \u003Cstrong>headless PrestaShop + Nuxt 3\u003C\u002Fstrong> offre un avantage structurel que les thèmes monolithiques ne pourront jamais égaler.\u003C\u002Fp>\n\n\u003Cp>Vous souhaitez savoir où se situent les Core Web Vitals de votre boutique PrestaShop et quels leviers prioriser ? Je propose un \u003Cstrong>audit CWV personnalisé\u003C\u002Fstrong> : 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 : \u003Ca href=\"mailto:contact@alexandrecarette.fr\">contact@alexandrecarette.fr\u003C\u002Fa>\u003C\u002Fp>\n\n\u003Cdiv class=\"article-sources\">\n\u003Ch3>Sources et références\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fweb.dev\u002Fvitals\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">Web Vitals — web.dev (Google)\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fcore-web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\">Core Web Vitals & Page Experience — Google Search Central\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fweb.dev\u002Farticles\u002Finp\" target=\"_blank\" rel=\"noreferrer noopener\">Interaction to Next Paint (INP) — web.dev\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fahrefs.com\u002Fblog\u002Fcore-web-vitals\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">Core Web Vitals & SEO: Everything You Need to Know — Ahrefs Blog\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fpagespeed\u002Finsights\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights — Google Developers\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\u003Cdiv style=\"background:#f8fafc;border-left:4px solid #4F46E5;padding:16px 20px;margin:24px 0;\">\u003Cp style=\"margin:0;font-size:14px;\">\u003Cstrong>Approfondir dans l'Academy\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp style=\"margin:4px 0 0;font-size:13px;\">\u003Ca href=\"\u002Facademy\u002Fseo-technique-prestashop\" style=\"text-decoration:underline;color:#4F46E5;\">Module : SEO Technique pour PrestaShop →\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fdiv>\n\n\u003Cdiv class=\"articles-lies\" style=\"margin:2em 0;padding:1.5em;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;\">\n\u003Ch3 style=\"margin:0 0 0.8em 0;font-size:1em;color:#334155;\">Articles dans le même univers\u003C\u002Fh3>\n\u003Cul style=\"margin:0;padding-left:1.2em;list-style:disc;\">\n\u003Cli>\u003Ca href=\"\u002Fblog\u002Fprestashop\u002Fperformance\u002Fcore-web-vitals-prestashop-pagespeed-95\">Core Web Vitals PrestaShop : passer de 30 à 95 sur PageSpeed\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fblog\u002Fprestashop\u002Fperformance\u002Fprestashop-hosting-ovh-guide-complet-ecommercants\">Prestashop hosting OVH : guide complet pour e-commerçants\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fblog\u002Fprestashop\u002Fperformance\u002Fdocker-vps-deploy-production\">Docker PrestaShop VPS : déployer en production sans stress\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete\">Sylius rachète PrestaShop : ce que ça change pour vous\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>",[],[70,73,76,79,82,85,88,91,94,97,100,103,106,109,112],{"q":71,"a":72},"Qu'est-ce que les Core Web Vitals ?","Les Core Web Vitals sont trois métriques de performance mesurées par Google : LCP (Largest Contentful Paint) qui mesure la vitesse d'affichage du contenu principal, CLS (Cumulative Layout Shift) qui évalue la stabilité visuelle, et INP (Interaction to Next Paint) qui quantifie la réactivité du site. Depuis 2021, Google les intègre dans son algorithme de classement mobile et desktop.",{"q":74,"a":75},"Un score PageSpeed sous 70 est-il grave pour le SEO ?","Oui, car Google pénalise les sites mobiles lents depuis le Core Web Vitals Update de 2021. Les scores sous 70 sont classifiés comme « faibles » et entraînent une perte de visibilité notamment sur mobile où 60 % du trafic provient. Un passage de 55 à 91 entraîne généralement un gain de 15-25 % de trafic organique selon les audits sectoriels.",{"q":77,"a":78},"Pourquoi PrestaShop est-il naturellement lent ?","PrestaShop charge plusieurs modules par défaut, utilise une architecture PHP monolithique, et les thèmes classiques embarquent du JavaScript inutile. Le système de cache natif est insuffisant sur mobile, et la plupart des images de produits ne sont pas optimisées. Ajouter à cela des plugins tiers souvent mal codés, et vous obtenez facilement un score mobile de 40-60.",{"q":80,"a":81},"Comment diagnostiquer les problèmes de performance de ma boutique ?","Utilisez Google PageSpeed Insights qui détaille LCP, CLS et INP, puis cross-check avec Chrome DevTools (onglet Performance) pour identifier les fichiers JavaScript\u002FCSS bloquants et les images non optimisées. Vérifiez aussi votre cache navigateur, la compression gzip, et le temps de réponse serveur — ces trois éléments représentent 80 % des gains possibles.",{"q":83,"a":84},"Quel est le principal problème d'affichage (LCP) sur PrestaShop ?","L'image hero du slider de la homepage se charge souvent sans lazy loading et sans format optimisé (WebP), ce qui repousse le LCP à 3-4 secondes. Les fonts Google non critiques bloquent aussi l'affichage. La solution est de servir l'image en WebP avec preload critique et charger les fonts non-essentielles en asynchrone.",{"q":86,"a":87},"Comment réduire le CLS (décalages visuels) ?","Le CLS vient généralement de bannières publicitaires, widgets de chat, ou carousels qui se chargent après le contenu principal. Fixez la hauteur des conteneurs d'images et vidéos, chargez les publicités en offscreen, et remplacez les carrousels auto-play par des versions plus stables. Sur PrestaShop, c'est souvent un problème de thème — auditez les règles CSS et supprimez les `height: auto` non justifiées.",{"q":89,"a":90},"Qu'est-ce que l'INP et pourquoi c'est important depuis 2024 ?","L'INP mesure le délai entre votre clic et la réponse du site (ex : clic sur « Ajouter au panier »). En 2024, Google l'a intégré aux métriques prioritaires car c'est un signal d'une boutique réactive. Sur PrestaShop, réduisez l'INP en optimisant le JavaScript côté client, en minimisant le PHP serveur, et en utilisant un CDN pour les assets statiques.",{"q":92,"a":93},"Faut-il passer au headless pour atteindre 90+ ?","Non, c'est suffisant mais pas obligatoire. Avec l'optimisation nginx, le cache étage, et une compression d'images agressive, une PrestaShop classique peut atteindre 85-88. Pour dépasser 90 régulièrement, le headless (ex : Nuxt 3 + API PrestaShop) est plus prévisible car il élimine le rendu PHP côté client et permet une meilleure gestion du JavaScript.",{"q":95,"a":96},"Quel est le meilleur format d'image pour PrestaShop ?","WebP pour les navigateurs modernes (gagnez 30-40 % de poids), avec fallback JPEG. Compressez aussi les images : une photo produit ne doit pas dépasser 200 KB en WebP. Utilisez des images responsives avec srcset et lazy loading natif (`loading=\"lazy\"`). Les thèmes qui envoient des images 1200x1200px pour les afficher 300x300px perdent facilement 1-2 secondes sur LCP.",{"q":98,"a":99},"Quel plugin ou extension choisir pour optimiser PrestaShop ?","Évitez les solutions tout-en-un (souvent lentes elles-mêmes). Préférez Autoptimize pour minifier CSS\u002FJS, Imagify ou TinyPNG pour les images, et mettez en place un vrai cache (Redis ou Memcached) plutôt qu'un module PHP. L'investissement d'une heure en configuration cache vaut plus que 10 plugins mal intégrés.",{"q":101,"a":102},"Faut-il configurer nginx soi-même ou faire appel à un expert ?","Si vous êtes sur un VPS géré, vous pouvez configurer nginx via des guides standards (gzip, expires headers, compression brotli). Si vous êtes sur un hébergement mutualisé sans accès root, ce n'est pas possible — demandez à votre hébergeur d'activer la compression. L'optimisation nginx seul apporte 5-10 points de gain sur PageSpeed.",{"q":104,"a":105},"Quels sont les plugins PrestaShop qui ralentissent le plus ?","Les modules de chat live, les systèmes de recommandation produit mal optimisés, et les solutions de paiement à l'ancienne. Même un bon module ralentit si sa version est obsolète. Auditez régulièrement vos modules et désactivez les inutilisés — chaque module actif consomme du cache et du rendu serveur.",{"q":107,"a":108},"En combien de temps peut-on passer de 55 à 90+ PageSpeed ?","Si vous commencez de zéro : 3-4 semaines pour une refonte d'images + cache + minification, puis 2-3 semaines si migration headless. Une boutique simple peut atteindre 85 en une semaine avec les optimisations basiques. L'expérience montre que 80 % des gains viennent des trois premiers jours (cache, images, fonts).",{"q":110,"a":111},"Faut-il viser 100\u002F100 ou 90 est-il suffisant ?","90+ est le seuil « vert » reconnu par Google et suffit pour une bonne visibilité SEO. Atteindre 98-100 demande des efforts disproportionnés (optimisation des tiers, assets ultra-légers) pour un gain SEO marginal. Concentrez-vous sur la stabilité à 90+ sur mobile et desktop plutôt que de chasser les points supplémentaires.",{"q":113,"a":114},"Après optimisation, comment maintenir un bon score PageSpeed ?","Auditez mensuellement via PageSpeed Insights, surveillez les Core Web Vitals dans Google Search Console, et mettez à jour régulièrement les images produits et plugins. Mettez en place une gouvernance : tout nouveau module doit passer un audit PageSpeed avant activation en production. Un site oublié revient souvent de 90 à 70 en 6 mois sans maintenance.","Core Web Vitals PrestaShop : protocole complet pour passer de 55 à 90+ sur PageSpeed mobile. LCP, CLS, INP — audit, corrections et résultats chiffrés.","2026-03-17T08:00:00.000Z","2026-04-09T05:02:14.000Z",10,{"fr":120},"\u002Fblog\u002Fprestashop\u002Fcore-web-vitals-pagespeed-90",[122],"fr",[],[125,128],{"id":62,"title":64,"category":34,"subcategory":25,"slug":126,"segment":65,"categoryPath":34,"path":63,"linkRewrite":127,"excerpt":115,"coverImage":66,"thumbnailImage":66,"nuxtUrl":120,"indexable":19,"datePublished":116,"dateUpdated":117,"readingTime":62,"faqCount":62},"performance--core-web-vitals-pagespeed-90","prestashop--performance--core-web-vitals-pagespeed-90",{"id":129,"title":130,"category":34,"subcategory":25,"slug":131,"segment":132,"categoryPath":34,"path":133,"linkRewrite":134,"excerpt":135,"coverImage":136,"thumbnailImage":136,"nuxtUrl":137,"indexable":19,"datePublished":138,"dateUpdated":139,"readingTime":140,"faqCount":62},12,"Construire une usine à contenu SEO avec PrestaShop, Claude, Python","developpement--pipeline-seo-claude-python","pipeline-seo-claude-python","prestashop\u002Fpipeline-seo-claude-python","prestashop--developpement--pipeline-seo-claude-python","Pipeline SEO automatisé avec PrestaShop, Claude IA et Python : de 3h30 à 22 min par article. Architecture complète, prompt engineering et résultats sur 6 mois.","\u002Fblog-covers\u002Fa3f61043052f.webp","\u002Fblog\u002Fprestashop\u002Fpipeline-seo-claude-python","2026-03-16T13:00:00.000Z","2026-04-08T07:50:41.000Z",13]