Améliorer la vitesse de votre boutique en ligne

Plusieurs facteurs influent sur la vitesse de votre boutique en ligne, dont certains que vous pouvez contrôler.

Si vous ne savez pas quelle est la vitesse d’exécution de votre boutique en ligne, vous pouvez consulter le rapport sur la vitesse de votre boutique en ligne.

Facteurs non contrôlables

Appareil, réseau et emplacement de votre client

Les clients qui visitent votre boutique vivent dans le monde entier et disposent d'appareils et de connexions Internet différents. Cela signifie que votre boutique pourrait se charger plus rapidement ou plus lentement en fonction de ces facteurs.

Si un client vous contacte au sujet de la vitesse de votre boutique, demandez-lui de vérifier qu’il dispose bien de la dernière version de son navigateur, qu'il a récemment vidé son cache et que son fournisseur de services Internet ne rencontre pas de problème ralentissant ses performances.

Infrastructure Shopify

Shopify héberge votre boutique en ligne sur des serveurs rapides et internationaux et ne limite pas la bande passante de votre boutique. Vous pouvez vérifier le statut de votre boutique Shopify sur Statut Shopify.

Vous trouverez ci-dessous certaines fonctionnalités qui influent sur la vitesse de votre boutique en ligne.

Réseau de diffusion de contenu, ou CDN

L'acronyme CDN désigne un réseau de diffusion de contenu. Avec Shopify, les marchands bénéficient d'un CDN d'envergure mondiale dirigé par Fastly. Il garantit que votre boutique en ligne se charge rapidement dans le monde entier. Vous pouvez vérifier le statut du CDN sur la page de statut de Fastly.

Cache du navigateur local

Votre boutique met en cache ou enregistre temporairement certains éléments dans l'espace de stockage local de votre client. La prochaine fois que votre client visitera votre boutique en ligne, le navigateur pourra charger les ressources du cache au lieu d’envoyer une nouvelle requête au serveur.

Shopify définit la mise en cache du navigateur pour les ressources de votre boutique à un an pour chaque fichier. Les fichiers pouvant être mis en cache incluent les images et les fichiers aux formats PDF, JS et CSS.

Cache de page côté serveur

Shopify effectue une mise en cache non seulement en local sur le navigateur, mais aussi côté serveur pour les pages. Ainsi, le premier chargement d'une page peut être assez lent, mais les chargements ultérieurs sont plus rapides, car les clients reçoivent une copie en cache.

Ressources de la balise Liquid content_for_header

La balise Liquid {% content_for_header %} injecte des ressources utilisées par diverses fonctionnalités de la boutique en ligne, notamment les analyses de performance et les fonctionnalités facultatives telles que les bouton de paiement dynamique. Le chargement de cette balise et des ressources associées influe sur la vitesse de votre boutique. Shopify optimise la balise et ses ressources pour la rendre plus rapide.

Facteurs contrôlables

Vous trouverez ci-dessous des facteurs pouvant influer sur la vitesse de votre boutique en ligne et la façon dont vous pouvez les contrôler.

Applications

Lorsque vous ajoutez des applications pour modifier les fonctionnalités ou l’apparence de votre boutique en ligne, elles ajoutent un code au thème pour permettre leur exécution. Il est possible de supprimer ou de réorganiser certaines parties du code afin d’améliorer les performances de votre boutique en ligne. Si vous n’utilisez pas une application, vous pouvez la supprimer.

Si vous constatez qu'une application ralentit votre boutique, procédez comme suit :

Thèmes

Les thèmes sont constitués de code Liquid, HTML, CSS et JavaScript. Lorsque vous modifiez ou personnalisez des thèmes, les tailles de fichiers peuvent augmenter et influer sur la vitesse de votre boutique.

Si vous constatez que quelque chose ralentit votre boutique, procédez comme suit :

Fonctionnalités du thème ou de l’application

Certaines fonctionnalités activées peuvent également influer sur la vitesse de votre boutique. Par exemple, certains pop-up d'aperçu préchargent les informations de chaque page de produit lorsqu’une page de collection se charge. Or, le chargement de données non utilisées par vos clients peut ralentir votre boutique sans apporter de valeur ajoutée.

Si vous constatez qu'une fonctionnalité ralentit votre boutique, vous pouvez suivre les étapes suivantes :

Code Liquid complexe ou inefficace

Vous pouvez modifier la quasi totalité du code Liquid utilisé pour afficher votre boutique, mais certaines méthodes d'écritures manquent d'efficacité. La répétition d'opérations complexes peut augmenter votre temps d'affichage Liquid, ce qui ralentit votre boutique.

Par exemple, si vous souhaitez organiser les produits d'une collection par prix, vous devez le faire avant de parcourir les produits de votre collection et non pas dans le code de la boucle. Cela est dû au fait que l’ordre des produits ne change pas pour chaque produit et que le calcul de l’ordre des produits ajoute du temps de traitement à la demande.

Si vous craignez que votre code ne soit pas optimisé, vous pouvez suivre les étapes suivantes :

  • Faites appel à un expert Shopify pour vous aider à trouver les portions de code inefficaces ou inutiles.
  • Exécutez l'extension Shopify Theme Inspector pour Chrome afin d’identifier les lignes de code ralentissant les pages de votre boutique en ligne.

Images et vidéos

Les images et les images surdimensionnées, qui ne sont pas visibles, peuvent entraver le chargement d’autres parties plus importantes d’une page. Si l’utilisateur doit attendre que les grandes images soient chargées, il se peut que votre boutique soit lente.

Shopify ajoute des garanties pour vous empêcher de surcharger votre boutique en ligne en images ou en vidéos. Par exemple :

  • Vous ne pouvez pas avoir plus de 50 produits sur une page de collection ou 25 sections sur votre page d’accueil.
  • De nombreux thèmes diffèrent le chargement des images qui ne sont pas actuellement à l’écran.
  • De nombreux thèmes chargent également les images dans une taille adaptée à celle de l’écran sur laquelle elles s’affichent.

Toutefois, ces précautions ne suffisent pas à empêcher totalement les images ou les vidéos de ralentir les performances de votre boutique en ligne.

Si vous constatez que des images ralentissent votre boutique, vous pouvez suivre les étapes suivantes :

  • Consultez le guide d'optimisation des images.
  • Limitez les diaporamas d’images vedettes à 2 ou 3 diapositives ou utilisez une image vedette.
  • Consultez le développeur de votre thème pour obtenir des conseils sur la meilleure façon d'utiliser les images avec leur thème.
  • Embauchez un Shopify Expert pour obtenir de l'aide.

Polices

Vous pouvez choisir parmi plusieurs polices pour le texte de votre boutique en ligne. Toutefois, si vous utilisez une police qui n’existe pas encore sur l’ordinateur de votre client, il devra la télécharger avant que votre texte puisse s’afficher. Cela influe sur le temps de chargement de votre boutique.

Pour éviter de télécharger une nouvelle police sur l’ordinateur de votre client, vous pouvez utiliser une police système. Il s'agit d'une police déjà installée sur la plupart des ordinateurs. Vous pouvez utiliser les polices système suivantes dans votre thème Shopify :

  • Lucida Grande
  • Trebuchet MS
  • Garamond
  • Palatino
  • Times New Roman
  • Courier New
  • Monaco

Vous pouvez toujours utiliser les styles de police, tels que gras ou italique, lorsque vous utilisez l’une des polices ci-dessus.

Outils de résolution de problèmes

Vous trouverez ci-dessous des outils que vous pouvez utiliser pour vérifier la vitesse de votre boutique en ligne.

Lighthouse

Le rapport de vitesse de la boutique en ligne de Shopify mesure la vitesse de votre boutique avec Lighthouse. Vous pouvez publier votre propre rapport Lighthouse à l'aide de Google PageSpeed Insights pour obtenir des indicateurs plus détaillés concernant les pages de votre boutique. Pour en savoir plus sur ce que ces indicateurs signifient, consultez la documentation sur les notes de performance de Google Lighthouse. Vous pouvez également faire appel à un expert Shopify pour vous aider à comprendre les indicateurs et obtenir des suggestions d'améliorations.

Shopify Theme Inspector for Chrome

L'extension Shopify Theme Inspector for Chrome est un outil de profilage qui utilise un graphique de type "flamme" pour afficher les performances de rendu du code Liquid. Cet outil vous aide à identifier les lignes de code qui ralentissent les pages de votre boutique en ligne. Découvrez comment utiliser Shopify Theme Inspector for Chrome.

Où trouver de l'aide ?

Si vous utilisez un thème gratuit de Shopify, l’assistance Shopify pourrait vous aider à en améliorer les performances de base.

Si vous utilisez un thème créé par un tiers et que vous avez besoin d’aide, vous devez contacter le développeur de votre thème ou faire appel à un expert Shopify.

Si vous disposez d'une équipe de développement ou d'une agence partenaire, vous pouvez également les contacter pour obtenir de l'aide supplémentaire.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement