Vitesse Shopify : comment passer de 40 à 90 sur PageSpeed

Soyons honnêtes : la vitesse est le parent pauvre de la majorité des boutiques Shopify. On investit dans le design, le branding, le marketing — et on oublie ce qui se passe pendant les cinq secondes où la page reste blanche sur mobile. Le visiteur, lui, n’a aucun signal : il ne sait pas si le site charge, si le réseau a lâché ou s’il s’est trompé de lien. Rien à regarder, rien à lire, et le pouce déjà posé sur le bouton retour — un geste qui ne lui coûte rien, alors que sa visite, elle, a coûté cher à faire venir. C’est de l’argent jeté par la fenêtre, chaque jour, en silence.

La bonne nouvelle, c’est que Shopify est une plateforme nativement rapide. L’hébergement est sur un CDN mondial, le SSL est intégré, l’infrastructure tient la charge. Si votre boutique est lente, c’est presque toujours à cause de ce que vous avez ajouté dessus : des apps, un thème lourd, des images non optimisées, du code custom mal implemente.

Ce guide va vous montrer comment diagnostiquer les problèmes, les corriger un par un, et mesurer l’impact. Pour le contexte SEO plus large, notre guide SEO Shopify 2026 explique pourquoi la vitesse est un facteur de classement Google.

Étape 1 : Diagnostiquer la vitesse de votre boutique

Avant de toucher quoi que ce soit, on mesure. Vous ne pouvez pas améliorer ce que vous ne mesurez pas. Voici les 3 outils indispensables pour un diagnostic complet :

• Google PageSpeed Insights (pagespeed.web.dev) : l’outil de référence. Donne un score sur 100 et des recommandations précises. Testez toujours sur mobile, pas desktop.
• Google Lighthouse (intégré à Chrome DevTools) : plus détaillé que PSI. Permet de tester en conditions contrôlées et d’obtenir un rapport technique complet.
• GTmetrix : interface claire, historique des tests, waterfall détaillé. Parfait pour identifier quel fichier bloque le rendu.

Conseil important : testez au minimum 3 pages différentes — la page d’accueil, une page collection et une page produit. Chacune a ses propres problèmes. La page d’accueil est souvent la plus lente à cause des sliders, des vidéos et des sections promotionnelles.

Notez votre score initial sur chaque page. C’est votre baseline. Chaque optimisation sera mesurée par rapport à ce point de départ.

Comprendre les Core Web Vitals

Google utilise 3 métriques principales pour évaluer l’expérience utilisateur de votre site. Ce sont les Core Web Vitals, et ils impactent directement votre classement SEO depuis 2021.

Métrique	Ce qu’elle mesure	Bon	À améliorer	Mauvais
LCP (Largest Contentful Paint)	Temps d’affichage du plus gros élément visible	Moins de 2.5s	2.5s - 4s	Plus de 4s
INP (Interaction to Next Paint)	Réactivité aux interactions utilisateur	Moins de 200ms	200 - 500ms	Plus de 500ms
CLS (Cumulative Layout Shift)	Stabilité visuelle (éléments qui “sautent”)	Moins de 0.1	0.1 - 0.25	Plus de 0.25

Dans la pratique, c’est presque toujours le LCP qui coince sur une boutique Shopify lente, et la raison est structurelle : le plus gros élément visible d’une page e-commerce est une image, souvent une bannière plein écran ou un slider placé tout en haut. Tant que ce fichier n’est pas téléchargé et décodé, le navigateur n’a rien de significatif à afficher, et le chronomètre tourne. C’est donc par là qu’on commence.

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

Sur une boutique, les images pèsent presque toujours plus lourd que tout le reste réuni — code, polices et scripts compris. C’est arithmétique : une fiche produit sérieuse affiche six à huit visuels haute définition, une page collection en aligne plusieurs dizaines en vignettes, et chacun de ces fichiers se compte en centaines de kilo-octets quand le texte, lui, se compte en kilo-octets. Ouvrez l’onglet Réseau de votre navigateur et triez par taille : la liste parle d’elle-même. C’est donc le levier d’optimisation le plus impactant, et souvent le plus simple à actionner.

Format : WebP et AVIF

Shopify convertit automatiquement les images en WebP quand le navigateur le supporte. Mais cette conversion ne s’applique que si vous utilisez les balises Liquid standard (image_url). Si vous avez des images en dur dans le code du thème (balises img avec URL fixe), elles ne bénéficient pas de cette optimisation automatique.

• WebP : la documentation WebP de Google annonce des fichiers 25 à 34 % plus légers qu’un JPEG de qualité équivalente. Le format est pris en charge par tous les navigateurs actuels, sur mobile comme sur ordinateur.
• AVIF : encore plus compact que le WebP à qualité perçue égale, au prix d’un encodage plus lent et d’une prise en charge un peu plus récente. Shopify commence à le servir nativement, ce qui vous évite d’avoir à gérer vous-même les deux formats.
• Ne jamais uploader de PNG pour les photos produits. Le PNG est réservé aux logos et icônes avec transparence.

Compression et dimensions

• Compressez avant upload : utilisez TinyPNG, Squoosh ou ShortPixel. Visez 80 % de qualité — la différence visuelle est imperceptible.
• Dimensions exactes : n’uploadez pas une image de 4000x4000 px pour un affichage de 800x800 px. Adaptez les dimensions à l’affichage réel.
• Images produits : 1200x1200 px maximum, moins de 200 Ko par image.
• Images hero / bannière : 1600 px de large maximum, moins de 300 Ko.

Lazy loading

Le lazy loading diffère le chargement des images hors écran. Seules les images visibles au premier affichage sont chargées immédiatement. Les thèmes Shopify modernes (Online Store 2.0) intègrent le lazy loading nativement. Vérifiez que l’attribut loading=“lazy” est bien présent sur vos images below the fold.

Exception critique : l’image LCP (hero banner, premier produit visible) ne doit jamais avoir loading=“lazy”. Elle doit se charger en priorité. Ajoutez plutôt loading=“eager” et un tag preload dans le head pour l’accélérer au maximum.

Étape 3 : Auditer et nettoyer vos apps

C’est le sujet qui fâche, mais il faut en parler. Les apps Shopify sont la première cause de lenteur sur la majorité des boutiques. Chaque app injecte du JavaScript (et parfois du CSS) dans votre thème. Certaines ajoutent 3, 5, voire 10 fichiers JS supplémentaires. Le navigateur doit télécharger, parser et exécuter chaque fichier avant que la page ne soit interactive.

En moyenne, chaque app ajoute 50 à 200 ms au temps de chargement. Une boutique avec 20 apps peut facilement perdre 2 à 4 secondes rien qu’à cause des scripts tiers.

Comment auditer vos apps

• Listez toutes vos apps installées dans Shopify Admin > Settings > Apps
• Pour chaque app, posez-vous cette question : “Cette app génère-t-elle directement du chiffre d’affaires ?”
• Si la réponse est non, si l’app est un “nice to have”, desinstallez-la
• Attention : desinstaller une app ne suffit pas toujours. Certaines laissent du code résiduel dans votre thème. Vérifiez le fichier theme.liquid et les snippets après désinstallation.
• Utilisez l’outil Shopify Thème Inspector (extension Chrome) pour voir exactement quelles apps injectent du code

Type d’app	Impact performance	Alternative
Chat en direct (Tidio, Zendesk)	Très élevé (300-800 ms)	Charger en defer, afficher après 5s
Pop-ups / Email capture	Élevé (200-500 ms)	Intégrer nativement dans le thème
Avis produits (Judge.me, Loox)	Moyen (100-300 ms)	Lazy load les widgets d’avis
Analytics tiers (Hotjar, Lucky Orange)	Moyen (100-200 ms)	Charger en async, limiter aux pages clés
Countdown timers / urgency	Faible-moyen (50-150 ms)	Code CSS/JS custom dans le thème
Apps de traduction	Très élevé (400-1000 ms)	Shopify Markets (natif)

É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 tout simplement trop lourds — 2 Mo de JavaScript, 15 fichiers CSS, des fonctionnalités que personne n’utilise. Le choix du thème est une décision architecturale. Pour approfondir ce sujet, lisez notre article sur comment choisir votre thème Shopify.

Les thèmes les plus rapides en 2026

• Dawn (gratuit, par Shopify) : le thème de référence. Score PageSpeed moyen de 90+. Code minimal, architecture OS 2.0 native. Le meilleur point de départ pour la performance.
• Ride (gratuit, par Shopify) : variante de Dawn optimisée pour les marques de sport et lifestyle. Performance identique.
• Sense (gratuit, par Shopify) : oriente bien-être et beauté. Même base technique que Dawn.
• Prestige (premium, Maestrooo) : un des rares thèmes premium qui maintient un bon score. Design haut de gamme sans sacrifier la vitesse.
• Impact (premium, Maestrooo) : performant et visuellement impactant. Score moyen 70-80.

Règle simple : les thèmes gratuits de Shopify (développés en interne) sont presque toujours plus performants que les thèmes premium tiers. Si vous choisissez un thème premium, testez le demo store sur PageSpeed avant d’acheter.

Étape 5 : Optimisations techniques du code

Pour ceux qui ont accès au code du thème (ou qui travaillent avec un développeur), voici les optimisations techniques à fort impact :

Defer JavaScript

Le JavaScript qui bloque le rendu est le tueur silencieux de la performance. Chaque script sans attribut defer ou async empêche le navigateur d’afficher la page tant qu’il n’est pas complètement chargé et exécuté.

• Ajoutez defer à tous les scripts non critiques (analytics, chat, popups)
• Utilisez async pour les scripts indépendants (tracking pixels)
• Dé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

Critical CSS et preload

• Critical CSS : inlinez le CSS nécessaire à l’affichage du contenu above the fold directement dans le HTML. Le reste peut être chargé en async.
• Preload : utilisez les tags link rel=“preload” pour les ressources critiques (font principale, image hero, CSS principal)
• Preconnect : ajoutez link rel=“preconnect” pour les domaines tiers (CDN fonts, analytics, etc.) afin d’anticiper les connexions DNS

Fonts optimization

Les polices web sont souvent sous-estimées comme facteur de lenteur. Chaque police ajoute 20 à 100 Ko par variante (regular, bold, italic). Voici les règles :

• 2 polices maximum : une pour les titres, une pour le corps de texte
• Limitez les variantes : un regular et un bold couvrent l’essentiel d’une boutique. Chaque graisse supplémentaire est un fichier de plus à télécharger pour un gain typographique que personne ne remarque, et l’italique peut être simulé en CSS.
• Format WOFF2 : c’est le format le plus compressé des formats de police web, et il est reconnu par tous les navigateurs modernes. Servir du WOFF ou, pire, du TTF revient à faire télécharger la même police en plus lourd.
• font-display: swap : affiche le texte immédiatement avec une police système, puis substitue quand la police custom est chargée. Élimine le FOIT (Flash of Invisible Text).
• Self-hosting : hébergez vos polices sur votre domaine plutôt que Google Fonts. Élimine une requête DNS tierce.

Étape 6 : Cache et CDN

Shopify gère le CDN et le cache serveur nativement — c’est un de ses avantages. Mais vous pouvez optimiser encore davantage cote navigateur :

• Cache navigateur : Shopify configure automatiquement les headers de cache pour les assets statiques. Vérifiez que vos fichiers custom (JS, CSS) ont des headers Cache-Control corrects.
• Prefetch / Prerender : utilisez link rel=“prefetch” pour precharger les pages vers lesquelles vos visiteurs sont susceptibles de naviguer (page collection depuis la page d’accueil, page produit depuis la collection).
• Service Worker : pour les boutiques à fort trafic, un service worker peut mettre en cache les assets statiques et servir les pages offline. Avance mais très efficace.

Étape 7 : Mesurer l’impact de chaque optimisation

Ne faites pas toutes les optimisations d’un coup. Procédez une par une et mesurez l’impact de chacune. Voici le protocole :

• Avant : 3 tests PageSpeed sur la même page, gardez le score médian
• Appliquez UNE optimisation
• Après : 3 tests PageSpeed, score médian
• Documentez : optimisation + gain en points + gain en millisecondes sur le LCP

Ce protocole vous permet d’identifier les optimisations à fort ROI et d’éviter celles qui n’apportent rien (ou qui cassent quelque chose). En cas de régression, vous savez exactement quoi reverter.

Optimisation	Gain moyen PageSpeed	Difficulté	Temps
Compression images	+10 à 25 points	Facile	1-3 heures
Suppression apps inutiles	+5 à 20 points	Facile	1-2 heures
Changement de thème	+15 à 40 points	Moyen-difficile	1-2 semaines
Defer JavaScript	+5 à 15 points	Moyen	2-4 heures
Critical CSS inline	+3 à 10 points	Difficile	4-8 heures
Fonts optimization	+3 à 8 points	Moyen	1-2 heures
Preload image hero	+2 à 8 points	Facile	15 minutes

La vitesse, c’est de la conversion. Le lien entre les deux n’a rien de mystérieux : une page lente ne perd pas des visiteurs au hasard, elle les perd à un endroit précis du parcours. Celui qui attend n’a encore rien investi dans votre boutique — ni panier, ni compte, ni temps de lecture — donc partir ne lui coûte rien. Plus loin, le même retard frappe un acheteur qui a déjà choisi son produit et qui hésite au moment de payer : c’est là que chaque seconde se paie le plus cher. Améliorer le score n’est pas un exercice de style, c’est retirer des occasions de renoncer. Pour d’autres leviers de conversion, consultez nos 12 stratégies pour augmenter votre taux de conversion Shopify.

FAQ : Vitesse et performance Shopify

Quel est un bon score PageSpeed pour une boutique Shopify ?

Un score entre 70 et 90 sur mobile est considéré comme bon pour une boutique Shopify. Atteindre 90+ est possible mais difficile avec des apps installées. L’essentiel est que les Core Web Vitals soient dans le vert, selon les seuils publiés par Google : LCP sous 2.5 secondes, INP sous 200 ms et CLS sous 0.1, mesurés sur 75 % des visites réelles. Une boutique jamais optimisée démarre en général bien plus bas, parce que rien n’a encore été fait sur les images ni sur les scripts d’apps.

Le score PageSpeed reflete-t-il la vraie vitesse de mon site ?

Pas directement. PageSpeed mesure des métriques sur un appareil mobile simulé avec connexion 4G lente. La vitesse perçue par vos vrais visiteurs peut être différente. Privilégiez les données de terrain (Chrome UX Report, section “Discover what your real users are experiencing”) plutôt que les données de laboratoire.

Les apps Shopify ralentissent-elles vraiment mon site ?

Oui, c’est la première cause de lenteur. Chaque app injecte du JavaScript et parfois du CSS supplémentaire, que le navigateur doit télécharger, analyser puis exécuter avant que la page ne réponde. Le coût s’additionne app par app, et il ne se voit pas à l’œil nu : le site paraît identique, il répond simplement plus tard. Mesurez-le vous-même dans l’onglet Réseau de Chrome, app par app. La règle : si une app n’a pas un impact mesurable sur votre CA, desinstallez-la.

Un thème gratuit Shopify est-il aussi performant qu’un thème premium ?

Souvent plus performant. Les thèmes gratuits de Shopify (Dawn, Ride, Sense) sont développés en interne et sont extrêmement optimisés. Dawn obtient régulièrement des scores de 90+ sans optimisation supplémentaire. Beaucoup de thèmes premium ajoutent des fonctionnalités superflues qui alourdissent le code.

Combien de temps faut-il pour améliorer la vitesse de ma boutique ?

Les optimisations d’images et la suppression d’apps donnent des résultats immédiats (quelques heures). L’optimisation du code du thème prend 1 à 3 jours. Une refonte complète des performances : 1 à 2 semaines. Les résultats dans les Core Web Vitals de Google apparaissent sous 28 jours après les modifications.

Votre boutique Shopify mérite d’être rapide.

Chez Lyvora, la performance fait partie de chaque projet. Audit PageSpeed, optimisations et suivi inclus. On vise 80+ sur mobile, toujours.

Auditer ma boutique

Pour approfondir, découvrez comment créer une boutique Shopify performante dès le départ ou consultez nos forfaits tout inclus qui intègrent l’optimisation performance de base.