Savoir tout sur la vitesse de chargement + les outils d’analyse et notation sur Shopify

Notre équipe a optimisé plus de 100 boutiques Shopify et étudie et publie constamment des informations et des études de cas sur l’optimisation de Shopify.

Cet article vous fournit:

• Un aperçu et une compréhension de la performance (vitesse de chargement) en ce qui concerne les sites Shopify.
• Une explication des outils de performance courants et comment les utiliser
• Des liens vers des ressources supplémentaires pour approfondir le sujet

SECTIONS

• Qu’est-ce que la vitesse de chargement et qu’est-ce qui l’affecte ?
• Outils pour mesurer les performances des boutiques Shopify
• Conseils et avertissements pour l’optimisation des sites Shopify
• Nos conseils pour l’optimisation des performances de Shopify

QU’EST-CE QUE LA VITESSE DE CHARGEMENT ET QU’EST-CE QUI L’AFFECTE ?

Les sites web modernes sont des mélanges complexes de fichiers, d’images et de scripts provenant de perses sources pour produire ce que vous voyez dans le navigateur.

La vitesse de chargement est le temps qu’il faut à une page Web donnée pour charger ces ressources à partir des serveurs sur lesquels elles sont hébergées.

Les principaux facteurs qui influent sur la vitesse de chargement sont les suivants:

• Le poids de la page
• Le nombre de ressources chargées
• L’endroit où ces ressources sont chargées (sur votre propre serveur ou sur des serveurs tiers comme des applications)
• La vitesse et la charge actuelle du serveur où ces ressources sont chargées
• Localisation de l’utilisateur par rapport à l’emplacement des serveurs qui hébergent le contenu.
• Vitesse de la connexion internet de l’utilisateur

.

L’explication simple pour améliorer la vitesse de chargement : Réduire le poids des pages, charger moins de fichiers, réduire la dépendance à l’égard de ressources tierces

Pour les boutiques Shopify, il y a 3 facteurs principaux qui affectent la vitesse de chargement :

• Les images
• Code du thème
• Apps

Les images sont lourdes et doivent être compressées lorsqu’elles sont diffusées sur la page web. Vous pouvez installez une application d’optimisation des images Shopify comme Crush Pics ou bien compressez manuellement les images que les applications ne peuvent atteindre, en utilisant un outil comme TinyPNG.com.

Le lazy-loading est une technique qui consiste à charger les images que lorsque l’utilisateur fait défiler la page. Il s’agit d’une technique d’optimisation essentielle pour éviter que les images lourdes ne se chargent toutes au même temps pendant le chargement de la page. Voici un guide sur la technique du lazy-loading sur Shoipfy.

Vous devez également vous assurer que vous chargez des images de taille appropriée à l’appareil de l’utilisateur. Par exemple, si vous publiez une image de 4000px de large alors que l’utilisateur qui accède à votre boutique utilise un téléphone portable de 420px de large, vous chargez un poids extra du fichier sans raison. Pour contrôler la taille des images par appareil, utilisez l’attribut html srcset.

Le code du thème est accessible depuis l’éditeur de votre thème.

Il existe plusieurs techniques d’optimisation que vous pouvez appliquer à votre thème, par exemple l’utilisation de tactiques de préchargement, le lazy-loading des images et des vidéos, le report des vidéos pour qu’elles ne se chargent que lorsque l’utilisateur clique sur “play”, la réduction des CSS et des JavaScript, le chargement conditionnel des applications et des scripts uniquement sur les pages qui en ont besoin (au lieu de chaque page).

Pour vérifier que votre site Shopify ne présente pas de problèmes courants d’optimisation des thèmes et des images, passez-le à l’analyseur de site web.

En général, il n’y a pas de grande différence de vitesse de chargement entre deux thèmes distincts, à moins que votre thème ne soit gonflé par un excès de code gaspillé ou par un ancien code d’application qui n’est plus utilisé. On vous conseille donc de changer de thème lorsque vous êtes prêt pour un nouveau design, sinon nous commencerons par optimiser vos thèmes et applications actuels (à moins que vous ayez un budget important et que vous souhaitiez créer un thème personnalisé à partir de zéro).

Si vous êtes à la recherche d’un nouveau thème et souhaitez connaître nos recommandations, contactez-nous

Une chose que la plupart des thèmes Shopify ne font pas bien est de séparer les feuilles de style et les scripts pour qu’ils ne soient chargés que sur les modèles dont ils ont besoin. C’est pourquoi vous voyez l’avertissement Réduire les JavaScript / CSS inutilisés dans Google PSI sur la plupart des sites Shopify. La plupart des thèmes chargent un gros fichier CSS et un gros fichier JS pour le design et la fonctionnalité. Dans le passé, il était bon de charger un seul gros fichier, mais avec les navigateurs modernes, ce n’est pas nécessaire et cela peut être plus lent. Notre recommandation aux développeurs de thèmes : Créez un fichier CSS et JS global pour les styles et fonctionnalités communs. Créez ensuite un fichier CSS et JS pour chaque modèle principal (Accueil, Produit, Collection, Article, etc.) et ne chargez ce fichier que lorsque l’utilisateur se trouve sur ce modèle de page.

Les applications sont des plugins tiers qui exécutent du code sur la façade de votre boutique.

Les applications, généralement, ne contribuent pas beaucoup à la vitesse de chargement perçue, car si elles sont bien codées, elles se chargeront après le chargement du contenu du site (en supposant que l’application n’est pas nécessaire pour rendre le contenu au-dessus du pli), mais vous vous verrez souvent retirer des points dans les outils d’analyse générale pour les avoir utilisés.

Nous ne recommandons pas de supprimer les applications dans un but unique d’améliorer un score avec un outil quelconque. Les sites de commerce électronique s’appuient sur des fonctionnalités attrayantes pour leurs boutique afin d’augmenter les ventes. Dans le cas des sites de commerce électronique, la création de la meilleure expérience client est plus importante que l’obtention du meilleur score sur un outil de performance.

OUTILS POUR MESURER LES PERFORMANCES DES BOUTIQUES SHOPIFY

Nous utilisons principalement 2 outils pour mesurer et optimiser les boutiques Shopify : WebPageTest.org pour mesurer la vitesse de chargement, le poids des pages et le nombre de requêtes du serveur, et un analyseur des sites web comme GTmetrix.com pour identifier les problèmes d’optimisation qui peuvent et doivent être corrigés.

Voici une liste des outils les plus connus les avec leurs avantages et inconvénients.

Google PageSpeed Insights / Google Lighthouse

Résumé: Google PageSpeed Insights (alias Google PSI) utilise le moteur Lighthouse pour l’analyse des performances. Il s’agit d’un outil populaire parce que c’est Google. Il s’agit d’un bon outil d’analyse pour les sites web ou les applications afin de vous aider à identifier des idées d’optimisation, mais gardez à l’esprit que la plupart des sites de commerce électronique engageants obtiennent des résultats faibles selon leurs mesures (y compris Amazon).

Avantages:

• Beaucoup de points de données à analyser
• Documentation détaillée sur les avertissements d’optimisation + comment les corriger

Inconvenients:

• Effacer certains avertissements se traduit par une expérience utilisateur plus médiocre et un temps de chargement visiblement plus lent.
• Le système de notation est incohérent et le score n’est pas en corrélation avec la vitesse de chargement réelle (rendre un site plus rapide peut en fait faire baisser le score).
• Il n’est pas adapté aux sites de commerce électronique, ce qui peut conduire les propriétaires de magasins à prendre de mauvaises décisions, comme la suppression de fonctionnalités, dans le seul but d’augmenter leur score.
• Les données de laboratoire et les économies estimées ne sont pas précises et peuvent être trompeuses.

Comment l’utiliser:

Pour les applications Web et les sites Web où vous avez le contrôle total du code et des ressources chargées, cet outil est idéal pour optimiser votre code. Pour les boutiques des plateforme de commerce électronique comme Shopify, ce n’est pas une bonne mesure de la santé du site, mais vous pouvez l’utiliser pour identifier les goulots d’étranglement et les ressources à chargement lent provenant des applications, ce qui est particulièrement utile pour identifier les ressources qui se chargent et que vous n’utilisez plus (ancien code d’application).

Score de vitesse Shopify

Résumé: Cet outil s’affiche dans la section des thèmes de Shopify. Il utilise le même moteur que Google PSI et les mêmes informations s’appliquent.

Avantages:

• Suivi des mesures dans le temps
• Comparaison avec d’autres boutiques Shopify
• Facilement accessible dans votre tableau de bord Shopify

Inconvenients:

• Utilise le même moteur / système de notation que Google PSI qui pénalise les fonctionnalités de commerce électronique attrayantes.
• Provoque des frustrations chez les propriétaires de boutiques Shopify, qui pensent devoir obtenir une note de 100 (ce qui est impossible).
• Absence d’un avertissement indiquant que le score n’est pas égal à la vitesse et que vous ne devez pas supprimer des applications pour obtenir un meilleur score.

Comment l’utiliser:

Dans son état actuel, cet outil se contente d’extraire des données de Google PSI. Nous n’avons donc pas encore de recommandation précise, mais nous pensons que l’idée d’afficher des mesures de performance et d’effectuer un suivi dans le temps est bonne et que cet outil a du potentiel.

WebPageTest

Résumé: c’est le meilleur outil que nous ayons rencontré pour mesurer la vitesse de chargement. Nous l’utilisons pour l’analyse comparative (avant/après optimisation) et pour comparer le poids des pages, les ressources chargées et la vitesse de chargement.

Avantages:

• Excellent outil pour mesurer la vitesse de chargement réelle et les différences résultant des modifications apportées à votre site.
• Affiche une liste en cascade de chaque requête du serveur + les détails de la requête.
• Un indicateur excellent de la vitesse de chargement sur les appareils mobiles

Inconvénients:

• Le système de notation pourrait être amélioré (nous aimons les rapports de statistiques, mais les cartes de notation ne sont pas très utiles).

Comment l’utiliser:

Utilisez WebPageTest pour mesurer les performances de votre boutique avant et après un travail d’optimisation ou l’installation de nouvelles applications pour voir comment votre vitesse de chargement est affectée. Vous pouvez également utiliser la vue en cascade pour identifier les anomalies et comprendre comment chaque requête du serveur affecte votre site.

Pingdom

Résumé : Pingdom donne un aperçu général et détaillé de la façon dont les différentes ressources affectent la vitesse de votre site.

Avantages:

• Répartition facile à lire du contenu des pages par type, domaine et taille.
• De beaux graphiques et vue en cascade conviviale
• Bonne estimation de la vitesse de chargement pour les utilisateurs de bureau avec une connexion wifi rapide.

Inconvénients:

• La vitesse de chargement n’est pas constante d’une exécution à l’autre (pas bon pour faire des benchmarks)
• Les avertissements d’optimisation ne fournissent pas de recommandations exploitables.

Comment l’utiliser:

Pingdom est un outil agréable à utiliser pour avoir une vue d’ensemble des applications et ressources qui contribuent au poids de votre page et au nombre de requêtes. Il offre également une excellente vue en cascade pour analyser comment chaque ressource affecte la vitesse de votre page.

CONSEILS ET ASTUCES POUR OPTIMISER LES SITES WEB SHOPLIFTY

Que vous fassiez une optimisation en interne, que vous travailliez avec nous ou avec une autre agence d’optimisation Shopify, il est bon de connaître ces faits fondés sur des données avant de commencer un projet d’optimisation.

Google PSI / Google Lighthouse

Nous n’utilisons pas cet outil dans les projets d’optimisation Shopify mais nous comprenons qu’il est bien connu et que les gens veulent obtenir de bons résultats dans cet outil, mais il y a quelques points clés dont il faut se méfier :

• Il s’agit d’un outil général, qui n’est pas conçu spécifiquement pour les sites de commerce électronique où les indicateurs de performance clés sont basés sur les ventes (taux de conversion, revenus) et où les fonctionnalités de la vitrine sont couramment utilisées.
• Le score peut changer d’une manche à l’autre dans la même journée, sans aucune modification de votre site web.
• La suppression des avertissements ne fait pas toujours augmenter le score.
• La correction de certains avertissements peut avoir un effet négatif (ralentissement du temps de chargement perçu ou réel, dégradation de l’expérience utilisateur, diminution du taux de conversion).
• Le score Google PSI n’est pas égal à la vitesse
• Tous les avertissements ne peuvent pas être corrigés sur un site Shopify.
• La plupart des sites de commerce électronique obtiennent un score faible avec cet outil (même Amazon).
• Voir les ressources supplémentaires sous Google PSI dans la section Outils ci-dessus pour des études de cas qui confirment ces points.

Score de vitesse Shopify

• Shopify importe les résultats de Google PSI / Google Lighthouse, un outil général d’analyse des performances qui n’est pas adapté aux sites de commerce électronique.
• L’accélération de la vitesse de votre site n’implique pas l’amélioration de votre score de vitesse Shopify, car le score Google PSI est imprévisible et ne correspond pas à la vitesse de chargement réelle.
• Après une période de suivi et d’analyse les données, nous avons trouvé qu’un bon équilibre entre la vitesse et la fonctionnalité pour les sites Shopify avec des fonctionnalités intéressantes est un score entre 20 et 35.
• Ne paniquez pas et ne pensez pas que vous faites quelque chose de mal si vous n’obtenez pas un “A”. Il est rare d’obtenir un score élevé avec cet outil, surtout si vous utilisez des applications tierces.

NOS CONSEILS POUR OPTIMISER LA PERFORMANCE D’UNE BOUTIQUE SHOPIFY

Nous nous concentrons sur ce qu’il y a de mieux pour les boutiques de commerce électronique. Donc, nous ne vous dirons pas d’essayer pour avoir le site le plus rapide du web, ni de recommander des services qui augmentent les scores dans Google PSI sans améliorer la vitesse de chargement réelle. Nous vous conseillons plutôt d’optimiser votre site autant que possible sans sacrifier les fonctionnalités.

À notre avis (après avoir optimisé plus de 100 sites Shopify, réalisé perses études de cas et eu de nombreuses discussions internes), les 3 meilleurs outils pour optimiser les sites Shopify sont les suivants :

1. WebPageTest.org pour mesurer la vitesse réelle, le poids des pages et les demandes avant et après avoir apporté des modifications à votre site.

2. GTmetrix.com pour un aperçu rapide des principaux points d’optimisation et un système de notation adapté aux sites Shopify.

3. Un humain qui examine votre code pour s’assurer que vous n’avez pas de code d’application ancien ou de scripts inutiles en cours de chargement, ou des cas extrêmes où des centaines ou des milliers de ressources supplémentaires sont chargées

Si vous souhaitez une analyse gratuite de votre site Shopify, contactez-nous à expertify.store/fr#contact.

Dernier conseil de notre équipe : Concentrez-vous sur l’amélioration de la vitesse de chargement réelle et sur la fourniture de la meilleure expérience possible à vos clients.