Optimiser la vitesse de votre boutique Shopify : guide PageSpeed

1 Étape 1  :diagnostiquer la vitesse de votre boutique

Avant de toucher quoi que ce soit, on mesure. Voici les outils indispensables pour un diagnostic complet :

• Google PageSpeed Insights (pagespeed.web.dev) : l'outil de référence. Il donne un score sur 100, les Core Web Vitals mesurés sur vos visiteurs réels (quand le trafic est suffisant) et des recommandations précises. Testez toujours en mobile.

• Google Lighthouse (intégré aux outils de développement de Chrome) : plus détaillé, il permet de tester en conditions contrôlées et d'obtenir un rapport technique complet.

• GTmetrix : une interface claire, un historique des tests et une cascade détaillée des requêtes. Idéal pour repérer le fichier qui bloque le rendu.

• Le tableau de bord de performance web de Shopify : dans l'admin, il affiche le LCP, l'INP et le CLS mesurés sur vos visiteurs, par type de page et par appareil, sur les 28 derniers jours.

Conseil important : testez au minimum la page d'accueil, une collection et une fiche produit, qui ont chacune leurs problèmes. L'accueil est souvent la plus lente, à cause des sliders et des vidéos.

Notez votre score initial sur chaque page. C'est votre point de référence : chaque optimisation sera mesurée par rapport à lui.

2 Étape 2  :optimiser les images (le levier le plus puissant)

Les images représentent souvent la plus grosse part du poids d'une page Shopify : c'est le levier le plus efficace.

Format : WebP et AVIF

Le CDN de Shopify sert automatiquement le meilleur format compatible avec le navigateur : AVIF (depuis 2022), WebP ou JPEG. Cette conversion ne s'applique que si le thème affiche les images avec les filtres Liquid standard (image_url, image_tag). Les images codées en dur dans le thème (balises img avec une URL fixe) n'en bénéficient pas.

• WebP : 25 à 34 % plus léger qu'un JPEG de qualité équivalente, selon Google. Pris en charge par tous les navigateurs actuels.

• AVIF : souvent encore plus léger que WebP à qualité comparable, et pris en charge par les navigateurs récents. Shopify le sert automatiquement quand c'est possible.

• Ne téléversez pas de PNG pour les photos produits. Le PNG est à réserver aux logos et aux icônes avec transparence.

Compression et dimensions

• Compressez avant le téléversement : TinyPNG, Squoosh ou ShortPixel. Une qualité de 80 % suffit généralement : la différence visuelle est imperceptible.

• Ne surdimensionnez pas : avec image_url et des attributs srcset, le thème sert la largeur adaptée à chaque écran. Inutile de téléverser des images de 4 000 px.

• Images produits : 2 048 px de côté pour un visuel carré (la recommandation de Shopify), sous 200 Ko après compression.

• Images d'en-tête et bannières : environ 1 600 à 2 000 px de large, sous 300 Ko.

Lazy loading

Le chargement différé (lazy loading) retarde le chargement des images hors écran : seules les images visibles au premier affichage se chargent immédiatement. Les thèmes Shopify récents (Online Store 2.0) l'intègrent nativement. Vérifiez que l'attribut loading="lazy" est présent sur vos images situées sous la ligne de flottaison.

Exception critique : l'image LCP (bannière d'en-tête, premier produit visible) ne doit jamais porter loading="lazy". Elle doit se charger en priorité. Ajoutez-lui plutôt fetchpriority="high", voire un preload dans le head, pour l'accélérer au maximum.

3 Étape 3  :auditer et nettoyer vos apps

C'est le sujet qui fâche. Les apps sont l'une des premières causes de lenteur des boutiques Shopify. Beaucoup injectent du JavaScript (et parfois du CSS) dans votre thème, que le navigateur doit télécharger, analyser et exécuter : l'affichage et la réactivité en pâtissent.

Leurs effets s'additionnent, et le cumul devient vite sensible sur mobile.

Comment auditer vos apps

• Listez toutes vos apps installées dans l'admin Shopify (Paramètres > Applications et canaux de vente)

• Pour chaque app, posez-vous la question : « Cette app génère-t-elle directement du chiffre d'affaires, ou rend-elle un service indispensable ? »

• Si la réponse est non, si l'app est seulement « agréable à avoir », désinstallez-la

• Attention : la désinstallation ne suffit pas toujours. Les apps récentes passent par des blocs d'app, retirés avec elles, mais certaines apps plus anciennes laissent du code dans le thème. Vérifiez le fichier theme.liquid et les snippets après désinstallation.

• Utilisez l'onglet Réseau des outils de développement de Chrome, filtré par domaine, pour voir quels scripts chaque app charge. Désactivez temporairement les blocs d'app dans l'éditeur de thème pour mesurer leur poids.

4 Étape 4  :choisir un thème performant

Si votre thème est la racine du problème, aucune optimisation ne suffira. Certains thèmes sont simplement trop lourds : beaucoup de JavaScript, de nombreux fichiers CSS, des fonctions que personne n'utilise. Le choix du thème est une décision d'architecture. Pour approfondir, lisez notre article sur le choix d'un thème Shopify.

Les thèmes les plus rapides

• Horizon (gratuit, par Shopify) : installé par défaut sur les nouvelles boutiques depuis l'été 2025, construit sur une architecture récente à base de blocs. Un bon point de départ.

• Dawn (gratuit, par Shopify) : longtemps le thème de référence, toujours maintenu. Code sobre, architecture Online Store 2.0 native.

• Les autres thèmes gratuits de Shopify : développés en interne sur les mêmes bases techniques, ils déclinent ces fondations dans différents styles.

• Prestige (premium, Maestrooo) : l'un des thèmes premium qui conservent de bonnes performances. Un design haut de gamme sans trop sacrifier la vitesse.

• Impact (premium, Maestrooo) : visuellement fort et soigné techniquement, à tester comme les autres avant l'achat.

Règle simple : les thèmes gratuits de Shopify sont généralement plus légers que les thèmes premium tiers. Si vous choisissez un thème premium, testez sa boutique de démonstration dans PageSpeed avant l'achat. Et si votre thème actuel est trop lourd pour être corrigé, une refonte Shopify est souvent plus rentable qu'une succession de correctifs.

5 Étape 5  :optimisations techniques du code

Si vous avez accès au code du thème (ou travaillez avec un développeur), voici les optimisations techniques à fort impact :

Différer le JavaScript

Le JavaScript qui bloque le rendu est l'ennemi silencieux de la performance. Un script sans attribut defer ou async empêche le navigateur d'afficher la page tant qu'il n'est pas chargé et exécuté.

• Ajoutez defer à tous les scripts non critiques (analytics, chat, pop-ups)

• Utilisez async pour les scripts indépendants (pixels de suivi)

• Placez les scripts non essentiels en bas de page (avant la balise body fermante)

• Utilisez requestIdleCallback pour charger les scripts de confort quand le navigateur est inactif

CSS critique et preload

• CSS critique : intégrez directement dans le HTML le CSS nécessaire à l'affichage du haut de page. Le reste peut être chargé en asynchrone.

• Preload : utilisez link rel="preload" pour les ressources critiques (police principale, image d'en-tête, CSS principal)

• Preconnect : ajoutez link rel="preconnect" pour les domaines tiers (polices, analytics…) afin d'anticiper les connexions

Optimisation des polices

Les polices web sont une cause de lenteur sous-estimée : chaque police ajoute un fichier par graisse (regular, bold, italique). Voici les règles :

• Deux polices maximum : une pour les titres, une pour le texte courant

• Limitez les graisses : regular et bold suffisent dans la plupart des cas

• Format WOFF2 : environ 30 % plus compact que WOFF, selon le W3C. Pris en charge par tous les navigateurs actuels.

• font-display: swap : affiche immédiatement le texte avec une police système, puis bascule quand la police personnalisée est chargée. Cela supprime le texte invisible pendant le chargement (FOIT).

• Hébergement des polices : privilégiez la bibliothèque de polices de Shopify, servie depuis son CDN, ou des fichiers hébergés avec le thème, plutôt qu'un service tiers qui ajoute une connexion.

6 Étape 6  :cache et CDN

Shopify gère nativement le CDN et le cache serveur. Vous pouvez encore optimiser côté navigateur :

• Cache navigateur : Shopify configure automatiquement les en-têtes de cache des fichiers statiques servis depuis le thème. Pour les scripts hébergés ailleurs, vérifiez leurs en-têtes Cache-Control.

• Préchargement des pages : link rel="prefetch" permet de précharger les pages que vos visiteurs ont de fortes chances d'ouvrir (une collection depuis l'accueil, une fiche depuis la collection). À doser : trop de préchargement consomme de la bande passante pour rien.

• Service worker : il peut mettre en cache les fichiers statiques, mais sa mise en place est complexe sur Shopify, où vous ne contrôlez pas le serveur.

7 Étape 7  :mesurer l'effet de chaque optimisation

Ne faites pas toutes les optimisations d'un coup. Procédez une par une et mesurez chaque effet. Voici le protocole :

• Avant : trois tests PageSpeed sur la même page, gardez le score médian

• Appliquez UNE optimisation

• Après : trois tests PageSpeed, score médian

• Documentez : optimisation, gain en points, gain en millisecondes sur le LCP

Ce protocole isole les optimisations rentables et, en cas de régression, vous savez exactement quoi annuler.

La vitesse, c'est de la conversion. Dans l'étude « Milliseconds Make Millions » (menée par Deloitte et 55 à la demande de Google), un gain de 0,1 seconde sur mobile s'accompagnait d'une hausse de 8,4 % des conversions sur les sites de distribution étudiés. Les résultats varient d'une boutique à l'autre, mais le sens est constant. Pour d'autres leviers, consultez nos 12 stratégies pour augmenter votre taux de conversion Shopify, ou voyez comment créer une boutique Shopify performante dès le départ.

Vos Core Web Vitals restent dans l'orange malgré ces corrections ? La performance fait partie du SEO technique que nous présentons sur la page SEO Shopify ; pour parler de votre boutique, écrivez-nous.