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 intègre déjà loading="lazy" sur les images de produits et de collections. C’est le cas des thèmes modernes. Si ce n’est pas le cas, ajoutez-le aux balises d’images dans les fichiers de vos sections.
Ne mettez jamais votre image hero en lazy loading — c’est votre élément LCP et il doit s’afficher immédiatement.
Guide complet : comment mettre les images en lazy loading 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 à 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) — la stabilité visuelle, devrait être inférieure à 0,1 (bon)
Ces trois éléments sont les Core Web Vitals de Google et ont un impact sur votre référencement en plus de l’expérience utilisateur.
À lire aussi : Minifier le CSS et le JavaScript sur Shopify.
