Tous les articles

Accélérer une vitrine Shopify sans lutter contre la plateforme

La plupart des boutiques Shopify lentes ne le sont pas à cause de Shopify. Elles le sont à cause de ce qu'on leur a ajouté, une application à la fois, pendant deux ans.

Performance7 min de lecture

Nous exploitons plusieurs vitrines sur Shopify, dont Vowly Store et Paperly. La plateforme n'est pas le goulet d'étranglement qu'on imagine. Presque toutes les vitrines lentes qu'on nous a demandé d'examiner l'étaient à cause des ajouts, pas des fondations.

Commencez par compter les tiers

Avant de toucher au moindre gabarit, ouvrez l'onglet réseau et comptez le nombre d'hôtes distincts contactés par une fiche produit. Une boutique en activité depuis deux ans en atteint typiquement une douzaine : analytique, widget d'avis, bulle de chat, convertisseur de devises, application de vente additionnelle, et deux gestionnaires de balises parce que personne n'a retiré le premier.

Chacun a été ajouté pour une raison, et la plupart étaient bonnes. Mais personne ne mesure le coût cumulé, parce que chaque ajout semblait modeste le jour où il a été fait. Cet audit n'est pas un exercice technique mais commercial. Pour chaque script, demandez ce qu'il rapporte et ce qu'il coûte en temps de thread principal. Plusieurs échoueront nettement.

Les images restent le plus gros gain

Dans une boutique d'affiches et de papeterie, les images sont le produit et dominent le poids des pages. Les remèdes sont connus et pourtant régulièrement oubliés :

  • Servir des formats modernes — le CDN le fait sur demande, et l'économie face au JPEG est substantielle à qualité visuelle égale.
  • Dimensionner la source à la boîte rendue, avec un srcset correct. Envoyer une image de 2000 px dans un emplacement de 400 px est le gaspillage le plus courant d'une grille produit.
  • Donner des dimensions explicites à chaque image pour éviter les décalages pendant le chargement. Le décalage de mise en page est à la fois un signal de classement et une vraie gêne.
  • Ne charger en priorité que ce qui est au-dessus de la ligne de flottaison — mais décider délibérément, plutôt que de retarder l'image principale par accident.

Les polices méritent plus de méfiance

Trois graisses de deux familles, chargées depuis un hôte tiers, coûtent plus cher qu'on ne le croit : une connexion supplémentaire, un délai de rendu et un reflux visible au moment de la bascule.

Hébergez les fichiers vous-même, réduisez-les aux caractères réellement utilisés, préchargez la seule graisse visible d'emblée et adoptez une stratégie d'affichage qui laisse le texte lisible pendant le chargement. Si vous vendez dans plusieurs marchés européens, ce sous-ensemble doit inclure les caractères accentués nécessaires — un sous-ensemble sans trémas paraîtra correct en test et cassé en Allemagne.

Ne confondez pas la vitrine et le paiement

Une frontière utile : la vitrine vous appartient et s'optimise, le paiement non — et c'est très bien ainsi. Paiements, lutte contre la fraude et calcul des taxes sont précisément ce qu'une petite équipe ne devrait pas reconstruire.

Le travail de performance qui compte commercialement se joue avant le paiement — sur la page collection, la fiche produit et le panier, là où le visiteur décide de continuer. Une boutique en fabrication à la commande y porte un poids supplémentaire, car les interfaces de personnalisation apportent leurs propres scripts et aperçus.

Mesurez ce que vit le client

Les scores de laboratoire servent à repérer les régressions et induisent en erreur comme objectif. Un test de laboratoire n'a ni le téléphone plus ancien du client, ni son réseau, ni la bannière de cookies de la deuxième visite. Les données terrain issues de sessions réelles, segmentées par classe d'appareil et par marché, indiquent où se situe vraiment le problème — souvent sur mobile dans un seul pays plutôt que partout.

À lire également

Vous travaillez sur un projet similaire ?

Nous concevons et exploitons les systèmes décrits ici. Présentez-nous votre projet et vous recevrez une évaluation technique honnête.