Améliorer la performance de votre boutique en ligne

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

Pour en savoir plus sur la performance de votre boutique en ligne aujourd’hui, consultez votre rapport Performances web.

Facteurs non contrôlables

Ces facteurs peuvent influer sur les performances de votre boutique, mais ne peuvent pas être contrôlés par les paramètres ou ajustements que vous pouvez apporter à votre boutique Shopify. Cela inclut des facteurs provenant de vos clients, tels que leur appareil ou leur vitesse d’internet, ainsi que des facteurs de Shopify, tels que les mises à jour de l’infrastructure de Shopify.

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 des clients vous contactent au sujet de la vitesse de votre boutique, demandez-leur de vérifier qu’ils utilisent bien la dernière version de leur navigateur, qu’ils ont récemment vidé leur cache et que leur fournisseur d’accès Internet (FAI) ne subit pas de panne ou de problème ralentissant sa performance.

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. Certaines de ces améliorations peuvent se refléter dans vos indicateurs de performance.

Voici quelques caractéristiques influençant la vitesse de votre boutique en ligne.

Réseau de diffusion de contenu, ou CDN

CDN signifie réseau de diffusion de contenu. Le CDN stocke vos images et d’autres fichiers, tels que le contenu de la page de votre interface administrateur Shopify Contenu > Fichiers. Le CDN est l'endroit où Shopify propose aux marchands un CDN de classe mondiale, géré par Cloudflare, garantissant 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 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 exercer un impact 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 qui a été ajouté dans le cadre du processus d’installation de l’application. La plupart des applications supprimeront leur code automatiquement pour vous, mais vous pouvez vérifier auprès du développeur/de la développeuse de l’application pour en assurer la sécurité. Certaines applications vous aident dans ce processus en enveloppant leur code dans les balises {% comment %} mentionnant le nom de l’application. Il est préférable de supprimer le code d’application inutilisé, qui évite d’avoir accès à du code pour les fonctionnalités non utiles et facilite la lecture du code de votre thème.
  • Consultez le développeur/la développeuse de votre application.

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 vos performances web.

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

Fonctionnalités de thème ou d’application

Certaines fonctionnalités, lorsqu'elles sont activées, peuvent également influer sur les performances de votre boutique. Par exemple, certaines fenêtres pop-up d’aperçu préchargent les informations de chaque page de produit lorsqu’une page de collection se charge. Or, le chargement des données supplémentaires non utilisées par vos clients peut ralentir la vitesse de chargement de 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. Il existe des façons efficaces et inefficaces d’écrire du code Liquid. La répétition d’opérations complexes peut augmenter votre temps d’affichage Liquid, ce qui a un impact sur vos performances web globales.

Par exemple, si vous souhaitez organiser les produits d’une collection selon le prix, vous devez le faire avant d’activer la boucle des produits de votre collection, au lieu d’intégrer cette activation au 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) Partenaire Shopify pour vous aider à trouver les portions de code inefficaces ou inutiles.

Images et vidéos

Les images surdimensionnées et les images masquées peuvent entraver le chargement d’autres parties plus importantes d’une page. Si les utilisateurs doivent attendre que les images de grande taille soient chargées, ils auront peut-être l’impression que votre boutique est 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 d’affecter la performance 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.

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 les performances 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.

Informations PageSpeed

Le rapport du tableau de bord des performances web de Shopify utilise les indicateurs Core Web Vital pour évaluer la façon dont les utilisateurs réels utilisent votre boutique en ligne. Vous pouvez exécuter vos propres rapports à l’aide de Google PageSpeed Insights afin d’afficher des indicateurs plus détaillés pour les pages de votre boutique.

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’assistance pour améliorer les performances de votre 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/la développeur(-euse) de votre thème ou engager un(e) Partenaire Shopify. En savoir plus sur la marche à suivre pour engager un Partenaire Shopify.

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

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

Essayez gratuitement