9 conseils pour l'optimisation de la vitesse du site Shopify

Shopify est une plate-forme incroyablement accessible, avec d'énormes entreprises comme Lindt capables de créer et d'ouvrir leur boutique de commerce électronique en seulement 5 jours. Il est facile de lancer un magasin et de commencer à trader en un rien de temps, et dispose de nombreuses fonctionnalités intégrées pour faciliter ce processus.

Cependant, il y a certaines choses que les commerçants doivent savoir pour tirer le meilleur parti de leurs magasins. La vitesse du site reste l'un de ces facteurs critiques. Un site à chargement lent présente de nombreux inconvénients : faible engagement et taux de rebond élevés, moins de trafic, moins de ventes et même un mauvais classement dans les moteurs de recherche (Google aime les pages avec un temps de chargement rapide), il est logique de faire ce que vous pouvez pour rendre votre site le plus rapidement possible.

Dans cet article, nous examinerons les moyens d'évaluer la vitesse actuelle de votre site, puis vous donnerons nos meilleurs conseils pour vous assurer que vous faites tout ce que vous pouvez pour augmenter sa vitesse.

Comment vérifier la vitesse actuelle de votre site Shopify

Utilisez PageSpeed ​​Insights qui vous donnera un score de vitesse et des recommandations d'amélioration. Il séparera les résultats sur ordinateur et sur mobile et fera des recommandations telles que :

• Optimisez vos images
• Minifier JavaScript et CSS
• Éliminer JavaScript et CSS bloquant le rendu
• Tirez parti de la mise en cache du navigateur et réduisez le temps de réponse du serveur
• Évitez les redirections
• Compression Gzip

Il ne suffit pas d'exécuter le test sur votre page d'accueil - cela vaut la peine de tester au moins les 10 pages les plus visitées de votre site - c'est là que les améliorations de vitesse auront le plus grand impact. Consultez notre guide pour exécuter et interpréter un audit de vitesse de site Web.

Il y a cependant quelques mises en garde pour l'outil Insights. Bien que cela soit utile, il convient de garder à l'esprit certaines choses. Il marque les sites qui s'appuient fortement sur Javascript (comme le font la plupart des sites Shopify) et juge les sites par rapport à une liste de contrôle technique qui ne tient pas compte de certaines considérations pratiques. Il peut également varier en fonction de la quantité de bande passante disponible au moment où le test est effectué.

Je me souviens d'un client d'une autre agence dont le score est passé de 98 à 96 suite à des changements de site, et qui insistait pour faire remonter le score en faisant d'autres changements. Ce qu'ils n'ont pas compris, c'est que cela pourrait casser ou saper d'autres zones de leur site et ce n'était pas le nombre dans la partition qui était le facteur critique, mais la convivialité et la vitesse réelles du site lui-même.

Donc en résumé : c'est un bon guide pour avoir une idée de la vitesse de votre site, mais pas l'alpha et l'oméga.

Vous pouvez également utiliser Pingdom ou GTmetrix pour évaluer la vitesse de votre page - essayer quelques outils différents vous donnera un aperçu plus large des performances de vitesse, des problèmes et des mesures correctives.

Comment augmenter la vitesse de votre site

Une fois que vous avez une idée des performances de votre site, vous pouvez avoir des actions recommandées qui découlent de l'outil que vous avez utilisé pour exécuter vos pages. Si tel est le cas, pour les compléter, voici nos dix principales actions que vous pouvez entreprendre pour augmenter la vitesse de votre site.

1 Utilisez AMP pour rendre les pages plus rapides

AMP (pages mobiles accélérées) permet d'améliorer la vitesse de chargement des pages sur les appareils mobiles. Le principe est de servir les pages Web dans un format standard (défini par Google) afin de réduire la taille de la page et le temps de chargement. Par exemple, tout le contenu de la page est chargé en une seule fois et les navigateurs connaissent à l'avance la disposition des pages AMP.

Bien que Shopify n'offre pas de versions AMP de ses magasins en standard, il existe des applications comme RocketAmp disponibles dans l'App Store qui créeront des versions AMP des pages de votre magasin en votre nom. Gardez à l'esprit que si vous suivez cet itinéraire et arrêtez d'utiliser l'application plus tard, cela pourrait entraîner des problèmes d'erreurs de page.

2 Optimisation des images

La compression de vos images est importante pour accélérer le chargement des pages Web, en particulier sur les sites de commerce électronique.

La compression d'image consiste à prendre l'image dans sa taille d'origine, puis à réduire sa taille de fichier, sans affecter sa qualité.

Shopify vous permet d'utiliser les formats d'image suivants :

• JPEG ou JPG
• JPEG progressif
• PNG
• GIF

Les images PNG sont utiles si vous avez besoin de pixels transparents dans votre image (vous les verrez souvent avec un motif de grille en arrière-plan indiquant la partie transparente), mais elles occupent généralement plus d'espace que les JPEG, alors pensez à utiliser les JPEG en standard si vous pouvez.

Il existe deux niveaux de compression :

• 'compression sans perte', qui vous donne un petit fichier sans réduction de la qualité de l'image
• 'compression avec perte', qui se traduit par un fichier encore plus petit MAIS un sacrifice de qualité d'image

Les deux options s'offrent à vous, mais en tant que site de commerce électronique vendant des produits, il est probable que l'imagerie soit un élément important pour persuader les clients d'acheter. Dans une récente enquête auprès de 1 500 acheteurs en ligne menée par Eastside Co, 37,8 % des personnes interrogées ont déclaré qu'elles pensaient que l'imagerie des produits était "très ou extrêmement influente" dans leurs décisions d'achat. Dans cet esprit, envisagez d'utiliser une compression sans perte pour les fichiers plus petits, mais sans réduction de la qualité.

Lorsque vous téléchargez des images sur votre site, assurez-vous qu'elles correspondent à la taille requise pour la page en termes de largeur et de hauteur en pixels. Vous pouvez utiliser l'outil gratuit tinypng.com pour réduire la taille de vos images.

3 Utilisez un thème rapide et réactif

Si vous utilisez un thème prêt à l'emploi au lieu d'utiliser les services d'un expert Shopify comme Eastside Co, assurez-vous d'en choisir un qui soit rapide et réactif. Cela signifie qu'ils modifieront les éléments de votre site Web en fonction des dimensions de l'appareil utilisé pour le visualiser, ce qui offrira une expérience utilisateur meilleure et plus rapide.

4 Passez en revue les applications installées sur votre boutique

Accédez à l'administrateur de votre boutique Shopify et passez en revue toutes les applications que vous avez installées, et supprimez celles dont vous n'avez pas besoin ou que vous n'utilisez pas. Souvent, le problème derrière la vitesse plus lente des sites Shopify est le nombre d'applications qui y sont exécutées : chaque application que vous installez est plus de code sur votre site Web et plus d'éléments à charger.

En plus des applications, il vaut également la peine de regarder tout code tiers que vous utilisez et d'avoir un rangement général s'il y a quelque chose qui n'est plus nécessaire.

5 Réduire le nombre de requêtes HTTP

Chaque fois qu'un visiteur charge l'une de vos pages Web dans son navigateur, des fichiers Web supplémentaires sont également chargés, tels que des fichiers CSS, des Javascripts, des images de conception, etc. Chaque fois qu'un fichier comme celui-ci est demandé, il crée une demande supplémentaire pour le navigateur. procéder. Celles-ci sont appelées requêtes HTTP et plus il y en a, plus cela prendra de temps.

Il existe un certain nombre de mesures techniques que vous pouvez prendre pour réduire le nombre de requêtes HTTP. Cet article fournit 9 actions qui vous aideront à le faire et à augmenter la vitesse de votre site.

6 Minimiser les liens brisés et les redirections

Les liens brisés peuvent augmenter vos requêtes HTTP (voir point 5), et vous ne voulez pas que vos visiteurs y atterrissent car cela augmente les chances qu'ils quittent votre magasin et achètent ailleurs.

Les redirections inutiles (la page A pointe vers la page B qui pointe vers la page C où le visiteur atterrit finalement, par exemple) signifient que votre visiteur met plus de temps à arriver et ralentit la vitesse globale du site.

Il existe des applications disponibles dans la boutique d'applications Shopify pour identifier les liens rompus et les redirections et vous aider à les réparer de manière continue.

7 Débarrassez-vous des curseurs et des images de carrousel

Les curseurs persistent sur certains sites Web, mais nous recommandons une seule image de héros plutôt qu'un carrousel d'images. Pourquoi?

• Presque personne ne clique jamais sur la première diapositive, sans parler d'attendre de voir la deuxième ou la troisième
• Chaque diapositive signifie un poids supplémentaire pour la page et comme personne ne les voit ou ne les utilise vraiment, elles sont largement redondantes
• Ils sont encore moins efficaces sur les appareils mobiles

Utilisez plutôt une image « héros » (optimisée comme décrit). C'est tout ce dont vous avez besoin.

8 Mettez tout le code de suivi via Google Tag Manager (GTM)

Déplacez n'importe quel code tiers que vous utilisez dans Google Tag Manager. Au fil du temps, un logiciel de marketing ou un code d'analyse sera ajouté à votre site et il peut devenir difficile à manier. L'utilisation de GTM signifie que tout le code tiers est plus facile à gérer et qu'il ne se charge que sur les pages pertinentes. Cela signifie également que vous pouvez garder une trace de tout cela et supprimer tous les éléments qui deviennent redondants au fil du temps.

9 Chargement paresseux

C'est un autre moyen simple d'augmenter la vitesse de votre boutique Shopify. Le chargement paresseux est une méthode dans laquelle tout ce qui n'est pas "au-dessus de la ligne de flottaison" sur une page n'est pas chargé tant que l'utilisateur n'a pas fait défiler vers le bas.

C'est une excellente "astuce" pour optimiser la vitesse sur les pages qui contiennent beaucoup d'images ou qui présentent des vidéos plus bas. Essentiellement, vous ne récupérez que les éléments nécessaires, au lieu de tout charger en même temps. Consultez ce guide détaillé sur la façon d'implémenter le chargement paresseux à partir de CSS Tricks.

Alors voilà : 9 points pratiques à retenir pour être sûr de tout mettre en œuvre pour augmenter la vitesse de votre site. Si vous avez besoin d'aide avec votre boutique Shopify, de la vitesse du site à l'augmentation des ventes, écrivez-nous !