À retenir
- Les principales causes de lenteur des boutiques Shopify : des images trop lourdes, trop 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é de Shopify (Boutique en ligne → Thèmes → Vitesse) et PageSpeed Insights.
- L’optimisation des images améliore généralement le temps de chargement plus que toute autre modification à elle seule.
- Fudge écrit du code Shopify natif sans la surcharge des scripts externes qui ralentit les boutiques dépendantes des applications.
Une boutique Shopify lente coûte de l’argent. Les études montrent constamment que chaque seconde de chargement supplémentaire réduit les taux de conversion. Les acheteurs sur mobile, en particulier, sont impitoyables : un temps de chargement de 3 secondes fait chuter les conversions de manière mesurable par rapport à un chargement d’une seconde.
La bonne nouvelle : la plupart des boutiques Shopify rencontrent des problèmes de performance évidents, avec des solutions claires pour chacun.
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
Rapport de vitesse intégré de Shopify : Boutique en ligne → Thèmes → cliquez sur votre thème → Vitesse. Cela vous donne le score de vitesse de votre thème et le compare à des 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 collection sur pagespeed.web.dev. C’est le score mobile qui compte le plus (les performances sur desktop sont souvent bien meilleures).
Lighthouse dans les Chrome DevTools : F12 → onglet Lighthouse → Generate report. L’analyse est plus détaillée que sur PageSpeed Insights, avec des opportunités spécifiques listé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 qui a le plus d’impact pour la plupart des boutiques. Tailles recommandées :
- Images hero/bannières : moins de 200 Ko, largeur maximale 2000px
- Images produits : moins de 150 Ko chacune
- Miniatures de collections : moins de 80 Ko
Outils :
- Squoosh.app — gratuit, dans le navigateur, excellente compression avec aperçu de la qualité
- TinyPNG — gratuit, glisser-déposer, très bien pour les PNG
- Adobe Photoshop / Lightroom “Enregistrer pour le Web” — pour le traitement par lots
Utilisez le format WebP. Les images WebP sont généralement 25 à 35 % plus légères que les JPEG à qualité équivalente. Le CDN de Shopify sert automatiquement du WebP aux navigateurs compatibles, mais vous pouvez aussi uploader directement vos images en 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 la version mobile de PageSpeed après avoir appliqué les solutions ci-dessus, songez à passer à un thème plus rapide.
Thèmes rapides à envisager :
- Dawn — Le thème gratuit officiel de Shopify, qui obtient régulièrement des scores supérieurs à 90 sur mobile avec PageSpeed
- Craft — Basé sur l’architecture de Dawn, des performances très propres
- Sense — Même architecture, d’excellents scores par défaut
La différence de performance entre un thème bien codé (Dawn : 90+) et un ancien thème premium (50-60) est énorme et difficile à rattraper par la seule 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
Lancez PageSpeed Insights avant et après chaque modification et notez les scores. Les métriques spécifiques à suivre :
- 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 métriques sont les Core Web Vitals (Signaux Web Essentiels) de Google et affectent votre référencement en plus de l’expérience utilisateur.
Article lié : Minifier le CSS et le JavaScript sur Shopify.
FAQ
Un score de 90+ est excellent (rare pour les boutiques réelles), 70–89 est solide, 50–69 est la moyenne pour les boutiques avec beaucoup d'applications, et en dessous de 50 nécessite un travail immédiat. Le thème Dawn obtient des scores de 90+ de base ; la plupart des boutiques établies utilisant 5 à 10 applications se situent dans la fourchette 50–75. Ne cherchez pas à atteindre 100 — les gains sont minimes passés 85.
PageSpeed Insights reflète les changements immédiatement lors du test suivant. Les métriques réelles (les Core Web Vitals dans 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 — faites plusieurs tests et analysez les tendances, pas les scores isolés.
Les paramètres de l'éditeur de thème (couleurs, polices, sections, contenu) ne sont pas conservés d'un thème à l'autre — ils sont stockés pour chaque thème. Vous devrez reconstruire la page d'accueil et les autres pages personnalisées sur le nouveau thème. Les modifications directes de code ne sont pas transférées non plus. Prévoyez une migration : paramétrez le nouveau thème en tant que brouillon, puis publiez-le quand vous êtes prêt.
Moins que pour le mobile, mais oui. Sur la plupart des boutiques, la majorité du trafic se fait sur mobile, c'est donc la priorité. L'optimisation sur ordinateur est généralement une conséquence naturelle si vous optimisez pour mobile (les images compressées et la réduction des scripts s'appliquent aux deux). Ne négligez l'ordinateur que si vous manquez vraiment de ressources — mais ce n'est presque jamais un compromis justifié.
C'est possible. Des optimisations agressives comme le fait de différer tous les scripts, de supprimer ce qui semble être du code inutilisé ou de retirer des styles en ligne peuvent casser les applications qui dépendent d'un ordre de chargement ou d'un balisage spécifique. Testez toujours vos applications après de grosses phases d'optimisation — paiement, avis, recherche, panier latéral — pour confirmer qu'elles fonctionnent toujours. La meilleure solution reste de remplacer les widgets des applications par des fonctionnalités natives du thème : décrivez la fonctionnalité que vous avez aujourd'hui à Fudge et il l'intègrera sous forme de code natif au thème, supprimant entièrement le poids des scripts de l'application.
