Améliorer les Core Web Vitals d'un site Shopify peut parfois ressembler à un travail de détective : il faut mesurer, isoler, tester et corriger. Dans cet article je partage ma méthode concrète, basée sur des audits que j'ai réalisés sur des boutiques, pour détecter et corriger les éléments qui plombent les performances (LCP, CLS, INP/FID). Je vais vous donner des outils, des techniques et des priorités claires pour remettre votre boutique sur de bons rails.
Commencer par mesurer — où se trouvent les vrais problèmes ?
Avant de toucher au code, il faut savoir où ça coince. J'utilise systématiquement ces outils :
Google PageSpeed Insights — pour un premier aperçu et les recommandations.Lighthouse (dans Chrome DevTools) — pour un audit local et des suggestions d'amélioration.Chrome User Experience Report (CrUX) — pour les données réelles utilisateurs (si disponibles).WebPageTest — pour une analyse avancée (filmstrip, waterfall, first-byte).RUM (Real User Monitoring) — si vous avez beaucoup de trafic, collecter les metrics réelles est essentiel.En pratique, je lance PageSpeed Insights sur plusieurs pages représentatives : page d'accueil, fiche produit la plus lourde, panier, collection. Les variations entre pages m'indiquent si le problème vient d'un template spécifique ou d'un asset global (ex : fonts, scripts).
Tableau rapide des Core Web Vitals et des actions typiques
| Metric | Seuils | Causes fréquentes | Actions prioritaires |
| LCP (Largest Contentful Paint) | < 2.5s (bon) | Images lourdes, chargement CSS/JS bloquant, serveur lent | Optimiser images, utiliser Shopify CDN, preload LCP image, réduire JS/CSS bloquants |
| CLS (Cumulative Layout Shift) | < 0.1 (bon) | Images sans dimensions, ads, fonts de swap, injections d'éléments late | Définir width/height, réserver espaces, utiliser font-display:swap correctement |
| INP/FID (Interaction) | FID < 100ms / INP dépend | JS long, third-party scripts | Déférer/async, code-splitting, enlever scripts inutiles |
Priorité 1 : optimiser les images (LCP souvent impacté)
Les images sont généralement les coupables n°1 sur Shopify. Voici ce que je fais :
Vérifier que les images essentielles (hero, produit) sont servies au format moderne (WebP si possible).Utiliser la dimension native : dans Liquid, je m'assure d'utiliser les filtres d'image de Shopify pour demander la taille exacte (ex: | img_url: '1024x' ) afin d'éviter de charger des images surdimensionnées.Preload de l'image LCP : j'ajoute une balise <link rel="preload" as="image" href="..."> pour l'image qui constitue le LCP.Lazy-loading pour les images non critiques : pour les images en dessous de la ligne de flottaison, activer loading="lazy".CDN et optimisation automatique : Shopify utilise son CDN, mais je vérifie aussi l'usage de services comme Cloudflare ou Imgix si utile pour transformations dynamiques.Priorité 2 : réduire le JS bloquant et l'empreinte des apps
Sur beaucoup de boutiques, les apps injectent des scripts externes qui alourdissent et bloquent le rendu. Mon approche :
Audit des apps installées : je liste celles qui ajoutent du JS sur le front (chat, analytics, recommendations) et j'évalue l'impact avec l'onglet Network / Coverage de Chrome DevTools.Déférer et asynchroniser les scripts tiers : où possible, remplacer les inclusions synchrones par async ou defer. Pour des éléments non critiques (tracking, widgets), charger après le LCP via un petit script qui ajoute dynamiquement la balise <script>.Supprimer ce qui n'est pas essentiel : j'archive ou désinstalle les apps dont les scripts pèsent trop et apportent peu de valeur.Regrouper et minifier : pour le JavaScript propre au thème, je combine et minifie les fichiers, et j'essaie d'implémenter le code critique inline minimal si nécessaire.Priorité 3 : corriger le CLS (mettre fin aux sauts de mise en page)
Les CLS sont souvent faciles à corriger si on suit quelques règles :
Déclarer la taille des images et vidéos dans le HTML/CSS pour réserver l'espace (width/height ou aspect-ratio en CSS).Réserver l'espace pour les iframes et les widgets externes (ex : chat, upsell) via containers avec hauteur minimale.Fonts : éviter les flashs de style (FOIT/FOUT). J'utilise font-display:swap et je précharge les fonts critiques avec rel="preload" si nécessaire.Garder la modification DOM après rendu au minimum : ex., éviter que des scripts injectent du contenu au-dessus du fold après chargement.Priorité 4 : optimiser le CSS et le rendu critique
Le CSS qui bloque le rendu peut fortement retarder le LCP. Mes actions :
Extraire le CSS critique (styles nécessaires pour le above-the-fold) et l'injecter inline dans le head.Charger le reste du CSS de façon différée (ex: media="print" hack puis onload pour appliquer après).Supprimer le CSS inutilisé : j'utilise Coverage dans Chrome DevTools pour identifier les règles non utilisées et j'enlève ce qui alourdit le fichier.Mettre à jour le thème : beaucoup de thèmes récents ont un code plus optimisé ; parfois une mise à jour permet un gain immédiat.Optimisations serveur et caching
Shopify gère déjà pas mal de choses côté serveur, mais il y a encore des leviers :
Activer les en-têtes de cache corrects pour assets statiques (CDN de Shopify ou Cloudflare).Vérifier le TTFB (time to first byte) avec WebPageTest ; s'il est élevé, regarder les apps qui font des requêtes serveur lors de la requête initiale ou des redirections multiples.Éviter les redirections inutiles (www vs non-www, HTTP->HTTPS mal configuré).Vérifier les fonts web — un aspect souvent négligé
Les fonts peuvent introduire des retards et des shifts. Je contrôle :
Que les fonts sont servies depuis un domaine supportant HTTP/2 ou CDN.Usage de preload pour les fonts critiques, et font-display:swap pour éviter le blocage du texte.Limiter le nombre de variantes (poids, italique) chargées sur la page initiale.Outils et techniques de debugging rapides
Chrome DevTools Performance : enregistrez une session pour voir les frames longues et les scripts qui monopolisent le thread principal.Coverage : identifiez le CSS/JS inutilisé.LightHouse dans Chrome : appliquez les recommandations, mais n'oubliez pas d'industrialiser les corrections (pas seulement corriger pour un test unique).WebPageTest filmstrip + waterfall : pour repérer exactement quand l'image LCP apparaît et quels assets la précèdent.Bonnes pratiques côté thème et Liquid
Quelques astuces Liquid que j'applique :
Charger les sections et snippets uniquement quand ils sont nécessaires (conditionnal rendering).Eviter les boucles lourdes dans le rendu du template qui génèrent beaucoup d'HTML inutile.Utiliser les placeholders et lazy-loading pour les listes de produits longues.Minimiser les inclusions d'apps via des snippets injectés ; préférer l'option "load script asynchronously" si fournie par l'app.Améliorer les Core Web Vitals sur Shopify n'est pas une magie : c'est un ensemble d'actions mesurables. En partant d'une bonne mesure, en priorisant LCP puis CLS et enfin l'interaction (INP/FID), et en ciblant images, JS tiers, CSS critique et fonts, vous pouvez obtenir des gains significatifs. Si vous voulez, je peux vous proposer une checklist prête à l'emploi ou auditer une page précise de votre boutique pour pointer les 5 corrections à lancer en premier.
