Core Web Vitals Shopify : passer vert en 10 minutes sans coder

Pourquoi tes Core Web Vitals te coûtent de l'argent réel

Tu vends sur Shopify mais ton LCP (Largest Contentful Paint) frôle les 4 secondes. Résultat : Google te relègue en page 2, et ton ROAS dégringole de 23 % selon les études 2025.

Mais c'est quoi, les Core Web Vitals ? Trois métriques bêtes et simples :

LCP (Largest Contentful Paint) : temps pour que le plus gros élément visible se charge. Cible : sous 2,5 secondes.

FID (First Input Delay) ou INP (Interaction to Next Paint) : délai entre ton clic et la réaction du site. Cible : sous 100 ms.

CLS (Cumulative Layout Shift) : à quel point la page se "bouge" pendant le chargement (boutons qui sautent, images qui redimensionnent). Cible : sous 0,1.

Sur Shopify, 34 % des boutiques restent en orange/rouge. Pas parce que Shopify est mauvais, mais parce qu'on laisse traîner des flics à chaque page.

LCP : attaque le problème image (c'est 90 % du temps)

La majorité de tes Core Web Vitals pourris vient d'une seule source : les images non optimisées. Shopify charge ta bannière hero en PNG 2500×1600, et boom : LCP à 3,8 secondes.

Fix #1 : compresse et redimensionne tes images

Va dans ton admin Shopify → Paramètres → Fichiers. Shopify propose un outil natif depuis 2024. Mais sois proactif :

• Bannère hero : max 1200×600 px, JPEG ou WebP, compressée à 60-70 % de qualité
• Images produit : 800×800 px (suffisant pour zoom)
• Thumbnails : 200×200 px

Utilise TinyPNG (gratuit jusqu'à 20 fichiers/mois) ou Squoosh (Google, très bon). Tu peux diviser la taille par 5-10 sans perte visible.

Fix #2 : force les images de produit en lazy load natif

Dans ton thème Shopify, repère le fichier product-grid.liquid ou product-card.liquid. Cherche la balise <img> et ajoute l'attribut natif (sans JS custom, sans coder) :

<img loading="lazy" decoding="async" src="...">

Si ton thème est récent (2024+), c'est déjà dedans. Teste avec PageSpeed Insights (google.com/pagespeed). L'outil te dit si lazy load est actif.

Fix #3 : utilise WebP automatique

Shopify serve automatiquement WebP aux navigateurs modernes si tu charges une image avec l'URL standard (sans paramètres custom). Le truc : certains thèmes surchargent ça. Va dans Apparence → Thème → Modifier le code, cherche product-image ou featured-image. Si tu vois &format=jpg en dur, supprime-le. Shopify gère le format auto.

Résultat attendu : LCP passe de 3,5s à 1,8-2,2s juste en optimisant les images. +45 % de conversions sur mobile selon un A/B test HubSpot 2025.

FID/INP : supprime les scripts lourds qui traînent

Tes boutons d'ajout au panier mettent 200 ms à réagir ? C'est un script tiers pourri ou un JS Shopify mal paramétré.

Fix #1 : désactive les apps inutiles

Va dans Admin Shopify → Apps. Dis-moi franchement : utilises-tu vraiment cette app de review avec 47 scripts de suivi ? Non ? Supprime-la. Chaque app ajoute 20-80 ms de FID en moyenne.

Prioritaire :

• Métriques/analytics : remplace Okendo par les avis natifs Shopify (200 ms économisés)
• Pop-ups : Privy, Smile → remplace par le formulaire newsletter natif Shopify (très léger)
• Chat en live : Gorgias ou Drift → rend-le invisible au démarrage, charge au premier clic

Fix #2 : reporte les scripts non-essentiels

Dans Admin Shopify → Paramètres → Fichiers → Code de pixel, tu peux ajouter manuellement du code (si tu dois vraiment). Les scripts Facebook, Google Analytics, etc. : insère-les avec l'attribut defer ou encore mieux, utilise la balise <script async>.

Mais Shopify gère ça via des outils natifs maintenant (Shopify Analytics remplace partiellement Google Analytics). Utilise ça.

Fix #3 : lighthouse API check

PageSpeed Insights (gratuit) te dit exactement quel script tue ton FID. Vise les 3-5 culprits et tu gagnes 80 ms.

Résultat attendu : FID/INP passe de 180 ms à <80 ms. Les clics sur "Add to Cart" deviennent instantanés perceptuellement.

CLS : empêche ta page de danser pendant le chargement

Le CLS est souvent ignoré, mais c'est chiant pour l'UX. Tu es en train de cliquer sur un bouton et hop, il saute de 50 px vers le bas parce qu'une image se charge.

Fix #1 : définis des dimensions explicites sur chaque image

Dans ton thème Shopify, chaque <img> de produit ou bannière doit avoir width et height en HTML :

<img src="..." width="800" height="600" alt="...">

Cela dit au navigateur "réserve cette place" avant même le chargement de l'image. Pas de saut. Shopify le fait natif depuis le thème Dawn. Si tu as un vieux thème, demande au support ou change de thème (seriously, c'est 2026, utilise Dawn ou Narrative, c'est gratuit et optimisé).

Fix #2 : réserve la place pour les polices de caractères

Si tu charges une police custom Google Fonts, elle peut causer un CLS en arrivant. Ajoute ça dans la balise <head> via Admin → Paramètres → Fichiers → Code de pixel (section header) :

<link rel="preload" as="font" href="https://fonts.googleapis.com/css2?family=..."><
font-display: swap;" crossorigin>

Cela dit au navigateur de charger la police en arrière-plan sans bloquer l'affichage.

Fix #3 : limite les annonces qui apparaissent tard

Si tu as une banneau "LIVRAISON GRATUITE" qui apparaît après 1 seconde, c'est un CLS killer. Dans ton thème, mets-le visible d'emblée ou charge-le en même temps que le contenu principal. Shopify sections permet ça natif.

Résultat attendu : CLS passe de 0,3-0,4 à <0,08 facilement.

Teste et monitore en temps réel

PageSpeed Insights est ton ami, mais attention : il teste une fois, sur une version cache. Pour du monitoring continu et gratuit :

• Google Search Console : Expérience utilisateur → Core Web Vitals. Données réelles de vrais utilisateurs. C'est la source de vérité.
• Shopify Analytics (natif, gratuit) : voir les performances par page
• Vercel Analytics : si tu veux du detail, $20/mois

Chaque lundi, ouvre Search Console et regarde si tu es passé en vert sur mobile ET desktop. Sinon, recheck tes images et scripts.

Checklist non-négociable

✅ Images produit redimensionnées max 800×800 px, compressées 60-70 % ✅ Bannière hero : max 1200×600, WebP ✅ loading="lazy" sur toutes les images ✅ Apps inutiles supprimées (vise -3 apps si t'en as 8+) ✅ Polices Google Fonts : preload + font-display: swap ✅ Chaque image : attribut width et height en HTML ✅ Test dans Search Console (pas juste PageSpeed Insights) : mobile ET desktop au vert

Pourquoi ça bosse

Google a intégré Core Web Vitals dans son algo de ranking en 2021. En 2025-2026, c'est +5 à +12 % de traffic pour les sites verts vs rouges. Sur une boutique à 100 k€/mois, ça vaut 5-12 k€/mois juste en SEO.

Mais surtout : un site rapide convertit mieux. Chaque 100 ms gagné = +1 % de conversion moyenne. Donc 1s d'amélioration sur LCP = +10 conversions/jour pour une boutique moyenne.

La bonne nouvelle : tu n'as jamais eu besoin d'un dev. Shopify a construit ça pour que tu le fasses toi-même.

---

Si tu bosse en UGC, visuels IA ou mannequins, optimiser tes Core Web Vitals = tes visuels IA chargent plus vite, ton site convertit mieux. Tu veux scaler ta création de contenus e-commerce sans que ton site soit un scooter pourri ? Teste ZeScale : génération de visuels produit et UGC en 10x moins de temps, et tu peux vraiment te focus sur le CWV.