Pourquoi les Core Web Vitals sont cruciaux pour Shopify
Les Core Web Vitals sont des métriques officielles de Google qui mesurent l'expérience utilisateur réelle de votre site. Depuis 2021, elles sont un facteur de classement SEO. Pour une boutique Shopify, c'est critique :
- SEO : Un bon score Core Web Vitals améliore votre positionnement Google
- Conversion : 1 seconde de chargement en moins = +7% de conversion
- UX : Un site rapide = clients satisfaits = meilleur taux de rebond
- Mobile : 85% du trafic e-commerce est mobile, où la performance est encore plus critique
Ce guide vous montre comment optimiser vos Core Web Vitals sur Shopify pour atteindre un score de 90+ et maximiser vos conversions.
Qu'est-ce que les Core Web Vitals en 2026 ?
En 2024, Google a remplacé le FID par l'INP (Interaction to Next Paint). Voici les 3 métriques Core Web Vitals en 2026 :
1. LCP - Largest Contentful Paint (Chargement)
Mesure le temps de chargement du plus gros élément visible à l'écran (image, texte, vidéo).
Sur Shopify : Le LCP est souvent l'image hero de la page d'accueil ou la photo produit principale.
2. INP - Interaction to Next Paint (Interactivité)
Mesure le temps entre une interaction utilisateur (clic, scroll) et la réponse visuelle. Remplace le FID depuis mars 2024.
Sur Shopify : L'INP mesure la réactivité du bouton "Ajouter au panier", menus déroulants, etc.
3. CLS - Cumulative Layout Shift (Stabilité)
Mesure les décalages visuels inattendus pendant le chargement. Ex: un bouton qui se déplace alors que vous allez cliquer.
Sur Shopify : Le CLS est souvent causé par les images sans dimensions, les fonts qui chargent tard, ou les banners qui s'affichent après coup.
Google mesure les données réelles (RUM)
Les Core Web Vitals sont mesurés sur vos vrais visiteurs (via Chrome User Experience Report). Un bon score en test n'est pas suffisant si vos utilisateurs réels ont une mauvaise expérience.
Mesurer vos Core Web Vitals actuels
Avant d'optimiser, mesurez vos scores actuels pour savoir où vous en êtes.
Outil 1 : PageSpeed Insights (Google)
URL : pagespeed.web.dev
L'outil officiel de Google. Il vous donne :
- Score mobile (le plus important pour e-commerce)
- Données terrain (utilisateurs réels via CrUX)
- Données labo (simulation)
- Recommandations spécifiques pour améliorer
Outil 2 : Search Console (Rapport Core Web Vitals)
Dans Google Search Console, allez dans Expérience → Core Web Vitals. Vous verrez quelles pages sont "Bonnes", "À améliorer" ou "Mauvaises".
Outil 3 : Shopify Theme Inspector (Chrome)
Extension officielle Shopify qui analyse l'impact de chaque app et section de thème sur la performance.
Installation : Chrome Web Store
Outil 4 : GTmetrix
URL : gtmetrix.com
Analyse détaillée avec waterfall, vidéo du chargement, recommandations.
Optimiser le LCP (Largest Contentful Paint)
Le LCP est souvent le problème n°1 sur Shopify. Voici comment le réduire sous 2,5s.
1. Optimiser les images
L'image hero (page d'accueil) ou la photo produit principale est généralement le LCP.
Compression avant upload
- Utilisez TinyPNG ou Squoosh pour compresser avant d'uploader
- Ciblez 80-85% de qualité (souvent invisible à l'œil)
- Taille max recommandée : 200-300 Ko par image
Format WebP/AVIF
Shopify convertit automatiquement en WebP si le navigateur le supporte. Mais uploadez déjà en WebP pour de meilleures performances :
- WebP : 25-35% plus léger que JPEG
- AVIF : 50% plus léger mais support navigateur encore limité (2026)
Dimensions exactes
Définissez toujours width et height sur vos images pour éviter le CLS.
<img src="hero.webp" width="1920" height="1080" alt="..." loading="eager">Lazy loading... sauf pour le LCP
Important : L'image LCP (hero) ne doit pas être en lazy loading. Utilisez loading="eager" ou pas d'attribut loading.
Preload de l'image LCP
Ajoutez un <link rel="preload"> dans le <head> pour l'image hero :
<link rel="preload" as="image" href="hero-image.webp" fetchpriority="high">2. Utiliser un CDN performant
Shopify utilise automatiquement un CDN (Fastly) pour servir vos images. Assurez-vous que :
- Vos images passent bien par le CDN Shopify (
cdn.shopify.com) - Vous n'uploadez pas d'images via des apps tierces qui n'utilisent pas le CDN
3. Choisir un thème léger
Le thème est le facteur n°1 de performance sur Shopify. Les thèmes lourds avec trop de fonctionnalités ralentissent le LCP.
Thèmes Shopify rapides (2026) :
- Dawn (gratuit) : Le thème par défaut Shopify, ultra-optimisé
- Sense (gratuit) : Léger et moderne
- Impulse (payant) : Performant avec bonnes fonctionnalités
- Streamline (payant) : Focus performance
Évitez les thèmes surchargés
Les thèmes avec 50+ sections et animations partout sont impressionnants en démo, mais terribles pour la performance. Privilégiez la simplicité.
4. Minimiser le CSS et JavaScript
Le CSS et JS bloquent le rendu de la page. Pour optimiser :
- Utilisez un thème moderne (Shopify 2.0) qui charge le CSS de manière asynchrone
- Évitez les thèmes avec jQuery (obsolète et lourd)
- Inline le CSS critique (above-the-fold)
Audit performance Shopify complet
Nous analysons votre boutique et optimisons vos Core Web Vitals pour un score 90+.
Demander un audit →Optimiser l'INP (Interaction to Next Paint)
L'INP mesure la réactivité du site. Un mauvais INP = boutons qui ne répondent pas, scrolling saccadé.
1. Limiter les apps installées
Chaque app Shopify ajoute du JavaScript qui bloque l'interactivité. La règle d'or : maximum 10 apps.
- 5 apps : INP ~150ms (bon)
- 10 apps : INP ~250ms (moyen)
- 15+ apps : INP >400ms (mauvais)
2. Auditer les apps avec Shopify Theme Inspector
- Installez Shopify Theme Inspector (Chrome)
- Ouvrez votre boutique
- Lancez l'inspector
- Regardez l'onglet "Apps" : il vous montre l'impact de chaque app sur la performance
- Désinstallez les apps avec un gros impact et peu d'utilité
3. Nettoyer le code des apps désinstallées
Problème courant : Quand vous désinstallez une app, son code reste souvent dans le thème.
Solution :
- Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code
- Ouvrez
theme.liquid - Cherchez des références aux apps désinstallées (ex:
privy,klaviyo) - Supprimez les scripts orphelins
4. Différer le chargement des scripts non critiques
Les scripts tiers (Facebook Pixel, Google Analytics) bloquent l'interactivité. Utilisez defer ou async :
<script src="analytics.js" defer></script>5. Éviter les mega menus trop complexes
Les menus déroulants avec 100+ liens et images ralentissent l'INP. Simplifiez votre navigation.
Optimiser le CLS (Cumulative Layout Shift)
Le CLS mesure les décalages visuels. Un mauvais CLS frustre les utilisateurs (clic sur le mauvais bouton).
1. Définir les dimensions des images
La cause n°1 du CLS : des images sans width et height. Le navigateur ne sait pas quelle place réserver.
<img src="produit.jpg" alt="..."><img src="produit.jpg" width="800" height="1000" alt="...">2. Utiliser des fonts system ou précharger les custom fonts
Les custom fonts (Google Fonts, fonts personnalisées) causent du CLS si mal implémentées.
Option 1 : Fonts system (0 CLS)
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;Option 2 : Précharger les fonts custom
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>Option 3 : font-display: swap
@font-face {
font-family: "CustomFont";
src: url("font.woff2");
font-display: swap; /* Affiche la font système en attendant */
}3. Réserver l'espace pour les éléments dynamiques
Si vous affichez une bannière de livraison gratuite ou un bandeau cookies, réservez l'espace pour éviter que le contenu ne se décale.
<div class="banner-placeholder" style="min-height: 50px;">
<!-- Contenu de la bannière chargé ici -->
</div>4. Éviter les pop-ups qui poussent le contenu
Les pop-ups doivent être en position: fixed ou absolute pour ne pas décaler le reste de la page.
5. Lazy loading des images hors écran
Activez le lazy loading pour toutes les images sauf celles visibles au chargement (hero, logo).
<img src="image.jpg" loading="lazy" width="800" height="600" alt="...">Optimisations spécifiques Shopify
1. Utiliser Shopify 2.0 (Online Store 2.0)
Shopify 2.0 apporte des améliorations performance majeures :
- Sections partout (pas seulement homepage)
- Chargement asynchrone des sections
- Meilleure gestion du CSS
Si vous êtes encore sur un ancien thème, migrez vers Shopify 2.0.
2. Activer le cache du navigateur
Shopify gère automatiquement le cache, mais vérifiez que vos assets (CSS, JS) sont bien cachés.
3. Optimiser les collections
Les pages collections avec 50+ produits peuvent être lentes. Solutions :
- Paginer à 24 produits par page
- Utiliser le lazy loading sur les images produits
- Implémenter l'infinite scroll avec pagination virtuelle
4. Désactiver les fonctionnalités non utilisées
Si votre thème a des sections que vous n'utilisez pas, supprimez-les du code pour alléger.
Thèmes Shopify les plus performants en 2026
Thèmes gratuits
🏆 Top 3 thèmes gratuits rapides
- Dawn : Score moyen 85-95 mobile. Thème de référence Shopify.
- Sense : Score moyen 80-90 mobile. Léger et élégant.
- Colorblock : Score moyen 75-85 mobile. Bon pour produits visuels.
Thèmes payants
💎 Top 3 thèmes payants rapides
- Streamline (350$) : Optimisé pour la vitesse, score 90+ possible.
- Impulse (350$) : Performance + fonctionnalités, score 80-90.
- Focal (350$) : Moderne et rapide, score 75-85.
Le thème n'est qu'une base
Même Dawn peut devenir lent si vous installez 20 apps. Le thème compte pour ~40% de la performance, les apps et le contenu pour ~60%.
Impact des apps sur les Core Web Vitals
Apps légères (impact minimal)
- Judge.me : Avis clients, bien optimisé
- Klaviyo : Email marketing, script async
- ReConvert : Post-purchase, ne charge que sur thank you page
Apps moyennes (impact modéré)
- Privy : Pop-ups, ~100ms INP
- Loox : Avis avec photos, lazy load correct
- Gorgias : Chat, bien optimisé
Apps lourdes (à éviter ou optimiser)
- Apps de page builder : PageFly, Shogun → Très lourdes, évitez si possible
- Apps de countdown : Beaucoup ajoutent du JS inutile
- Apps de quiz : Souvent mal optimisées
Cas pratique : passer de 45 à 90+ en Core Web Vitals
État initial
Boutique mode : Score PageSpeed mobile 45, Desktop 72
- LCP : 4,2s (mauvais)
- INP : 580ms (mauvais)
- CLS : 0,18 (moyen)
Actions réalisées
- Images : Compressé toutes les images (TinyPNG), converti en WebP, ajouté width/height
- Thème : Migration de thème lourd vers Dawn customisé
- Apps : Passé de 18 apps à 8 apps essentielles
- Fonts : Préchargé les fonts custom, ajouté font-display: swap
- Scripts : Différé le chargement de Facebook Pixel et Google Analytics
- Hero image : Ajouté preload pour l'image hero
Résultats après optimisation
Score PageSpeed mobile 91, Desktop 98
- LCP : 1,8s (bon) ✅
- INP : 140ms (bon) ✅
- CLS : 0,05 (bon) ✅
Impact business :
- Taux de conversion : +12%
- Taux de rebond : -18%
- Temps sur site : +25%
- Positions SEO : +3 positions moyenne sur mots-clés principaux
Erreurs courantes à éviter
1. Installer trop d'apps
Chaque app = performance dégradée. Gardez uniquement les essentielles.
2. Utiliser des thèmes surchargés
Les thèmes avec 80+ sections sont lents. Privilégiez Dawn ou des thèmes légers.
3. Négliger le mobile
85% du trafic e-commerce est mobile. Optimisez d'abord pour mobile.
4. Oublier les dimensions des images
Images sans width/height = CLS élevé. Toujours définir les dimensions.
5. Ne pas nettoyer le code des apps désinstallées
Le code reste après désinstallation. Nettoyez manuellement.
6. Lazy loading sur l'image LCP
L'image hero ne doit JAMAIS être en lazy loading.
Plan d'action : Optimiser vos Core Web Vitals en 2 semaines
Semaine 1 : Quick wins
- Mesurer les scores actuels (PageSpeed Insights)
- Compresser toutes les images (TinyPNG)
- Ajouter width/height sur toutes les images
- Désinstaller 5+ apps non essentielles
- Précharger l'image hero
- Activer lazy loading (sauf hero)
Semaine 2 : Optimisations avancées
- Nettoyer le code des apps désinstallées
- Optimiser les fonts (preload ou system fonts)
- Différer les scripts tiers (Analytics, Pixel)
- Auditer avec Shopify Theme Inspector
- Tester et mesurer les améliorations
- Monitorer en continu avec Search Console
Objectif réaliste
- Score mobile : 70-90+ (selon état initial)
- LCP : < 2,5s
- INP : < 200ms
- CLS : < 0,1
Conclusion : Optimiser vos Core Web Vitals sur Shopify n'est pas sorcier. En suivant ces recommandations, vous pouvez atteindre un score de 90+ mobile et booster vos conversions de 10-15%. Commencez par les images et les apps, puis affinez avec les optimisations avancées.
Besoin d'aide pour atteindre un score 90+ ? Notre équipe d'experts Shopify peut auditer et optimiser votre boutique pour des Core Web Vitals au top.
