Une boutique qui se charge vite, c'est la base. Si ta page met une éternité à s'afficher, le visiteur s'en va avant même d'avoir vu tes produits.
On vit dans un monde où l'attention baisse sans arrêt. Plus personne n'aime attendre. Quelques secondes de trop et le client ferme l'onglet.
C'est pour ça qu'optimiser la vitesse de ton site n'est pas une option. Dans cet article, je te donne mes astuces concrètes pour rendre ta boutique plus rapide.
Comment savoir si ta boutique est lente
Avant d'optimiser quoi que ce soit, il faut mesurer. Inutile de deviner : sers-toi d'outils faits pour ça.
Je te conseille PageSpeed Insights ou GTmetrix. La note de vitesse affichée par Shopify n'est pas très fiable et ne te dit pas vraiment quoi améliorer.
PageSpeed Insights
C'est un outil développé directement par Google. Tu le trouves en premier lien quand tu cherches son nom. Tu colles l'URL de ta boutique et tu obtiens une analyse détaillée.
GTmetrix
Même principe, premier lien quand tu cherches le nom. Tu entres l'URL de ta boutique et tu obtiens une note. Une note A, c'est très bien. Tu as aussi un pourcentage pour situer ta performance.
Ce sont les deux outils que j'utilise pour juger la vitesse réelle d'un site. Pars de là, puis applique les astuces qui suivent.
Choisir un bon thème Shopify
Ça paraît évident, mais c'est la première brique. Un thème mal codé plombe ta vitesse dès le départ, quoi que tu fasses ensuite.
Oublie les thèmes gratuits de Shopify. Ils ne sont généralement pas très optimisés. Tourne-toi plutôt vers un thème payant, qu'il vienne du Shopify App Store ou d'un éditeur indépendant.
Un thème du Shopify App Store coûte en général entre 300 et 400 euros selon le modèle. Un thème indépendant comme le Story Thème a l'avantage d'embarquer beaucoup de fonctionnalités déjà intégrées.
L'intérêt d'un thème complet, c'est qu'il est optimisé pour le mobile comme pour l'ordinateur, et que tu évites d'empiler des applications externes qui ralentissent tout.
Optimiser les images de ta boutique
Si je devais retenir un seul point, ce serait celui-là. Les images représentent environ 80 % de la vitesse de ton site quand elles sont mal optimisées.
Deux choses comptent : le bon format et le bon ratio. Une image de 4000 pixels de large affichée dans un cadre de 800 pixels, c'est du poids inutile qui ralentit le chargement pour rien.
Les bonnes résolutions à utiliser
Pour t'y retrouver, voici les largeurs que je recommande selon le type d'image sur ta page.
Pour une bannière qui prend toute la largeur de l'écran, vise 1920 pixels de large maximum. La hauteur, tu la choisis librement selon ton rendu.
Pour les images classiques, comme les visuels produits ou les images des sections « image avec texte » qui occupent la moitié de l'écran, reste entre 800 et 1000 pixels de large.
Pour de petites images, par exemple quatre visuels placés côte à côte, 400 pixels de large suffisent. Là encore, la hauteur dépend du format carré ou un peu plus haut que tu préfères.
Icônes, logos et favicon
Pour les icônes et les logos, utilise des fichiers SVG. C'est un format vectoriel : il peut s'agrandir ou rétrécir à l'infini sans perdre en qualité, et il est très léger.
Pour le favicon, prévois une image de 32 pixels par 32 pixels. C'est petit, mais c'est exactement ce qu'il faut pour cet usage précis.
Convertir ses images au bon format
Pour mettre tout ça en pratique, il existe des tonnes d'outils en ligne. Personnellement, j'utilise celui intégré au Story Thème, qui s'appelle Optimage.
Le principe est simple : tu charges ton image et l'outil la convertit au format WebP, le plus adapté au web. Tu peux aussi choisir différents ratios : bannière, format général, 4/3 ou 3/4.
Tu peux soit retravailler le ratio, soit garder le même et passer à une largeur de 1000 pixels. Dans les deux cas, ton image ressort au bon format et bien plus légère.
Un exemple concret de gain
J'ai fait le test avec une image récupérée sur une banque d'images gratuite. Au départ, le fichier pesait 0,82 Mo avec une largeur de plus de 4000 pixels.
En la convertissant en WebP sans toucher à la largeur, on passe déjà à 0,40 Mo. En réduisant ensuite la largeur tout en gardant le ratio, on tombe à 0,04 Mo.
C'est un gain d'environ 96 % de poids, en passant du JPEG au WebP. Sur une page entière remplie d'images, l'effet sur la vitesse est énorme.
Limiter le nombre d'applications
Chaque application installée ajoute du code à ta boutique. Ce code n'est pas toujours optimisé avec le reste, et plus tu en accumules, plus ton site ralentit.
Mon conseil : désinstalle tout ce qui est inutile. Une application n'a sa place que si elle joue vraiment sur ton taux de conversion. Sinon, elle ne fait qu'alourdir ta page.
C'est aussi pour ça que le Story Thème intègre directement de nombreuses fonctionnalités. Comme elles sont pensées avec le reste du code, elles n'ajoutent pas de poids superflu.
Fais le tri : supprime ce que tu peux remplacer par une fonction native du thème, et garde seulement les applications réellement essentielles à ton activité.
Bien gérer les vidéos
Les vidéos aussi pèsent dans la balance. Évite de stocker tes vidéos directement sur Shopify quand tu peux faire autrement.
Privilégie les vidéos intégrées via un player externe, comme YouTube ou Vimeo. Ce n'est pas le facteur le plus visible, mais si tu veux pousser l'optimisation jusqu'au bout, ça compte.
Supprimer les sections masquées
Voilà une erreur très courante. Beaucoup de gens masquent une section en se disant qu'ils la remettront plus tard, au lieu de la supprimer.
Le problème, c'est qu'une section masquée continue de se charger sur ton site. Elle reste dans le code et elle ralentit la page, même si personne ne la voit.
Si tu retires un élément, supprime carrément la section plutôt que de la masquer. Pareil pour les blocs inutiles : les enlever allège le code et améliore la vitesse.
C'est un réflexe simple à prendre qui évite d'accumuler du poids invisible au fil des modifications de ta boutique.
Ne pas tomber dans l'obsession de la vitesse
Un dernier point important : ne te focalise pas à 1000 % sur la vitesse. La plupart des boutiques chargent déjà correctement, il faut surtout surveiller les images.
Le bon test est simple. Va sur ton site : s'il rame visiblement, il y a un vrai souci à régler. S'il charge correctement, tu n'as pas de raison de t'inquiéter.
Regarde de très gros sites comme Amazon, Gymshark ou Apple. Leurs scores PageSpeed ne sont pas parfaits non plus, et ça ne les empêche pas de générer énormément de chiffre d'affaires.
La vitesse, c'est quelque chose à surveiller et à optimiser, mais pas à transformer en obsession. N'y passe pas tout ton temps au détriment du reste.
Conclusion
Concentre ton énergie sur ce qui rapporte vraiment : convertir davantage, augmenter ton panier moyen et attirer plus de visiteurs sur ta boutique.
Optimise tes images, fais le tri dans tes applications, gère bien tes vidéos et tes sections, mesure avec PageSpeed Insights ou GTmetrix. Tu auras une boutique rapide sans y laisser tes journées.
