Optimiser la vitesse d'un Shopify : ce qui marche, ce qui est du folklore

Sur une boutique Shopify, la lenteur a deux causes dominantes : les applications qui injectent des scripts sur toutes les pages, et les images servies dans des dimensions supérieures à leur affichage. L'infrastructure de Shopify, elle, n'est pas en cause : elle est servie par un réseau de diffusion mondial et vous ne pouvez pas l'améliorer. Le diagnostic commence donc par un inventaire des applications actives et un contrôle des images de la page d'accueil et des fiches produit.

Mesurer avant de toucher à quoi que ce soit

Trois outils, qui ne disent pas la même chose.

Les données de terrain de la Search Console, dans le rapport Signaux web essentiels. Ce sont des mesures réelles, faites chez vos visiteurs, sur vingt-huit jours glissants. C'est la seule source qui compte pour savoir si vous avez un problème.

PageSpeed Insights, pour le diagnostic. Il donne les données de terrain quand elles existent et une mesure de laboratoire dans tous les cas. Le score de laboratoire varie fortement d'une exécution à l'autre. Ne prenez jamais une décision sur une seule mesure, et ne comparez jamais deux sites avec deux mesures uniques.

Le rapport de vitesse de l'admin Shopify. Il compare votre boutique à d'autres boutiques du même secteur. Utile comme repère, à ne pas confondre avec une mesure : il est calculé sur un échantillon de pages, pas sur les vôtres.

Le seuil qui compte : un LCP sous 2,5 secondes, un INP sous 200 millisecondes, un CLS sous 0,1. Ce sont les seuils publiés par Google pour la catégorie « bon », et ils s'apprécient au 75e centile de vos visiteurs, pas en moyenne.

Ce qui ralentit vraiment

Les applications

C'est la première cause, et de loin. Chaque application qui s'intègre à la vitrine ajoute un ou plusieurs scripts, souvent chargés sur toutes les pages, y compris celles où l'application ne sert à rien. Une application d'avis charge son script sur la page d'accueil, une application de compte à rebours le charge sur les fiches produit, une application de recommandation le charge partout.

L'accumulation est silencieuse : chaque ajout coûte peu, dix ajouts coûtent une seconde.

Ce qu'il faut faire, dans l'ordre : lister les applications installées, désinstaller celles qui ne servent plus (il y en a toujours), et pour celles qui restent, vérifier si leur script peut être limité aux pages où elles sont utiles.

Attention à un piège fréquent : désinstaller une application ne retire pas toujours le code qu'elle a inséré dans le thème. Après désinstallation, cherchez les traces résiduelles dans les fichiers du thème.

Les images

Deuxième cause, et la plus facile à corriger. Shopify sert les images via son propre réseau et sait produire des versions redimensionnées et en WebP. Encore faut-il que le thème le demande.

Les défauts habituels : une image de bandeau de 4000 pixels de large servie telle quelle, des photos produit chargées en pleine résolution dans une grille de vignettes, l'absence de chargement différé sur ce qui est sous la ligne de flottaison, et l'absence de dimensions déclarées, ce qui fait sauter la page pendant le chargement.

Un point souvent mal traité : le chargement différé ne doit jamais s'appliquer à l'image principale du premier écran. Elle est le plus souvent l'élément qui définit votre LCP, et la différer revient à dégrader volontairement la mesure qu'on cherche à améliorer.

Les polices

Troisième cause, plus modeste mais réelle. Deux familles de polices avec quatre graisses chacune font huit fichiers à charger. Deux graisses suffisent presque toujours. Les polices doivent être servies depuis le domaine de la boutique et non depuis un service tiers, et déclarées avec un affichage de repli pour que le texte reste lisible pendant le chargement.

Le thème

Un thème premium riche en options charge du code pour des fonctions que vous n'utilisez pas. C'est un coût structurel qu'on ne corrige pas au réglage, seulement au choix du thème. Le sujet est traité dans notre article sur le choix entre thème sur-mesure et thème premium.

Ce qui est du folklore

Viser 100 sur PageSpeed. Impossible sur une boutique réelle avec un suivi analytique et un widget de paiement, et sans intérêt commercial. L'objectif est de passer les seuils sur les données de terrain, pas d'atteindre un score de laboratoire.

Minifier le CSS et le JavaScript à la main. Le gain se compte en kilooctets sur des pages qui perdent des secondes ailleurs.

Changer de thème pour gagner en vitesse. Un changement de thème est un chantier de refonte. Si la cause est une application, le nouveau thème sera lent aussi.

Les applications de « speed optimization ». Elles ajoutent un script pour compenser d'autres scripts. Certaines apportent quelque chose, la plupart déplacent le problème.

Le préchargement de toutes les pages. Une technique qui charge à l'avance les pages survolées. Elle améliore la sensation de rapidité et dégrade la consommation de données. À réserver aux boutiques dont le parcours est très prévisible.

L'ordre des travaux

1. Inventaire des applications, désinstallation de ce qui ne sert plus, nettoyage des résidus dans le thème.
2. Audit des images sur la page d'accueil et sur trois fiches produit représentatives. Dimensions, format, chargement différé, dimensions déclarées.
3. Réduction du nombre de graisses de police.
4. Vérification que l'image du premier écran n'est pas différée.
5. Mesure de nouveau, après quatre semaines, sur les données de terrain.

Les deux premières étapes règlent l'essentiel dans la plupart des cas que nous auditons. Les suivantes servent à gagner les derniers dixièmes.

Questions fréquentes

La vitesse influence-t-elle le référencement d'une boutique Shopify ?

Elle est un facteur de classement, mesuré par les Signaux web essentiels, mais un facteur modeste comparé à la pertinence du contenu. Son effet le plus important est commercial : une page lente perd des visiteurs avant qu'ils ne voient le produit. C'est sur le taux de conversion que le gain se mesure, plus que sur les positions.

Combien d'applications est-ce trop ?

Le nombre compte moins que ce que chacune charge. Une boutique avec quinze applications dont douze n'agissent que dans l'administration est plus rapide qu'une boutique avec quatre applications qui injectent toutes un script sur la vitrine. Regardez ce qui se charge sur la page, pas la liste installée.

Faut-il passer en Shopify headless pour la vitesse ?

C'est une réponse disproportionnée dans la majorité des cas. Une boutique lente à cause de ses applications restera lente en headless, avec un coût de développement et de maintenance bien supérieur. La question se pose pour d'autres raisons, traitées dans notre article sur Shopify headless.

Le score de vitesse de l'admin Shopify est-il fiable ?

Il est utile comme repère relatif, pas comme mesure. Il est calculé sur un échantillon de pages et sur des conditions standardisées qui ne sont pas celles de vos visiteurs. Pour décider, utilisez les données de terrain de la Search Console, qui viennent de vos visiteurs réels.

En pratique

Commencez par la liste des applications, c'est là que se trouve le gain. Et mesurez sur les données de terrain, à quatre semaines d'écart, sans rien changer d'autre entre-temps. Si la boutique doit de toute façon être reprise, la performance se traite en même temps que le reste, c'est l'objet de notre page refonte de site Shopify.