--- title: "Core Web Vitals sur Shopify : comment les améliorer en 2026" description: "LCP, INP et CLS : les 3 métriques que Google mesure sur Shopify. Guide technique des vrais leviers (pas d" canonical: https://lionelz.com/fr/blog/shopify-core-web-vitals/ lang: fr --- SEO # Core Web Vitals sur Shopify : comment les améliorer en 2026 LCP, INP et CLS : les 3 métriques que Google mesure sur Shopify. Guide technique des vrais leviers (pas d'apps magiques) pour passer du rouge au vert. **Lionel Fenestraz** · 5 juin 2026 · 10 min de lecture · Mis à jour : juin 2026 Google Partner · CXL Certified Optimizer · plus de 7 ans sur Google Ads et Meta Ads ![Tableau PageSpeed Insights affichant les métriques Core Web Vitals d'une boutique Shopify](https://lionelz.com/images/blog/2026/05/shopify-image-optimization.webp) Dans cet article [Que sont les Core Web Vitals et pourquoi comptent-ils sur Shopify ?](#que-sont-les-core-web-vitals-et-pourquoi-comptent-ils-sur-shopify) [Comment améliorer le LCP sur Shopify ?](#comment-améliorer-le-lcp-sur-shopify) [Comment réduire l’INP (la métrique qui a remplacé FID) ?](#comment-réduire-linp-la-métrique-qui-a-remplacé-fid) [Comment éliminer le CLS sur Shopify ?](#comment-éliminer-le-cls-sur-shopify) [Quelles apps Shopify cassent le plus souvent les Core Web Vitals ?](#quelles-apps-shopify-cassent-le-plus-souvent-les-core-web-vitals) [Comment mesurer Core Web Vitals sur Shopify de façon fiable ?](#comment-mesurer-core-web-vitals-sur-shopify-de-façon-fiable) [Questions fréquentes](#questions-fréquentes) [Sources](#sources) Dans cet article [Que sont les Core Web Vitals et pourquoi comptent-ils sur Shopify ?](#que-sont-les-core-web-vitals-et-pourquoi-comptent-ils-sur-shopify)[Comment améliorer le LCP sur Shopify ?](#comment-améliorer-le-lcp-sur-shopify)[Comment réduire l’INP (la métrique qui a remplacé FID) ?](#comment-réduire-linp-la-métrique-qui-a-remplacé-fid)[Comment éliminer le CLS sur Shopify ?](#comment-éliminer-le-cls-sur-shopify)[Quelles apps Shopify cassent le plus souvent les Core Web Vitals ?](#quelles-apps-shopify-cassent-le-plus-souvent-les-core-web-vitals)[Comment mesurer Core Web Vitals sur Shopify de façon fiable ?](#comment-mesurer-core-web-vitals-sur-shopify-de-façon-fiable)[Questions fréquentes](#questions-fréquentes)[Sources](#sources) Revue gratuite · 30 min Je passe en revue votre site avec vous et je vous dis quoi corriger en premier. [Réserver un appel →](https://calendar.app.google/G3jeffmFY52dg38GA) Les Core Web Vitals sont les trois métriques de performance que Google mesure sur chaque page et qui pèsent dans son algorithme depuis 2021. Sur Shopify, les trois sont corrigeables, mais la plupart des boutiques les laissent au rouge parce qu’elles cherchent l’app magique avant de regarder ce que le thème charge réellement. Ce guide explique les leviers qui fonctionnent en compte réel. Je vais traiter LCP, INP et CLS séparément — ce qui cause chaque problème sur Shopify en particulier, et quelles interventions ont le meilleur retour par heure investie. > **En 30 secondes :** > > - Les 3 Core Web Vitals : LCP (<2,5 s), INP (<200 ms), CLS (<0,1) selon [web.dev/vitals](https://web.dev/articles/vitals) > - INP a remplacé FID le 12 mars 2024 — INP mesure la latence d’interaction réelle, pas juste le premier clic > - Google utilise des données de terrain (CrUX), pas de laboratoire : PageSpeed Insights montre les deux > - Sur Shopify, les 3 grandes causes sont une hero image non optimisée (LCP), des apps qui injectent du JS (INP) et des polices sans `font-display: swap` (CLS) > - Le fichier theme.liquid et les apps installées pèsent plus que n’importe quel « speed optimizer » de l’App Store --- ## Que sont les Core Web Vitals et pourquoi comptent-ils sur Shopify ? Les Core Web Vitals sont trois métriques que Google mesure sur des visites réelles via Chrome (dataset CrUX) et qu’il utilise comme signal de ranking depuis la mise à jour Page Experience de 2021. En 2024, Google a remplacé FID par INP, une métrique plus stricte parce qu’elle mesure la latence de chaque interaction, pas juste la première ([Google Search Central, 2024](https://developers.google.com/search/blog/2023/05/introducing-inp)). Pour Shopify en particulier, le problème, c’est que Google évalue la performance en production (avec apps installées, scripts de tracking, popups), pas sur un preview propre. Une boutique peut avoir un thème rapide en local et un PageSpeed Insights au rouge en production parce que les apps ajoutent 1-2 Mo de JavaScript après le deploy. Quand j’audite une boutique Shopify, la première chose que je fais ce n’est pas ouvrir PageSpeed Insights — j’ouvre [web.dev/measure](https://web.dev/measure/) sur la page produit la plus visitée et je regarde le découpage par origine pour chaque ressource. Les apps tierces représentent généralement 40-70 % du JavaScript total. Pour comprendre quelles parties du thème contrôlent réellement ces métriques dans le code, j’ai écrit un guide sur [Shopify Liquid pour le SEO](https://lionelz.com/fr/blog/shopify-liquid-seo/) qui couvre les snippets pertinents dans `theme.liquid`. --- ## Comment améliorer le LCP sur Shopify ? LCP (Largest Contentful Paint) capture le moment où l’élément le plus grand visible est peint au chargement — d’habitude la hero image produit ou la bannière principale de la home. Cible : sous 2,5 secondes au 75e percentile des visites mobiles. Sur Shopify, les deux leviers les plus rentables sont : comment l’image LCP est servie, et combien de JavaScript bloque le rendu avant de la peindre. **Optimisation de la hero image.** Presque tous les thèmes Shopify chargent la hero image sans `loading="eager"` ni `fetchpriority="high"`. Résultat : le navigateur la télécharge après des scripts non critiques. Le changer dans le snippet du hero du thème fait souvent baisser le LCP de 0,5-1,5 seconde. ``` {{ section.settings.hero_alt }} ``` **Chargement des polices.** Si votre thème charge Google Fonts via `` sans preconnect, le navigateur attend le DNS avant de télécharger. Ajouter `` dans le head économise 100-300 ms de LCP. **Apps qui bloquent le rendu.** Des apps comme Klaviyo, Privy ou les popups gratuits chargent souvent leur JS de façon synchrone. Utilisez [Chrome DevTools Coverage](https://developer.chrome.com/docs/devtools/coverage) pour voir quel % du JS de chaque app s’exécute vraiment avant le LCP. Si l’usage est <5 %, le defer est sûr. Pour aller plus loin sur l’optimisation des images Shopify, j’ai écrit un guide dédié : [optimisation des images sur Shopify](https://lionelz.com/fr/blog/shopify-optimizacion-imagenes/). --- ## Comment réduire l’INP (la métrique qui a remplacé FID) ? INP (Interaction to Next Paint) mesure la latence entre une action utilisateur (clic, tap, frappe clavier) et la prochaine peinture du navigateur. Cible : sous 200 ms au 75e percentile. INP est plus stricte que FID parce qu’elle mesure toutes les interactions sur la durée d’une session, pas juste la première ([web.dev INP, 2024](https://web.dev/articles/inp)). Qu’est-ce qui fait qu’un Shopify a un mauvais INP ? Le problème, ce n’est presque jamais le thème — c’est ce que chargent les apps en arrière-plan pendant que l’utilisateur navigue. Trois patterns que je vois à chaque audit : - **Apps de chat (Tidio, Gorgias, Shopify Inbox).** Elles chargent des scripts lourds qui exécutent des listeners de scroll, des mutation observers et traitent des événements sur le main thread. Quand l’utilisateur tape « ajouter au panier », le navigateur ne peut pas répondre tant que l’app n’a pas fini. - **Pixels de tracking dupliqués.** Comptes avec GA4, Meta Pixel, TikTok Pixel et un pixel custom dans GTM. Chacun ajoute 50-150 ms à la file d’attente des tâches du navigateur. - **Apps de reviews et galeries.** Loox, Judge.me, Yotpo. Elles construisent du DOM dynamiquement avec des centaines d’éléments, créant des long tasks de 200-400 ms à chaque fois que l’utilisateur interagit. **La solution concrète :** auditer les apps avec DevTools Performance → enregistrer 30 secondes de navigation normale → trier les long tasks par origine. Les apps avec >300 ms de blocking time par session sont des candidates claires à la désinstallation ou à une configuration différée. --- ## Comment éliminer le CLS sur Shopify ? CLS (Cumulative Layout Shift) compte chaque saut du contenu visible pendant le chargement. Cible : sous 0,1. Un CLS élevé arrive quand une image, une police ou une bannière s’insère sans que le navigateur ait réservé l’espace. Les causes les plus fréquentes sur Shopify sont au nombre de trois, et chacune a une correction directe : **Images sans `width` ni `height`.** Si vous ajoutez des images sans ces attributs, le navigateur ne sait pas combien d’espace réserver et reflowe quand le fichier arrive. La solution : toujours utiliser les attributs via Liquid, comme dans le snippet de la section LCP plus haut. Avec Shopify, les propriétés `image.width` et `image.height` sont natives, donc pas d’excuse pour les omettre. **Polices sans `font-display: swap`.** Si votre thème charge Google Fonts sans cette propriété, le texte ne s’affiche pas au début puis saute quand la police arrive. Vérifier le CSS des fonts : ``` @font-face { font-family: 'VotreFont'; src: url('{{ "votre-font.woff2" | asset_url }}') format('woff2'); font-display: swap; } ``` **Bannières et popups qui apparaissent tardivement.** Apps de cookies, popups de remise ou bannières de livraison gratuite qui s’injectent après le rendu du contenu principal génèrent des shifts visibles. Deux options : réserver l’espace en CSS (un container avec `min-height` même vide) ou charger l’app avant le contenu principal (pire pour le LCP, meilleur pour le CLS — il faut choisir). --- ## Quelles apps Shopify cassent le plus souvent les Core Web Vitals ? J’ai audité des dizaines de boutiques Shopify et il y a un groupe d’apps qui reviennent comme les principales causes de mauvais CWV. Ce n’est pas que les apps soient mauvaises ; c’est que leur impact CWV s’accumule. Les **apps de chat** (Shopify Inbox, Tidio, Gorgias, Re:amaze) apportent 100-300 Ko de JS chacune, et le widget se charge même si l’utilisateur ne l’ouvre pas. Mitigation : utiliser un déclencheur retardé pour ne l’afficher qu’après 5 s ou 50 % de scroll. Puis viennent les **apps de reviews** (Loox, Judge.me, Yotpo), qui chargent des widgets lourds de galerie et carrousel et bloquent souvent l’INP quand l’utilisateur scroll les avis. - **Page builders (PageFly, Shogun).** Elles génèrent un markup dense avec beaucoup d’éléments imbriqués et des scripts inline. Peuvent ajouter 500 Ko-1 Mo de HTML rien que sur la home. - **Apps d’upsell et popups (Privy, Bold, ReConvert).** Leur JS s’exécute sur le main thread pendant des événements critiques (ajout au panier, checkout). Souvent les principaux responsables de mauvais INP. - Et le piège silencieux : les **apps de tracking supplémentaire** (Triple Whale, Northbeam, Lifesight). Chacune ajoute son propre pixel par-dessus les natifs. Pattern typique que je vois au quotidien : boutique avec 8-12 pixels différents qui tournent à chaque pageview, sans que le propriétaire sache que la moitié est encore active. La règle pratique : si une app ne génère pas plus de 1 500 €/mois de valeur directe (ventes attribuables, leads qualifiés ou gain de temps quantifiable), elle ne justifie pas le coût de performance qu’elle ajoute. Audit trimestriel — vous trouvez toujours 2-3 apps oubliées qui restent à tourner sans usage. --- ## Comment mesurer Core Web Vitals sur Shopify de façon fiable ? PageSpeed Insights affiche deux types de données : laboratoire (test synthétique) et terrain (CrUX, données réelles utilisateurs Chrome). Google utilise CrUX pour le ranking, pas Lighthouse. La différence compte : une boutique peut avoir 95/100 en Lighthouse et rouge en CrUX si les utilisateurs réels ont des mobiles lents ou des connexions mauvaises. Comment les distinguer ? Dans PageSpeed Insights : - **CrUX data** apparaît en haut comme « Discover what your real users are experiencing » — c’est ce que Google voit. - **Lighthouse score** apparaît en bas — utile pour diagnostiquer des problèmes, pas pour évaluer le ranking. Pour accéder au dataset CrUX directement, [Search Console](https://search.google.com/search-console/) a un rapport Core Web Vitals qui groupe les URL par statut (Bon/À améliorer/Faible). C’est la même donnée que Google utilise, agrégée par groupes d’URL similaires. Trois outils que je combine dans un audit initial : Outil Ce qu’il mesure Quand l’utiliser PageSpeed Insights LCP/INP/CLS terrain + labo Diagnostic initial d’une URL Search Console Core Web Vitals Statut agrégé par groupes d’URL Détecter quel template (produit, collection, blog) est le pire Chrome DevTools Performance Traces détaillées des long tasks Identifier quelle app ou script cause chaque problème Si votre boutique a >5 000 visites/mois, les données terrain (CrUX) seront fiables. En dessous, PageSpeed Insights peut manquer d’échantillons et l’indicateur reste à « Insufficient data ». Les CWV ne sont qu’une partie du SEO technique — pour la vue d’ensemble, [SEO Shopify pour ecommerce 2026](https://lionelz.com/fr/blog/shopify-seo-ecommerce-2026/) couvre le reste de la checklist. --- ## Questions fréquentes ### Les thèmes payants Shopify améliorent-ils automatiquement les Core Web Vitals ? Pas automatiquement. Des thèmes premium comme Impulse, Symmetry ou Prestige sont bien construits, mais la performance réelle dépend des apps installées et de la config. J’ai vu des boutiques avec des thèmes à 300 € dans un pire état que des boutiques sur Dawn (gratuit). Le thème établit la base ; les apps déterminent le résultat final. ### Est-ce que ça vaut le coup de payer pour une « speed optimizer app » du Shopify App Store ? Presque jamais. La plupart font trois choses : lazy loading d’images (qu’on peut faire avec `loading="lazy"` en Liquid), preconnect aux domaines externes (1 ligne dans theme.liquid) et minification que Shopify applique déjà. Je ne recommande des apps que quand il y a un problème spécifique hors de votre contrôle (ex. apps tierces qui ne respectent pas le defer). ### Comment Shopify Markets affecte-t-il les Core Web Vitals ? Shopify Markets ajoute un overhead minimal (géolocalisation, currency switcher) mais introduit généralement un petit impact INP si le currency switcher s’exécute avant le paint. La règle : vérifier après l’activation de Markets — les CWV peuvent baisser de 5-10 points si l’implémentation est agressive. ### Combien de temps Google met-il à mettre à jour les Core Web Vitals après mes changements ? CrUX se met à jour avec une fenêtre de 28 jours de données, donc l’effet complet d’un changement se voit à 28-30 jours. Search Console le reflète généralement à 4-6 semaines. PageSpeed Insights montre les données les plus récentes mais toujours avec la fenêtre de 28 jours, donc les changements apparaissent graduellement. ### Que faire si j’ai peu de trafic et pas de données CrUX ? Si la boutique a <5 000 visites/mois, Google utilise des signaux proxy et le ranking peut ne pas vous pénaliser pour des CWV « non mesurables ». Dans ce cas, optimisez pour le Lighthouse score et le reste viendra avec le trafic. Pour une revue systématique du thème complet avant de scaler, un [audit SEO technique Shopify](https://lionelz.com/fr/audit-seo/) couvre les CWV à côté du reste. ### INP affecte-t-il le desktop ou seulement le mobile ? INP affecte les deux, mais Google pondère plus fortement le mobile depuis 2021 (mobile-first indexing). En pratique, optimiser l’INP pour mobile résout souvent le desktop aussi. --- ## Sources 1. web.dev. _Core Web Vitals._ [https://web.dev/articles/vitals](https://web.dev/articles/vitals). 2024. 2. web.dev. _Interaction to Next Paint (INP)._ [https://web.dev/articles/inp](https://web.dev/articles/inp). 2024. 3. web.dev. _Interaction to Next Paint becomes a Core Web Vital on March 12._ [https://web.dev/blog/inp-cwv-march-12](https://web.dev/blog/inp-cwv-march-12). 2024. 4. Google Search Central. _Page experience in Google Search results._ [https://developers.google.com/search/docs/appearance/page-experience](https://developers.google.com/search/docs/appearance/page-experience). 2025. 5. Shopify Dev. _Improve theme performance._ [https://shopify.dev/docs/themes/best-practices/performance](https://shopify.dev/docs/themes/best-practices/performance). 2025. --- Votre Shopify est au rouge sur les Core Web Vitals et vous ne savez pas quelle app est coupable ? Je propose des [audits SEO techniques Shopify](https://lionelz.com/fr/audit-seo/) — diagnostic complet des CWV avec identification de l’app ou du snippet exact qui cause chaque problème. 30 minutes initiales sans engagement pour voir si ça a du sens. Audit gratuit De la marge d'amélioration dans votre compte ? 30 minutes pour l'analyser. Sans engagement. [Réserver un appel →](https://calendar.app.google/G3jeffmFY52dg38GA) Sans engagement · 30 min · Google Meet Partager [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https://lionelz.com/fr/blog/shopify-core-web-vitals/) [X / Twitter](https://twitter.com/intent/tweet?url=https://lionelz.com/fr/blog/shopify-core-web-vitals/&text=Core%20Web%20Vitals%20sur%20Shopify%20%3A%20comment%20les%20am%C3%A9liorer%20en%202026) Service lié **Audit SEO** Revue technique, contenu et on-page avec des priorités claires. [Voir le service →](https://lionelz.com/fr/audit-seo/) ## Articles connexes [ ![](https://lionelz.com/images/blog/2026/09/claude-auditar-competidores-seo-mobile-hero.webp) SEO ### Auditer le SEO des concurrents avec Claude : méthode septembre 2026 ](https://lionelz.com/fr/blog/claude-auditar-competidores-seo/)[ ![](https://lionelz.com/images/blog/2026/09/shopify-site-speed-auditoria-mobile-hero.webp) SEO ### Shopify site speed : audit et correctifs réels septembre 2026 ](https://lionelz.com/fr/blog/shopify-site-speed-auditoria/)[ ![](https://lionelz.com/images/blog/2026/09/shopify-black-friday-seo-checklist-mobile-hero.webp) SEO ### Shopify Black Friday SEO : checklist technique 2026 septembre 2026 ](https://lionelz.com/fr/blog/shopify-black-friday-seo-checklist/) ![Lionel Fenestraz — Consultant Google Ads & Meta Ads Freelance](https://lionelz.com/images/lionelfenestraz.webp) Lionel Fenestraz Consultant PPC & CRO Freelance · Google Partner · CXL Certified · Google Ads Search Certified Plus de 7 ans à gérer des campagnes Google Ads et Meta Ads pour des marques de location saisonnière, B2B et ecommerce. Trilingue ES/EN/FR. [LinkedIn](https://www.linkedin.com/in/lionelfenestraz/) [À propos](https://lionelz.com/fr/a-propos/) [Certif. Google Ads ↗](https://skillshop.credential.net/20a1e11a-8586-42e3-a5ae-ac63b6074518) [Réserver un appel →](https://calendar.app.google/G3jeffmFY52dg38GA) Ils m’ont fait confiance - Logo OVO Network, client - Logo Sun Chemical, client - Logo Brildor, client - Logo Powergym, client - Logo USU, client - Logo Luman Technology, client - Logo Suites and Villas, client - Logo Chef Tours, client - Logo Trasteando, client - Logo C-System, client - Logo ConfiVet, client - Logo Luxury Homes London, client Premier appel gratuit ## Vos campagnes publicitaires _pourraient-elles mieux performer ?_ 30 minutes pour analyser votre situation et vous dire exactement ce que je changerais. Sans pitch, sans proposition commerciale. [Réserver un appel →](https://calendar.app.google/G3jeffmFY52dg38GA) 30 min · Google Meet · Sans engagement --- > Version Markdown de https://lionelz.com/fr/blog/shopify-core-web-vitals/ (même contenu que la page HTML). Index du site pour les agents : https://lionelz.com/llms.txt · contenu complet : https://lionelz.com/llms-full.txt · plan du site : https://lionelz.com/sitemap-index.xml