Accélérer Shopify : thème, apps et images

Toutes les boutiques Shopify tournent sur les mêmes serveurs et le même CDN, donc une boutique lente l'est à cause de ce qu'elle charge : le thème, les scripts des applications, les images et les vidéos. Optimiser la vitesse sur Shopify consiste à retirer et alléger ces éléments, pas à changer d'hébergement. Dans la plupart des boutiques, les plus gros gains viennent de la suppression du code d'applications inutilisé, de la compression de l'image principale et du chargement différé des widgets.

Ce guide montre comment mesurer correctement la vitesse, puis passe en revue les corrections dans l'ordre où elles rapportent généralement. Il fait partie du guide SEO pour Shopify.

Mesurer les bonnes pages

Testez une page produit et une page collection, pas seulement la page d'accueil. Ce sont ces pages qui se positionnent et sur lesquelles arrivent les acheteurs.

Google PageSpeed Insights donne des scores de laboratoire pour un chargement unique et, si votre boutique a assez de visiteurs, les vraies Core Web Vitals des utilisateurs de Chrome sur les 28 derniers jours. Ce sont les chiffres d'utilisateurs réels que Google utilise.
Le rapport Core Web Vitals de Search Console regroupe vos URL par statut, pour voir si toutes les pages produit partagent un même problème.
Le rapport de performance web de Shopify, dans Analytics, montre les mêmes métriques d'utilisateurs réels dans le temps, ce qui aide à vérifier si une modification a servi.

Concentrez-vous sur les trois Core Web Vitals : Largest Contentful Paint (la vitesse d'affichage de l'image ou du texte principal), Interaction to Next Paint (la rapidité de réaction de la page à un appui) et Cumulative Layout Shift (à quel point les éléments bougent). Les scores de laboratoire varient d'un test à l'autre ; ne courez pas après un 100 parfait.

1. Retirer le code d'applications inutilisé

Les applications sont la cause la plus fréquente d'une boutique Shopify lente. Chacune de celles qui touchent la vitrine peut ajouter du JavaScript et du CSS à chaque page.

Listez vos applications. Désinstallez celles que vous n'utilisez plus.
Désinstaller ne retire pas toujours le code qu'une application a ajouté au thème. Cherchez le nom de l'application dans les fichiers du thème (Online Store > Themes > Edit code) et supprimez les snippets et balises script restants.
Préférez les applications qui utilisent les extensions d'application de thème (des blocs d'application ajoutés dans l'éditeur de thème). Elles sont retirées proprement à la désinstallation et ne se chargent que là où vous les placez.
Pour les applications que vous gardez, vérifiez si elles se chargent sur chaque page. Un guide des tailles n'a besoin que des pages produit.

2. Corriger la plus grande image

Sur la plupart des pages produit et collection, le plus grand élément est une photo produit ou une bannière. Rendez-le rapide :

Importez des fichiers raisonnables. Redimensionnez les photos à environ 2 000 à 2 500 pixels de large avant l'import et compressez-les. Le CDN de Shopify sert automatiquement des versions redimensionnées et des formats modernes comme WebP, mais un original énorme coûte quand même du temps.
Ne chargez pas la première image en différé. Les images du haut de page doivent se charger immédiatement. Le lazy loading est fait pour les images plus bas.
Utilisez des images responsives. Les thèmes récents utilisent les filtres image_url et image_tag de Shopify pour servir la bonne taille selon l'écran. Les anciens thèmes peuvent servir une seule grande taille à tous les appareils.
Évitez la vidéo en lecture automatique en haut de page. Si vous avez besoin d'une vidéo, affichez d'abord une image d'aperçu et chargez la vidéo ensuite.

3. Charger les widgets plus tard

Les avis, bulles de chat, pop-ups, carrousels de ventes additionnelles et fils de réseaux sociaux ont rarement besoin de se charger avant le produit.

Chargez le chat et les pop-ups une fois la page interactive ou après un délai.
Placez les widgets d'avis sous la ligne de flottaison pour qu'ils ne bloquent pas le contenu principal. Gardez le texte des avis dans le HTML de la page pour le SEO.
Retirez les pixels de suivi tiers que vous ne consultez plus. Chacun est un script de plus.

4. Utiliser un thème récent

Les thèmes conçus pour Online Store 2.0, dont les thèmes gratuits de Shopify basés sur Dawn, reposent sur les blocs d'application, les images responsives et un JavaScript plus léger. Un thème d'il y a plusieurs années, avec de lourds carrousels et jQuery, peut rester lent quoi que vous retiriez.

Avant de changer, testez la page produit de démonstration du nouveau thème dans PageSpeed Insights. Un thème lent dans sa propre démo le sera aussi avec vos produits.

5. Éviter les décalages de mise en page

Un contenu qui saute pendant le chargement dégrade le Cumulative Layout Shift et agace les acheteurs.

Donnez une largeur et une hauteur aux images (le filtre image_tag de Shopify les ajoute).
Réservez de l'espace pour les bannières et barres d'annonce qui apparaissent après le chargement.
Chargez les polices personnalisées avec font-display: swap et limitez le nombre de graisses.

Ce qui n'aide pas beaucoup

Les applications d'accélération. La plupart ajoutent leur propre script à la page. Retirer du code vaut mieux qu'en ajouter.
Changer d'hébergement ou de CDN. Sur Shopify, vous ne pouvez pas, et vous n'en avez pas besoin.
Minifier quelques kilo-octets de CSS. Cela fait rarement bouger les métriques d'utilisateurs réels, comparé à la suppression d'une application ou à la correction de l'image principale.

Rester rapide

La vitesse se dégrade à mesure que vous ajoutez des applications et des sections. Retestez une page produit après chaque nouvelle application, et consultez le rapport Core Web Vitals chaque mois. Un audit de site, comme celui de zaDojo, signale les pages lentes et les images trop lourdes sur toute la boutique, pour ne pas tester les pages une par une.

Questions fréquentes

La vitesse de Shopify influence-t-elle le SEO ? Oui, un peu. Les Core Web Vitals sont un signal de positionnement, mais le contenu et la pertinence comptent davantage. La vitesse compte surtout pour les ventes : les acheteurs quittent les pages produit lentes.

Quel est un bon score de vitesse Shopify ? Visez des Core Web Vitals « Bonnes » dans les données d'utilisateurs réels (Largest Contentful Paint sous 2,5 secondes, Interaction to Next Paint sous 200 millisecondes, Cumulative Layout Shift sous 0,1). Le score de laboratoire sur 100 est un repère, pas un objectif.

Pourquoi ma boutique Shopify est-elle lente sur mobile ? Les téléphones ont des processeurs et des connexions plus lents, donc le JavaScript lourd des applications y pèse bien plus. Testez d'abord sur mobile.