Points clés à retenir
- Les principales causes de lenteur des boutiques Shopify : images trop lourdes, trop de scripts d’apps, JavaScript bloquant le rendu et thèmes obsolètes.
- Vérifier votre vitesse : utilisez le rapport de vitesse intégré de Shopify (Boutique en ligne → Thèmes → Vitesse) et PageSpeed Insights.
- L’optimisation des images à elle seule améliore généralement le temps de chargement plus que n’importe quelle autre modification.
- Fudge écrit du code Shopify natif sans la charge supplémentaire de scripts externes qui ralentit les boutiques dépendantes des apps.
Une boutique Shopify lente coûte de l’argent. Les études montrent systématiquement que chaque seconde de chargement supplémentaire fait baisser le taux de conversion. Les acheteurs sur mobile, en particulier, ne pardonnent pas : un chargement de 3 secondes fait chuter les conversions de façon mesurable par rapport à un chargement d’une seconde.
La bonne nouvelle : la plupart des boutiques Shopify ont 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
Qu’est-ce qu’un « bon » score mobile PageSpeed pour une boutique Shopify ?
90+ est excellent (rare sur les vraies boutiques), 70-89 est solide, 50-69 est la moyenne pour les boutiques chargées en apps, en dessous de 50 nécessite un travail immédiat. Le thème Dawn est livré avec des scores de 90+ ; la plupart des boutiques établies utilisant 5 à 10 apps se situent entre 50 et 75. Ne cherchez pas à atteindre 100 — les gains sont minimes une fois passé 85.
Combien de temps faut-il pour voir les améliorations de vitesse après des correctifs ?
PageSpeed Insights reflète les changements immédiatement lors du test suivant. Les métriques basées sur les 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 regardez les tendances, pas les scores isolés.
Est-ce que passer à un thème Shopify plus rapide me fera perdre mes personnalisations ?
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 enregistré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 de code ne sont pas non plus transférées. Planifiez une migration : reconstruisez sur le nouveau thème en tant que brouillon, puis publiez-le quand il est prêt.
Dois-je me soucier de la vitesse sur ordinateur ?
Moins que sur mobile, mais oui. Sur la plupart des boutiques, la majorité du trafic est mobile, c’est donc la priorité. L’optimisation pour ordinateur est souvent gratuite si vous optimisez pour mobile (images compressées, moins de scripts, ça s’applique aux deux). Ignorez la version bureau uniquement si vous manquez vraiment de ressources — mais ce n’est presque jamais un compromis qui vaut le coup.
Les optimisations de vitesse peuvent-elles casser mes apps Shopify ?
C’est possible. Les optimisations agressives comme le defer (report) de tous les scripts, la suppression de code qui semble inutilisé ou un nettoyage des styles inline peuvent casser les apps qui dépendent d’un ordre de chargement spécifique ou d’une structure HTML particulière. Testez toujours vos apps après des phases d’optimisation majeures — passage en caisse, avis, recherche, tiroir du panier — pour confirmer qu’elles fonctionnent toujours. La meilleure solution reste de remplacer les widgets de vos apps 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 natif pour votre thème, supprimant entièrement le poids des scripts de l’app.
