Shopify est lent : comment identifier le problème ?

Les visiteurs ne patientent pas : un site lent perd une partie d'entre eux avant même qu'ils aient vu le premier produit.

Shopify héberge très bien les boutiques, la lenteur ne vient donc presque jamais de l'hébergement. Elle vient de ce qu'on charge dessus : des images, des applications, un thème alourdi, des vidéos.

La méthode suit trois temps : mesurer, comprendre le résultat, puis traiter les causes une par une en remesurant à chaque fois.

1Mesurez avant de toucher à quoi que ce soit

Ouvrez PageSpeed Insights (l'outil gratuit de Google) et testez trois pages : l'accueil, une collection et une fiche produit. Regardez surtout la version mobile.

• Notez les résultats de départ (captures d'écran), pour pouvoir comparer plus tard.
• Refaites le test deux ou trois fois : les chiffres varient d'un passage à l'autre, seule la tendance compte.
• Testez aussi depuis votre téléphone, en 4G, avec votre œil : la sensation de lenteur est ce que vit le client.

2Lisez le résultat sans vous laisser impressionner

Le score sur 100 est un repère, pas un objectif absolu. Une boutique avec de belles photos et quelques applications atteint rarement 100, et n'en a pas besoin.

• Regardez surtout le temps d'affichage du principal élément visible (souvent une grande image), noté « LCP ».
• Lisez la section « Opportunités » : elle liste les éléments qui pèsent le plus, dans l'ordre.
• Un score « faible » n'est pas un signal d'alarme si la page s'ouvre vite en pratique. À l'inverse, un bon score sur ordinateur peut cacher un mobile lent.

3Les images, cause numéro un

Une photo non redimensionnée peut peser plusieurs mégaoctets. Multipliée par les images d'une page d'accueil, elle suffit à rendre la boutique pénible sur mobile.

• Redimensionnez les images avant de les téléverser (2000 pixels de large suffisent pour un produit).
• Évitez les bannières plein écran trop lourdes, remplacez-les par des images plus légères.
• Ne chargez pas 20 produits à la fois en page d'accueil : réduisez leur nombre.

4Les applications, cause numéro deux

Chaque application peut ajouter du code qui se charge sur toutes les pages. Cumulées, elles alourdissent nettement la boutique.

• Listez vos applications (« Applications » dans l'administration) et demandez-vous, pour chacune, si elle sert vraiment.
• Désactivez-en une, testez la vitesse, puis passez à la suivante. Cela désigne les plus gourmandes.
• Attention : désinstaller une application ne supprime pas toujours son code du thème. Des restes peuvent continuer à se charger, il faut les retirer à la main ou demander à quelqu'un de le faire.

5Le thème et ses sections

Un thème très riche en animations, en curseurs de diapositives et en effets de défilement charge plus de code qu'un thème sobre.

• Comparez votre boutique avec le thème d'origine (un aperçu de Dawn suffit) sur une même page.
• Retirez les sections décoratives (compteurs animés, vidéos d'arrière-plan, carrousels multiples) : elles coûtent en vitesse sans toujours rapporter en ventes.

6Les polices et les vidéos

Plusieurs familles de polices, ou une vidéo qui démarre seule en haut de page, ralentissent l'affichage de façon visible.

• Limitez-vous à deux polices, et à un nombre réduit de graisses.
• Remplacez une vidéo en lecture automatique par une image, avec un bouton pour lancer la vidéo.

7Corrigez une chose à la fois, et remesurez

Le piège classique est de tout changer d'un coup : on obtient une boutique plus rapide sans savoir pourquoi, ou plus lente sans savoir quoi défaire.

• Après chaque changement, refaites le même test qu'au départ, sur les mêmes pages.
• Gardez les gains significatifs, annulez ceux qui n'apportent rien.
• Arrêtez-vous quand la boutique est confortable sur téléphone : le dernier point de score ne vaut pas les heures qu'il coûte.