Améliorer la performance de votre boutique en ligne

Votre boutique en ligne est composée d’un ensemble de fonctionnalités, comme le code du thème, les applis, les images, les vidéos, les carrousels, les flux de réseaux sociaux et les analyses. Ces fonctionnalités peuvent améliorer l’expérience des visiteurs et étendre les capacités de votre site.

Cependant, chaque fonctionnalité que vous ajoutez à votre boutique en ligne peut avoir une incidence sur sa performance. Certaines fonctionnalités peuvent ralentir votre site ou créer des comportements inattendus qui peuvent avoir une incidence sur l’expérience utilisateur.

La performance web vise à optimiser l’expérience utilisateur. Actuellement, la performance web se concentre sur trois domaines principaux qui sont également reflétés dans les Core Web Vitals :

• La vitesse de chargement, mesurée par le Largest Contentful Paint (LCP)
• La stabilité de la mise en page, mesurée par le Cumulative Layout Shift (CLS)
• La réactivité à l’interaction de l’utilisateur, mesurée par l’Interaction to Next Paint (INP)

L’optimisation de la performance web signifie que vos clients sont plus susceptibles de rester sur votre site et de réaliser une conversion.

Optimisations pour votre boutique en ligne

L’optimisation web est intégrée à votre boutique en ligne. L’optimisation web est également intégrée à toutes les nouvelles fonctionnalités. Vous n’avez rien de spécial à faire pour profiter des fonctionnalités suivantes :

• Votre boutique en ligne est hébergée sur des serveurs rapides et mondiaux et ne limite pas la bande passante de votre boutique. Vous pouvez vérifier le statut de votre boutique Shopify sur la page Statut de Shopify.
• Votre boutique en ligne dispose d’un réseau de diffusion de contenu (CDN) géré par Cloudflare qui 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 Cloudflare.
• Pour que les temps de chargement restent rapides, les images sont automatiquement optimisées à l’aide du CDN d’images. Combiné au code de votre thème, le CDN d’images peut servir le meilleur format d’image, qui est également redimensionné et compressé pour que la taille des fichiers reste petite.

Facteurs qui affectent la performance web

Pour les boutiques Shopify, les facteurs suivants sont ceux qui ont le plus d’incidence sur la performance web :

• Le thème de votre boutique en ligne
• Les applis que vous avez installées
• Tout code tiers supplémentaire que vous avez ajouté manuellement à votre boutique, y compris les gestionnaires de balises et les balises qu’ils contiennent

Cela signifie que vous devez vous concentrer sur les points suivants pour améliorer votre performance web :

• Utilisez un thème à jour et optimisé. Tous les thèmes de la famille Horizon et les thèmes de l’Online Store 2.0 par Shopify sont gratuits et optimisés pour la performance web. De plus, de nombreux autres thèmes tiers sont également optimisés pour la performance web. Vous pouvez consulter les dernières données sur la performance des thèmes.
• Si votre thème propose des transitions de page ou d’autres animations, comparez votre performance web avant et après les avoir activées. Les animations peuvent ralentir les pages.
• Évitez d’ajouter trop de sections aux modèles de page de votre thème. Un grand nombre de sections sur les pages peut réduire la performance web.
• Si vous avez des collections contenant un grand nombre de produits, envisagez d’activer la pagination pour limiter le nombre de produits qui se chargent en même temps.
• Évaluez vos applis installées et votre code tiers pour vous assurer qu’ils créent suffisamment de valeur pour compenser les éventuelles pertes de performance.
• Vérifiez votre gestionnaire de balises pour supprimer toutes les balises inutilisées ou de faible valeur. En savoir plus sur les bonnes pratiques pour les balises et les gestionnaires de balises.

Outils de test

Vous pouvez utiliser les outils suivants pour examiner la performance de votre boutique en ligne :

• Rapports sur la performance web : les rapports sur la performance web de Shopify utilisent les Core Web Vitals pour mesurer l’expérience des utilisateurs réels sur votre boutique en ligne.
• PageSpeed Insights : vous pouvez exécuter vos propres rapports à l’aide de PageSpeed Insights de Google pour afficher des indicateurs plus détaillés pour les pages de votre boutique.

Comprendre les recommandations de performance des tiers

Les outils d’analyse de la performance tiers peuvent suggérer des modifications pour améliorer la vitesse de votre boutique. Cependant, bon nombre de ces recommandations sont déjà mises en œuvre par Shopify ou ne s’appliquent pas aux boutiques Shopify.

Optimisations déjà incluses dans Shopify

Votre boutique Shopify inclut automatiquement les optimisations de performance suivantes :

Réseau de diffusion de contenu (CDN) : Shopify fournit un CDN de classe mondiale sans frais supplémentaires, garantissant une performance rapide à l’échelle mondiale. Tous les actifs sont servis en HTTP/2, ce qui réduit la surcharge par rapport aux protocoles plus anciens.

Mise en cache du navigateur : Shopify définit la mise en cache du navigateur pour les ressources pouvant être mises en cache sur une durée d’un an, soit la durée maximale possible. Cela signifie que les visiteurs réguliers de votre boutique bénéficieront de temps de chargement plus rapides.

Compression Gzip : Shopify utilise la compression Gzip sur les fichiers CSS, JavaScript, les documents et les pages pour réduire l’utilisation de la bande passante et améliorer les temps de chargement. La fonction Keep-alive est également activée pour la récupération de plusieurs fichiers.

Optimisation des images : Shopify compresse automatiquement les images JPG à l’aide d’algorithmes avancés, équilibrant la compression et l’attrait visuel. Les images sont souvent servies au format WebP pour une meilleure compression et un chargement plus rapide.

Minification des fichiers : Shopify minifie automatiquement les fichiers CSS et JavaScript lorsqu’ils sont demandés par votre boutique en ligne, ce qui réduit la taille des fichiers sans affecter la fonctionnalité.

Lorsque les recommandations de tiers ne s’appliquent pas

Les outils d’analyse tiers peuvent suggérer des modifications qui ne sont pas pertinentes pour les boutiques Shopify :

• Configurations au niveau du serveur : les recommandations concernant la configuration du serveur, les en-têtes HTTP ou les politiques de mise en cache sont déjà optimisées par l’infrastructure de Shopify.
• Mise en œuvre du CDN : les suggestions d’ajout d’un CDN ne sont pas nécessaires, car Shopify inclut par défaut un CDN haute performance.
• Paramètres de compression : les recommandations relatives à l’activation de la compression sont déjà mises en œuvre sur l’ensemble de la plateforme de Shopify.

Agir sur les recommandations pertinentes

Concentrez-vous sur les recommandations relatives au contenu et aux fonctionnalités spécifiques de votre boutique :

• Optimisation des images : assurez-vous que la taille de vos images importées est appropriée et que vous utilisez les formats recommandés.
• Évaluation des applis : déterminez si les applis installées apportent une valeur suffisante pour compenser un éventuel impact sur la performance.
• Optimisation du thème : choisissez des thèmes optimisés pour la performance et limitez le nombre de sections sur les modèles de page.

Résolution des problèmes de chargement lent des pages

Si votre boutique se charge lentement, suivez ces étapes pour identifier et résoudre le problème :

Étape 1 : Vérifier le problème

1. Testez vous-même la vitesse de chargement de votre boutique depuis différents appareils et connexions Internet.
2. Demandez à d’autres personnes de tester votre boutique pour confirmer qu’il ne s’agit pas d’un problème local lié à votre connexion Internet.
3. Utilisez des outils de test comme PageSpeed Insights pour obtenir des indicateurs de performance spécifiques.

Étape 2 : Identifier la cause

Vérifier le nombre excessif d’applis : un trop grand nombre d’applis chargeant des actifs sur votre boutique en ligne peuvent en ralentir la performance. Examinez les applis que vous avez installées et supprimez celles qui ne sont pas essentielles à la vente.

Vérifier la présence d’images volumineuses : les pages contenant de nombreuses images de haute qualité peuvent se charger lentement. Optimisez vos images ou réduisez le nombre d’images affichées. En savoir plus sur les tailles d’image recommandées.

Identifier les scripts lents : si votre site reste bloqué sur une page blanche avant de se charger d’un seul coup, utilisez les outils pour les développeurs de votre navigateur afin d’identifier les scripts qui se chargent lentement. Contactez le développeur de l’appli ou du thème pour résoudre le problème.

Étape 3 : Prendre des mesures

Supprimer les applis inutiles : la désinstallation d’une appli ne supprime pas automatiquement son code de votre thème. Vous devrez peut-être contacter le développeur de l’appli pour obtenir des instructions complètes sur la suppression.

Optimiser les images : utilisez des formats de fichier appropriés (JPG pour les photos, PNG pour les graphiques avec transparence) et redimensionnez les images pour qu’elles correspondent à leur taille d’affichage.

Évaluer la performance du thème : envisagez de passer à un thème optimisé pour la performance si votre thème actuel est à l’origine de ralentissements importants.

Obtenir de l’assistance pour la performance de la boutique en ligne

Si vous utilisez un thème gratuit de Shopify, l’Assistance Shopify pourra peut-être vous aider à apporter des améliorations de base à la performance.

Si vous utilisez un thème tiers et que vous avez besoin d’assistance, vous devez contacter le développeur de votre thème, engager un expert en performance web Shopify ou engager un partenaire Shopify pour la performance et la vitesse du site. En savoir plus sur la manière d'engager un partenaire Shopify.

Si votre problème de performance provient d’une appli, vous pouvez contacter le développeur de votre appli.

Si vous avez une équipe de développement ou une agence partenaire, vous pouvez également les contacter pour obtenir une assistance supplémentaire.

Informations techniques et ressources pour la résolution de problèmes

Si vous êtes un développeur qui cherche à améliorer la performance d’une boutique en ligne, d’un thème ou d’une appli Shopify, vous pouvez consulter les ressources suivantes pour chaque Core Web Vital. En savoir plus sur les bonnes pratiques de performance pour les thèmes Shopify.

Vitesse de chargement

Largest Contentful Paint (LCP) mesure la vitesse de chargement en se basant sur la vitesse à laquelle le plus grand élément de l’écran devient visible. Le temps de chargement du premier octet (TTFB) et le First Contentful Paint (FCP) sont des indicateurs complémentaires qui vous aident à mieux comprendre l’origine du problème. Vous pouvez en savoir plus sur le débogage des causes courantes de chargement lent dans les boutiques en ligne Shopify Liquid.

Stabilité visuelle

Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle en se basant sur l’ampleur des changements inattendus de la mise en page du contenu pendant le chargement. Pour une analyse approfondie du débogage du CLS, lisez l’article Comment optimiser le Cumulative Layout Shift (CLS) sur les sites Shopify.

Interactivité

Interaction to Next Paint (INP) mesure l’interactivité en fonction du temps que met la page à devenir réactive à la plupart des actions de l’utilisateur. Par exemple, les actions de l’utilisateur telles que le clic sur un lien ou un bouton.

Si votre score INP est faible, c’est probablement parce que votre boutique contient trop de code JavaScript provenant de votre thème, de vos applis, ou de code tiers/de gestionnaire de balises. Efforcez-vous de supprimer les éléments les plus problématiques. En savoir plus dans l’article 3 façons de trouver les pires coupables JavaScript qui ralentissent le chargement de la page. Si vous rencontrez toujours des problèmes avec l’INP, consultez les ressources sur web.dev pour en savoir plus.