Pourquoi ma boutique Shopify est-elle lente ?

Une boutique lente est frustrante, pour vous comme pour vos clients. Les pages mettent du temps à s’afficher, les images se chargent par morceaux, les boutons ne réagissent pas immédiatement, ou la mise en page saute pendant que la page se charge encore.

Comme Shopify est une plateforme hébergée, vous ne gérez pas vous-même les serveurs. Shopify s’occupe de l’hébergement, du réseau de diffusion de contenu (CDN) et d’une grande partie de l’infrastructure. La cause d’une boutique lente n’est donc généralement pas « le serveur », mais ce qui est chargé par-dessus :

• les applications et les scripts qu’elles ajoutent
• les images et les vidéos
• le thème et ses fonctionnalités
• les outils de suivi et de marketing
• le code personnalisé ajouté au fil du temps

La bonne nouvelle, c’est que la plupart de ces éléments sont sous votre contrôle. La moins bonne, c’est que la vitesse se règle rarement en une seule modification. La première étape la plus utile est de mesurer correctement, pour savoir ce qui est réellement lent avant de changer quoi que ce soit.

Ce guide explique les causes fréquentes, comment mesurer la vitesse d’une manière qui reflète l’expérience des vrais clients, quelles améliorations sont généralement rapides et lesquelles demandent un travail plus approfondi.

Que signifie concrètement « lent » ?

Chacun entend des choses différentes par une boutique lente, et chaque cas renvoie à une cause différente.

La page met longtemps à s’afficher

L’écran reste blanc ou presque vide pendant un moment. C’est souvent lié à de grandes images en haut de page, à des sections de thème lourdes ou à des scripts qui doivent se charger avant le contenu.

La page s’affiche mais ne réagit pas

Vous voyez la page, mais toucher le menu, un filtre ou le bouton d’ajout au panier ne produit rien pendant un instant. C’est généralement dû à trop de JavaScript exécuté dans le navigateur, souvent par des applications et des outils de suivi.

La mise en page saute pendant le chargement

Le texte descend lorsqu’une image ou une bannière apparaît, ou un bouton se décale au moment où vous essayez de le toucher. C’est souvent causé par des images sans dimensions définies, des bannières chargées tardivement, des pop-ups ou des widgets d’applications qui s’insèrent dans la page.

Seules certaines pages sont lentes

Si seules les pages produits, les grandes collections ou les résultats de recherche sont lents, la cause est probablement propre à ces modèles : nombreuses images produits, filtres, widgets d’avis ou applications de recommandation.

Savoir lequel de ces cas vous observez accélère beaucoup l’investigation.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont un ensemble de mesures que Google utilise pour décrire l’expérience de chargement et d’utilisation d’une page. Il y en a trois :

• Largest Contentful Paint (LCP) mesure la rapidité d’affichage du contenu principal, souvent l’image d’en-tête ou l’image principale du produit.
• Interaction to Next Paint (INP) mesure la rapidité avec laquelle la page réagit lorsqu’une personne touche ou clique.
• Cumulative Layout Shift (CLS) mesure à quel point la mise en page bouge de façon inattendue pendant le chargement.

Google publie des valeurs cibles pour chacune de ces mesures et classe les résultats en bons, à améliorer ou mauvais. Des outils comme PageSpeed Insights vous indiquent dans quelle catégorie se situent vos pages.

Les Core Web Vitals ne sont pas le seul élément qui compte pour une boutique, mais ils constituent un langage commun utile. Ils reflètent aussi des problèmes réels que les clients remarquent : l’attente, les boutons qui ne réagissent pas et les mises en page qui sautent.

Comment mesurer la vitesse de ma boutique ?

Il existe deux types de données, et il est important de ne pas les confondre.

Données de laboratoire : un test effectué par un outil

Lorsque vous analysez une page avec PageSpeed Insights, l’outil la charge dans un environnement simulé et produit un score ainsi qu’une liste de suggestions. On parle de données de laboratoire.

Les données de laboratoire sont utiles pour :

• repérer des problèmes précis, comme des images surdimensionnées ou des scripts lourds
• comparer avant et après une modification
• tester des pages qui n’ont pas encore beaucoup de trafic

Mais le score peut varier d’un test à l’autre, et il ne reflète pas forcément ce que vivent vos clients sur leurs propres appareils et connexions.

Données de terrain : ce que vivent les vrais visiteurs

Si votre boutique a assez de trafic, PageSpeed Insights affiche aussi des données collectées auprès de vrais utilisateurs de Chrome au cours des dernières semaines. Elles apparaissent en haut du rapport et indiquent les Core Web Vitals de la page ou de l’ensemble du site.

Shopify propose aussi un rapport de performance web dans les statistiques de l’administration, basé sur les visites réelles de votre boutique. Il montre l’évolution de vos Core Web Vitals dans le temps et peut vous aider à relier les variations de vitesse à des événements comme l’installation d’une application ou un changement de thème.

Les données de terrain sont plus proches de la réalité de l’expérience de vos clients. Lorsque les données de laboratoire et de terrain divergent, accordez plus de poids aux données de terrain.

Testez les bonnes pages

Ne testez pas seulement la page d’accueil. Les clients arrivent souvent directement sur des pages produits et des pages de collection depuis la recherche ou les publicités. Testez au minimum :

• la page d’accueil
• une page de collection populaire
• une page produit populaire
• le panier

Testez sur mobile comme sur ordinateur. La plupart des boutiques reçoivent une grande part de leur trafic depuis des téléphones, qui ont généralement des processeurs et des connexions plus lents.

Qu’est-ce qui ralentit généralement une boutique Shopify ?

Trop d’applications et de scripts

Chaque application qui ajoute quelque chose à la boutique peut charger son propre JavaScript, ses feuilles de style, ses polices ou ses requêtes vers des serveurs externes. Une seule application fait rarement une grande différence. Dix ou vingt ensemble, si.

Les contributeurs courants sont notamment :

• les widgets d’avis
• les pop-ups et les formulaires de collecte d’e-mails
• le chat en direct
• les outils de vente additionnelle et de vente croisée
• les convertisseurs de devises et les outils de traduction
• les widgets de recommandation de produits
• les programmes de fidélité et de parrainage

Les applications désinstallées peuvent aussi laisser du code dans le thème, qui peut encore essayer de se charger. Consultez comment savoir si une application Shopify cause un problème ? pour savoir comment le trouver.

Des images et des vidéos volumineuses

Shopify diffuse automatiquement les images via son réseau de diffusion de contenu et peut fournir des versions redimensionnées, mais seulement si le thème demande des tailles raisonnables. Les problèmes viennent souvent :

• de fichiers d’origine très volumineux téléversés pour les bannières et les diaporamas
• de vidéos d’en-tête qui se lancent automatiquement
• de diaporamas avec de nombreuses images pleine largeur
• d’images insérées via du texte enrichi ou des constructeurs de pages sans contrôle de taille
• d’animations GIF utilisées là où une courte vidéo ou une image fixe suffirait

L’image en haut de page compte le plus, car c’est généralement elle que mesure le Largest Contentful Paint.

Un thème lourd ou très personnalisé

Certains thèmes intègrent de nombreuses fonctionnalités : méga-menus, animations, aperçu rapide, plusieurs carrousels, éléments fixes. Chaque fonctionnalité ajoute du code. Les personnalisations ajoutées au fil des années par différents développeurs peuvent aussi s’accumuler, en dupliquant parfois des fonctionnalités ou en chargeant des bibliothèques que le thème possède déjà.

Un thème ancien n’utilise pas forcément les approches plus efficaces disponibles dans les thèmes actuels.

Le suivi tiers

Les outils de marketing et d’analyse sont précieux, mais chacun ajoute du travail au navigateur. Les boutiques ont souvent :

• plusieurs outils d’analyse qui collectent des données similaires
• des pixels publicitaires de plusieurs plateformes
• des outils de cartes de chaleur et d’enregistrement de sessions
• des conteneurs de gestionnaire de balises qui chargent d’autres balises
• d’anciens codes de suivi de campagnes terminées

Ils peuvent affecter en particulier la réactivité, car ils exécutent du JavaScript pendant que le client essaie d’utiliser la page.

Les polices et les ressources externes

Les polices personnalisées, les bibliothèques d’icônes et les contenus intégrés comme les flux de réseaux sociaux ou les cartes ajoutent tous des requêtes. Charger plusieurs familles et graisses de polices s’additionne vite.

Les grandes collections et les filtres complexes

Les pages de collection qui affichent de nombreux produits, chacun avec plusieurs images, pastilles de couleur et badges, peuvent devenir lourdes. Les filtres, le défilement infini et les fonctions d’aperçu rapide en ajoutent encore.

Quelles sont les améliorations rapides ?

Ces modifications sont souvent peu risquées et peuvent faire une différence visible. Faites une modification à la fois et mesurez de nouveau.

• Supprimez les applications que vous n’utilisez plus. Vérifiez d’abord si elles contiennent des données dont vous avez besoin.
• Désactivez les intégrations d’applications dont vous n’avez pas besoin sur chaque page. Certaines peuvent être limitées ou retirées du thème.
• Compressez et redimensionnez les grandes images avant de les téléverser, en particulier les bannières et les images de diaporama.
• Remplacez les vidéos d’en-tête en lecture automatique par une image fixe, ou vérifiez que la vidéo est courte et optimisée.
• Réduisez le nombre de diapositives des diaporamas de la page d’accueil.
• Passez en revue les outils de suivi et supprimez les doublons ou les anciens pixels de campagne, après confirmation auprès de la personne qui gère le marketing.
• Limitez les familles et les graisses de polices dans les paramètres du thème.
• Réduisez le nombre de produits par page sur les pages de collection très lourdes.

Les améliorations rapides valent la peine, mais elles ne résoudront pas tous les cas. Si la boutique reste lente ensuite, il faut généralement examiner le code de plus près.

Qu’est-ce qui demande un travail plus approfondi ?

Certaines améliorations nécessitent un développeur et des tests minutieux :

• supprimer le code laissé par des applications désinstallées
• optimiser la façon dont le thème charge les scripts et les feuilles de style
• différer ou retarder les scripts non essentiels
• corriger les décalages de mise en page causés par des images, des bannières ou des widgets d’applications
• examiner le code Liquid personnalisé qui effectue un travail inutile
• regrouper les fonctionnalités gérées par plusieurs applications qui se chevauchent
• passer à un thème plus moderne, ce qui est un projet à part entière
• revoir la configuration du suivi pour que les balises se chargent plus efficacement

Le travail approfondi doit toujours se faire sur un thème dupliqué, avec des mesures avant et après, et un test complet du panier et du checkout avant publication.

Que faut-il éviter ?

• Courir après un score PageSpeed parfait. Le score est un repère, pas l’objectif. Une boutique que les clients trouvent rapide et facile à utiliser compte davantage.
• Installer une application de vitesse sans comprendre ce qu’elle fait. Certaines modifient le chargement des scripts d’une manière qui peut casser d’autres applications ou le suivi.
• Supprimer le suivi sans demander. Des rapports marketing et des campagnes publicitaires peuvent en dépendre.
• Changer beaucoup de choses à la fois. Vous ne saurez pas quelle modification a aidé ni laquelle a cassé quelque chose.
• Modifier le thème en ligne. Travaillez toujours d’abord sur un duplicata.
• Juger sur un seul test. Lancez les tests plusieurs fois et observez les données de terrain dans le temps.

Quand faut-il demander de l’aide ?

Envisagez de faire appel à un développeur lorsque :

• la boutique reste lente après la suppression des applications inutilisées et la correction des grandes images
• les données de terrain montrent de mauvais Core Web Vitals sur de nombreuses pages
• vous soupçonnez du code laissé par des applications ou du code personnalisé lourd
• les problèmes de vitesse sont apparus après une mise à jour du thème ou une nouvelle application
• le bouton d’ajout au panier ou les menus semblent lents à réagir
• vous envisagez un changement de thème principalement pour la vitesse
• les taux de conversion ont baissé et la vitesse pourrait y contribuer

Quelles informations rassembler ?

Les informations utiles sont notamment :

• les URL des pages qui semblent lentes
• les résultats de PageSpeed Insights pour ces pages, idéalement enregistrés sous forme de liens ou de captures d’écran
• le rapport de performance web des statistiques Shopify, s’il est disponible
• la liste des applications installées et des modifications récentes
• le nom et la version du thème
• les outils de suivi utilisés et qui les gère
• le moment où la boutique a commencé à sembler plus lente, si vous le savez

Comment D4Hub peut vous aider

Améliorer la vitesse consiste à trouver les vrais goulots d’étranglement et à les corriger sans casser les fonctionnalités ni le suivi dont l’entreprise dépend.

Selon la boutique, D4Hub peut vous aider à :

• mesurer la vitesse avec des données de laboratoire et des données d’utilisateurs réels
• identifier les applications, scripts et images qui ont le plus d’impact
• supprimer le code laissé par des applications désinstallées
• optimiser la façon dont le thème charge les images, les scripts et les polices
• corriger les décalages de mise en page sur les pages clés
• revoir la configuration du suivi et des balises avec votre équipe marketing
• tester les modifications sur un thème dupliqué avant publication
• vérifier le panier et le checkout après chaque modification
• vous conseiller sur l’intérêt d’un changement de thème

Vous pouvez demander un accompagnement à n’importe quel stade, d’un examen rapide de vos résultats PageSpeed à un projet complet de performance.

Questions fréquentes

Shopify lui-même est-il lent ?

L’hébergement et le réseau de diffusion de contenu de Shopify sont gérés par Shopify et ne constituent généralement pas le goulot d’étranglement. La plupart des problèmes de vitesse viennent des applications, des images, des thèmes, du suivi et du code personnalisé ajoutés à la boutique.

Pourquoi mon score PageSpeed est-il différent à chaque test ?

Les tests de laboratoire sont influencés par les conditions réseau, le lieu du test et le contenu exact chargé à ce moment-là. De petites différences entre les tests sont normales. Recherchez des tendances constantes et accordez plus de poids aux données de terrain des utilisateurs réels lorsqu’elles sont disponibles.

Ai-je besoin d’un score PageSpeed parfait ?

Non. Le score est un outil de diagnostic. Ce qui compte, c’est que les vrais clients puissent voir et utiliser vos pages rapidement, ce que reflètent mieux les données de terrain des Core Web Vitals et la sensation que donne la boutique sur un téléphone ordinaire.

Une application d’optimisation de la vitesse va-t-elle tout régler ?

Pas forcément. Certaines applications aident sur des points précis comme la compression d’images. D’autres modifient le chargement des scripts, ce qui peut perturber d’autres applications ou le suivi. Comprenez ce qu’une application modifie avant de l’installer, et testez-la d’abord sur un thème dupliqué.

Dois-je changer de thème pour accélérer la boutique ?

Un thème moderne peut aider, mais changer de thème est un projet qui implique de reconstruire les mises en page, de réinstaller les blocs d’applications et de tester chaque fonctionnalité. Mieux vaut d’abord faire les mesures et les améliorations rapides, pour savoir quelle part de la lenteur vient réellement du thème.

La vitesse influence-t-elle les ventes et le positionnement dans les moteurs de recherche ?

La vitesse est l’un des nombreux facteurs de l’expérience client d’une boutique, et les Core Web Vitals font partie de la manière dont Google évalue l’expérience sur la page. Il est difficile de prévoir l’effet d’une amélioration précise : la meilleure approche est de mesurer avant et après et de suivre vos propres données de conversion.