Points clés
- Les principales causes de lenteur des boutiques Shopify : des images trop lourdes, un excès de scripts d’applications, du JavaScript bloquant le rendu et des thèmes obsolètes.
- Vérifiez votre vitesse : utilisez le rapport de vitesse intégré à Shopify (Boutique en ligne → Thèmes → Vitesse) et PageSpeed Insights.
- À elle seule, l’optimisation des images améliore généralement le temps de chargement plus que toute autre modification.
- Fudge écrit du code Shopify natif sans la surcharge de scripts externes qui ralentit les boutiques dépendantes d’applications.
Une boutique Shopify lente coûte de l’argent. Les études montrent systématiquement que chaque seconde de chargement supplémentaire réduit les taux de conversion. Les acheteurs sur mobile, en particulier, sont impitoyables : un chargement de 3 secondes fait chuter les conversions de manière mesurable par rapport à un chargement d’une seconde. Pour découvrir les scores réels des boutiques de notre écosystème, consultez notre rapport sur L’état des performances Shopify 2026.
La bonne nouvelle : la plupart des boutiques Shopify présentent plusieurs problèmes de performance évidents auxquels il existe des solutions claires.
Comment améliorer la vitesse de mon Shopify ?
Commencez par mesurer. Ensuite, corrigez les plus gros problèmes en premier.
Si vous ne l’avez pas encore fait, commencez par compresser les images sur Shopify.
Vérifiez votre vitesse actuelle
Le rapport de vitesse intégré de Shopify : Boutique en ligne → Thèmes → cliquez sur votre thème → Vitesse. Il affiche le score de vitesse de votre thème et le compare à celui de boutiques similaires. C’est un point de départ très utile.
PageSpeed Insights : Testez votre page d’accueil, une page produit et une page de collection sur pagespeed.web.dev. Le score sur mobile est ce qui compte le plus - les performances sur ordinateur sont généralement bien meilleures. Pour un guide détaillé sur la vitesse sur mobile et l’optimisation pour les appareils lents, consultez notre guide dédié.
Lighthouse dans les Chrome DevTools : F12 → onglet Lighthouse → Générer le rapport. Offre une analyse plus détaillée que PageSpeed Insights avec des opportunités spécifiques classées par impact.
Pourquoi Shopify est-il si lent ?
Si votre boutique vous semble lente, voici les causes les plus courantes, classées par fréquence :
1. Des images trop grandes. Une image hero de 4 Mo. Des images produits uploadées avec un reflex à pleine résolution. C’est le problème de performance n°1 sur la plupart des boutiques Shopify. Une image de 2000px de large affichée sur 400px de large gaspille 70 % du téléchargement.
2. Trop d’apps. Chaque app ajoute du JavaScript. 15 apps installées peuvent signifier 15 requêtes de scripts externes distinctes avant le chargement de votre page. Même les apps que vous n’ouvrez jamais ralentissent votre boutique si leurs scripts se chargent encore.
3. Scripts bloquant le rendu. Les scripts dans <head> sans l’attribut async ou defer bloquent l’affichage de la page pendant qu’ils se téléchargent. Consultez notre guide pour optimiser les scripts qui bloquent le rendu sur Shopify.
4. Un thème obsolète ou surchargé. Les anciens thèmes Shopify (avant la version 2.0) n’ont pas été conçus pour la performance. Dawn obtient d’excellents scores ; ce n’est souvent pas le cas des anciens thèmes premium. À lire aussi : Supprimer le code inutilisé sur Shopify.
5. Vidéos intégrées sans lazy loading. Les iframes YouTube chargent des mégaoctets de scripts depuis les serveurs de Google. Sans le pattern facade, chaque page contenant une vidéo intégrée subit une grosse pénalité de performance. Voir : Mettre les vidéos en lazy loading sur Shopify.
Solution 1 — Compresser les images avant de les uploader
C’est le changement ayant le plus d’impact pour la plupart des boutiques. Tailles cibles :
- Images hero/bannières : moins de 200 Ko, largeur maximale de 2000 px
- Images de produits : moins de 150 Ko chacune
- Miniatures de collection : moins de 80 Ko
Outils :
- Squoosh.app — gratuit, sur navigateur, excellente compression avec aperçu de la qualité
- TinyPNG — gratuit, glisser-déposer, idéal pour les PNG
- Adobe Photoshop / Lightroom “Exporter pour le Web” — pour le traitement par lots
Utilisez le format WebP. Les images WebP sont généralement 25 à 35 % plus petites que les JPEG à qualité équivalente. Le CDN de Shopify sert automatiquement du WebP aux navigateurs compatibles, mais vous pouvez aussi importer directement des images WebP.
Solution 2 — Auditer et supprimer les apps inutilisées
Allez dans la section Apps de votre admin Shopify. Pour chaque app, demandez-vous : “À quand remonte la dernière fois que je m’en suis activement servi ?” Si la réponse est “il y a des mois” ou “je ne sais pas”, désinstallez-la.
Après la désinstallation, nettoyez le code restant. Consultez notre guide : comment supprimer les résidus de code d’apps sur Shopify.
À lire aussi : Supprimer le code inutilisé sur Shopify.
Règle générale : chaque app supprimée qui avait une balise script dans theme.liquid réduit le poids de votre page d’une requête HTTP externe et potentiellement de 20 à 200 Ko de JavaScript.
Solution 3 — Ajouter le lazy loading aux images
Vérifiez si votre thème inclut déjà loading="lazy" sur les images de produits et de collections. Les thèmes modernes le font. Sinon, ajoutez-le aux balises d’image dans vos fichiers de section.
Ne faites jamais de lazy loading sur votre hero image — c’est votre élément LCP et elle doit se charger immédiatement. Si c’est le cas pour la vôtre, consultez Corriger l’Eager Loading de la Bannière Hero sur Shopify.
Guide complet : comment faire du lazy loading d’images sur Shopify.
Solution 4 — Corriger les scripts bloquant le rendu
Lancez PageSpeed Insights et regardez dans “Opportunités” sous “Éliminer les ressources bloquant le rendu”. Il listera des scripts précis.
Pour chacun d’eux : ajoutez defer s’il s’agit d’un script du thème, ou async s’il s’agit d’un script d’analytics ou de marketing. Guide complet : comment optimiser les scripts bloquant le rendu sur Shopify.
Solution 5 — Utiliser un thème de base rapide
Si votre thème actuel obtient un score inférieur à 40 sur PageSpeed mobile après les correctifs ci-dessus, envisagez de passer à un thème plus rapide.
Thèmes rapides à envisager :
- Dawn — Le thème gratuit officiel de Shopify, qui obtient systématiquement plus de 90 sur PageSpeed mobile
- Craft — basé sur l’architecture de Dawn, performances fluides
- Sense — même architecture, excellents scores par défaut
La différence de performances entre un thème bien conçu (Dawn : 90+) et un thème premium plus ancien (50-60) est significative et difficile à rattraper uniquement grâce à l’optimisation.
Pourquoi Fudge est plus rapide que la personnalisation via des apps
Le plus souvent, les “fonctionnalités” des boutiques (comptes à rebours, CTA sticky, barres d’annonces, sections FAQ) sont ajoutées via des apps. Chacune rajoute des scripts et des styles externes.
Fudge intègre ces mêmes fonctionnalités directement dans votre thème avec du code natif Liquid/HTML/CSS. Aucune requête de script externe. Aucun JavaScript d’app ne se charge sur toutes les pages. Le code est optimisé pour votre thème en particulier.
Une barre d’ajout au panier sticky créée avec Fudge n’ajoute quasiment aucune charge de performance. La même solution basée sur une app va introduire une balise script, un appel API externe et potentiellement des conflits CSS supplémentaires.
Ce qu’il faut suivre après avoir amélioré les performances
Exécutez PageSpeed Insights avant et après chaque modification et notez les scores. Les métriques spécifiques à surveiller :
- LCP (Largest Contentful Paint) — devrait être inférieur à 2,5 secondes (bon)
- TBT (Total Blocking Time) — lié au JavaScript, devrait être inférieur à 200 ms (bon)
- CLS (Cumulative Layout Shift) — stabilité visuelle, devrait être inférieur à 0,1 (bon)
Ces trois indicateurs sont les Core Web Vitals de Google et affectent votre référencement en plus de l’expérience utilisateur.
À lire aussi : Minifier le CSS et le JavaScript sur Shopify.
Une fois les bases couvertes, deux leviers avancés valent le coup d’œil : l’API Speculation Rules sur Shopify, qui pré-rend la page suivante avant que le client ne clique, et les service workers pour Shopify, que la plupart des marchands devraient lire avant de se lancer.
FAQ
90+ est excellent (rare pour les boutiques en conditions réelles), 70–89 est solide, 50–69 est la moyenne pour les boutiques chargées en applications, et en dessous de 50 nécessite un travail immédiat. Dawn est livré avec des scores de 90+ ; la plupart des boutiques bien établies utilisant 5 à 10 applications se situent dans la fourchette 50–75. Ne cherchez pas à atteindre 100 à tout prix — les bénéfices sont minimes au-delà de 85.
PageSpeed Insights reflète les changements immédiatement lors du test suivant. Les métriques des utilisateurs réels (Core Web Vitals de la Search Console) ont un décalage de 28 jours car il s'agit d'une moyenne mobile sur 28 jours. Ne jugez pas les améliorations sur un seul test PageSpeed — testez plusieurs fois et observez les tendances plutôt que les scores isolés.
Les paramètres de l'éditeur de thème (couleurs, polices, sections, contenu) ne sont pas transférés d'un thème à l'autre — ils sont stockés par thème. Vous devrez reconstruire la page d'accueil et les autres pages personnalisées sur le nouveau thème. Les modifications directes du code ne sont pas non plus transférées. Planifiez une migration : reconstruisez sur le nouveau thème sous forme de brouillon, puis publiez-le quand vous êtes prêt.
Moins que pour le mobile, mais oui. La majorité du trafic sur la plupart des boutiques est mobile, le mobile est donc la priorité. L'optimisation pour desktop est généralement gratuite si vous optimisez pour mobile (les images compressées et la réduction des scripts s'appliquent aux deux). N'ignorez le desktop que si vous êtes vraiment très limité en ressources — mais ce n'est presque jamais un compromis justifié.
C'est possible. Des optimisations agressives comme différer tous les scripts, supprimer ce qui semble être du code inutilisé ou retirer les styles inline peuvent casser les applications qui dépendent d'un ordre de chargement ou d'un balisage spécifique. Testez toujours vos applications après des sessions majeures d'optimisation — checkout, avis, recherche, tiroir de panier — pour confirmer qu'elles fonctionnent toujours. La solution plus profonde consiste à remplacer les widgets d'applications par des fonctionnalités natives du thème : décrivez la fonctionnalité que vous avez aujourd'hui à Fudge et il la construira sous forme de code de thème natif, éliminant totalement le poids du script de l'application.
