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.
Sur cette page
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.
Shopify améliore sans cesse son code et son infrastructure. Votre score de vitesse peut refléter certaines de ces améliorations.
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 RDC désigne un réseau de diffusion de contenu. Avec Shopify, les marchands bénéficient d’un RDC d’envergure mondiale géré par Cloudflare. Il garantit que votre boutique en ligne se charge rapidement dans le monde entier. Vous pouvez vérifier le statut du RDC sur la page de statut de Cloudflare.
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 l’objet Liquid content_for_header
L’objet Liquid `` 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 boutons de paiement dynamique. Le chargement de cet objet 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 :
- Désactivez les fonctionnalités de l'application que vous n’utilisez pas, ou supprimez l’application si vous n’en avez pas besoin. Tenez compte de l'équilibre entre les fonctionnalités de la boutique en ligne et sa vitesse.
- Si vous supprimez une application, envisagez de supprimer le code ajouté dans le cadre du processus d’installation de l’application. Certaines applications vous aident avec ce processus en encapsulant leur code dans
{% comment %}balises qui mentionnent le nom de l’application.
La suppression du code de l’application non utilisée est une bonne pratique, qui évite d'exécuter un code pour les fonctionnalités non utilisées, et qui facilite la lecture du code de votre thème.
- Consultez le développeur/la développeuse de votre application.
- Faites appel à un(e) Expert(e) Shopify pour obtenir de l’aide. En savoir plus sur le recrutement d’un expert Shopify.
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 :
- Désactivez les fonctionnalités de thème que vous n’utilisez pas. Tenez compte de l'équilibre entre les fonctionnalités de la boutique en ligne et sa vitesse.
- Pensez à utiliser une police système.
- Consultez la personne qui a développé votre thème. Si vous utilisez un thème gratuit de Shopify, vous pouvez contacter l’assistance pour obtenir des conseils.
- Si vous utilisez un thème créé par un tiers, vous pouvez contacter le développeur de votre thème ou engager un(e) Expert(e) Shopify.
- Envisagez d’installer un thème optimisé pour la performance, tel que Dawn.
- Faites appel à un(e) Expert(e) Shopify pour obtenir de l’aide. En savoir plus sur le recrutement d’un expert Shopify.
Fonctionnalités de thème ou d’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 :
- Utilisez un outil heatmap pour voir quelles fonctionnalités sont utilisées par vos clients. Désactivez les fonctionnalités qui ne sont pas utiles.
- Désactivez les fonctionnalités que vous n’utilisez pas. Tenez compte de l'équilibre entre les fonctionnalités de la boutique en ligne et sa vitesse.
- Consultez les développeurs de votre thème et de votre application et demandez-leur s’ils préchargent les données.
- Faites appel à un(e) Expert(e) Shopify pour obtenir de l’aide. En savoir plus sur le recrutement d’un expert Shopify.
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 effectuer les démarches suivantes :
- Exécutez l'extension Shopify Theme Inspector pour Chrome afin d’identifier les lignes de code ralentissant les pages de votre boutique en ligne.
- Faites appel à un(e) Expert(e) Shopify pour vous aider à trouver les portions de code inefficaces ou inutiles.
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.
- Faites appel à un(e) Expert(e) Shopify pour obtenir de l’aide. En savoir plus sur le recrutement d’un expert Shopify.
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 vos clients, vous pouvez utiliser des polices système. Celles-ci sont déjà installées sur la plupart des ordinateurs.
Vous pouvez sélectionner une famille de polices mono, avec ou sans empattement. Lorsque vous utilisez l’une de ces familles de polices, vous pouvez aussi utiliser les styles de police, tels que gras ou italique.
La police qui s’affiche sur l’ordinateur de vos clients dépend de leur système d’exploitation. Vous trouverez ci-dessous des exemples de polices pouvant être utilisées pour restituer du texte lorsque vous sélectionnez une famille de polices système :
- Mono: Menlo, Consolas, Monaco, Liberation Mono ou Lucida Console
- Sans empattement : BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu ou Helvetica Neue
- Avec empattement : Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times ou Source Serif Pro
Outils de résolution de problèmes
Vous pouvez utiliser les outils suivants pour vérifier la vitesse de votre boutique en ligne.
Si vous êtes développeur, vous pouvez optimiser davantage la performance de votre thème en utilisant les outils et les bonnes pratiques de Shopify. En savoir plus sur Shopify.dev.
Lighthouse
Le rapport Vitesse de la boutique en ligne de Shopify utilise Lighthouse pour mesurer la vitesse de votre boutique. Vous pouvez exécuter 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 la signification de ces indicateurs, consultez la documentation sur les notes de performance de Google Lighthouse. Vous pouvez également engager un(e) Expert(e) Shopify pour vous aider à comprendre les indicateurs et obtenir des suggestions d’améliorations. En savoir plus sur le recrutement d’un expert Shopify.
Shopify Theme Inspector for Chrome
L'extension Shopify Theme Inspector pour 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 pour Chrome.
Obtenir de l’aide avec la vitesse de la boutique en ligne
Si vous utilisez un thème gratuit de Shopify, l’assistance Shopify sera peut-être en mesure de 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 engager un(e) Expert(e) Shopify. En savoir plus sur le recrutement d’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.