Guide d’optimisation de la vitesse de Shopify

Introduction au temps de chargement

Mise à jour 2024

Des problèmes de taux de rebond élevé, baisse de trafic ou de la conversion… autant de conséquences d’une page qui répond lentement. L’optimisation de la vitesse du site est l’une des principales considérations pour les propriétaires de boutiques Shopify. Plus votre site est rapide, plus vous êtes susceptible de convertir d’utilisateurs. 

Deux études le prouvent : 

Dans un communiqué, le géant Amazon déclare qu’une lenteur de 100 ms du temps de chargement lui fait perdre 1% de ses ventes.

L’outil d’analyse Semrush relève lui aussi, qu’un retard de chargement d’une seule seconde peut réduire la conversion de 7 %. Soit 7000€ de perdu par tranche de 100.000€ de CA.

En moyenne, le temps de chargement d’une page web ne doit pas excéder 3 secondes de chargement. C’est pourquoi il est essentiel de veiller à la bonne performance de votre site Shopify pour assurer le succès de votre boutique et du SEO.

Découvrez les meilleures méthodes pour accélérer la réponse de vos pages.

Comment accélérer le temps de réponse des pages ?

Afin de pouvoir comparer l’avant / après optimisation, pensez à faire des captures d’écran des scores de vitesse que vous obtenez sur Desktop et Mobile. Vous pouvez utiliser des outils comme pagespeed.web.dev ou gtmetrix.

Votre point de départ pourrait bien être le Waterfall de Gtmetrix pour connaître l’ordre de chargement des ressources sur la page analysée.

Les essentiels :

Choisir un thème Shopify léger

Le choix d’un thème Shopify rapide peut immédiatement placer votre site Web dans une excellente position du point de vue des performances. Certains thèmes peuvent être livrés avec des éléments inutiles, ce qui désavantage votre site sur le plan des performances. À l’inverse, un thème plus léger permettra à votre site d’être plus performant à l’avenir.

Bien entendu, cela ne veut pas dire que les thèmes très performants ne peuvent pas être rendus plus lents ou que ce sont les meilleures options pour votre site.

Réduisez le poids de vos visuels

Notre objectif est d’avoir une image de la meilleure qualité qui soit, en ayant réduit au minimum le poids en kilo-octets (Ko). Avant l’envoi d’une image dans votre site, veillez à ces 5 points :

1 – Choisir le format approprié

En fonction du type d’image, choisissez le format qui convient :

• Il faut favoriser le format WEBP, c’est la meilleure option.
• S’il y a besoin de transparence, du PNG en cherchant à compresser le plus possible.
• Si pas de transparence, dans tous les autres cas, du JPEG en compressant avec les recos qui suivent.
• Pour votre logo et les icônes de votre thème, utilisez le format SVG pour des images de haute qualité et évolutives.
• Pour les images avec du texte, on favorisera le format PNG compressé ou WEBP.

Quel est le meilleur format d’image selon shopify ?

Shopify : documentation officielle

2 – Redimensionnez à taille réelle

Si vous recevez les clichés du photographe en 5029 × 3353 ne faites pas l’erreur de les envoyer tels quels.

• Redimensionnez les à la taille maximale nécessaire avec un outil comme ILoveIMG, 1 à 1,5 fois la taille réelle du conteneur dans le navigateur (cela peut être 2 fois les dimensions indiquées pour couvrir les écrans rétina).
• Utilisez srcset, qui charge conditionnellement la bonne taille d’image en fonction de l’appareil.

Si vous avez l’avertissement « Images surdimensionnées » dans l’outil Shopify Analyzer, cette solution srcset résoudra ce problème.

Kalys – Agence SEO 100% Shopify

3 – Utilisez la compression

Choisir le bon format de fichier n’est qu’une partie de la bataille, vous devrez ensuite compresser vos images. Voici notre recommandation après une compression d’images à 80 / 90% de leur qualité :

• Grandes images (banner, slider…) : 200 KO maximum
• Petites images (produits, descriptions…) 80 KO maximum

J’ai effectué un test rapide sur trois images prises au hasard pour voir dans quelle mesure les fichiers étaient plus petits après compression :

Vous pouvez constater que les fichiers étaient 54 % plus petits, ce qui représente une réduction considérable.

La réduction d’une image à 80 / 90% de sa qualité initiale ne se voit pas à l’œil nu. Voici un exemple d’une image de 68ko puis de 39ko après compression.

Heureusement, c’est facile à faire. Avec une application Shopify, vous pouvez automatiser l’ensemble du processus. Voici nos préférées :

Payantes :

• Hyperspeed – 49$ / Mois. C’est la rolls des app ! Elle regroupe tout ce qui est important pour la vitesse de chargement.
• Tiny IMG – 3$ / Mois. 5000 images sur 2an, c’est celui qu’on utilise le plus.
• Smart SEO – 10$ / mois, 1000 images / mois, d’autres fonctionnalités très intéressantes.

Gratuites :

Gratuit est mort mais derrière lui, il a quand même laissé :

• SEO Image Optimizer – 50 images gratuites / mois, choix du niveau de compression, rétroaction, optimise tous types d’images en automatique. En gratuit c’est notre préféré.
• Tiny IMG – 50 images gratuites / mois, rétroaction, optimise tous types d’images en automatique.

Dans notre accompagnement SEO, nous nous chargeons de faire ces optimisations de vitesse sans installer d’applications supplémentaires afin de réduire les temps de chargement.

4 – Remplacer les GIF par des images statiques

Une tendance que nous avons observée sur les boutiques Shopify les plus lentes est l’utilisation des GIF. Les GIF peuvent être très utiles car ils offrent une expérience plus interactive aux utilisateurs.

Cependant, les ressources GIF sont extrêmement volumineuses.

Nous avons vu des cas où l’utilisation de deux ou trois GIF représentait plus de 10 Mo sur une seule page. Ces fichiers alourdissent considérablement la page. Nous vous recommandons donc de les remplacer par des images statiques lorsque cela est possible.

Cependant, si vous tenez quand même à utiliser des images animées, 2 choix s’offrent à vous :

1. Compresser le GIF
2. Utiliser un autre format d’images animées plus léger (par ex. LottieFiles)

5 – Preload et Lazyload

En général, lorsqu’une page est ouverte, tous les scripts, images et ressources sont chargés immédiatement pour garantir un affichage correct. Mais est-ce toujours nécessaire ?

Les pages de collection, par exemple, peuvent facilement contenir plus de 24 images de produits, mais combien d’entre elles sont visibles même après le chargement de la page. Beaucoup d’entre elles se trouvent plus bas sur la page et doivent être défilées pour être visibles.

Tous les éléments affichés au-dessus de la ligne de flottaison doivent être préchargés rel="preload". L’objectif est d’avoir un chargement prioritaire du logo, des images d’en-têtes, background, icon, polices d’écriture, script css ou js… pour que l’internaute commence son expérience de navigation le plus rapidement possible.

Voici comment faire pour précharger une image :

1. Commencer par dupliquer votre thème pour travailler en preview.
2. Dans personnaliser le thème > trouver la section où est ajoutée l’image.
3. Aller chercher cette section dans le code du thème (copié).
4. Repérer l’endroit d’insertion de l’image et ajouter dans les attributs : rel="preload"
5. Vérifier sur le site > clic droit > inspecter > cliquer sur l’image et regarder si l’attribut rel=preload s’est bien ajouté.

Il faudra répéter l’opération pour les autres éléments à précharger.

Ensuite,

Pour ce qui est du lazyload, il consiste à différer le chargement des images jusqu’à ce qu’elles soient visibles.

La mise en place de cette optimisation fera l’objet d’un futur article de blog, mais voici la version abrégée :

1. Ajoutez la bibliothèque lazysizes.js au dossier assets de votre thème et incluez-la dans theme.liquid.
2. Mettez à jour les balises d’image en remplaçant src par data-src et en ajoutant la classe lazyload.

Vous aurez donc une image standard qui peut ressembler à ceci :

<img src="IMAGE_URL.jpeg">

Qui ressemblerait maintenant à : <img data-src="IMAGE_URL.jpeg" class="lazyload">

La différence est que vous remplacez src par data-src et ajoutez la classe lazyload. C’est tout, c’est assez simple, même si je vous recommande de demander à un développeur de le faire pour vous.

Désinstallation des applications inutilisées

Veillez à désinstaller toutes les applications que vous n’utilisez pas, et à supprimer tout code restant sur votre site.

Le mieux est de demander à un développeur de vérifier et de mettre en œuvre cette opération.

Chargement conditionnel des scripts d’application

Par défaut, la plupart des scripts d’application sont ajoutés à votre fichier theme.liquid de sorte qu’ils se chargent sur chaque page, c’est pratique, mais c’est également très lent !

C’est l’équivalent de porter un parapluie sur soi 24 heures sur 24, 7 jours sur 7, au cas où il pleuvrait un jour… Ne serait-il pas plus efficace de n’avoir un parapluie que lorsqu’il pleut ?

Avec les applications, c’est possible grâce au chargement conditionnel.

En bref, si une condition est remplie, le script de l’application est chargé.

Par exemple :

Avis de produits : Si ceux-ci ne sont affichés que sur les fiches produits, chargez conditionnellement ce script sur les fiches produits uniquement.

Boutons de partage social : Les utilisez-vous sur toutes les pages ? Ou seulement sur les articles de blog ? S’il s’agit uniquement de certains types de pages, chargez-les uniquement sur ces pages.

Il est fortement recommandé de faire appel à un développeur et de tester correctement, mais le code lui-même est une simple instruction if.

1. Repérer dans le fichier theme.liquid l’appel à des applications. "render" ou "include"
2. Repérer où ces applications sont utilisées dans le site, puis ajouter les conditions if

{% if template == 'product' %}
{% include 'ton-app' %}
{% endif %}

Ou pour des pages spécifiques :

{% if page.handle == 'contact' %}
{% render 'ton-app' %}
{% endif %}

Maintenant, cet extrait ne se chargera pas sur toutes les pages, uniquement là où c’est nécessaire.

Pour en savoir plus sur la logique conditionnelle dans Liquid, consultez la documentation de Shopify sur le flux de contrôle.

Documentation du langage open source .liquid

Aller encore plus loin (perfectionnistes)

Si vous aimez le fine-tuning comme nous, voici des méthodes pour améliorer encore plus la vitesse de chargement :

Optimiser les vidéos

L’objectif est de réduire la taille des fichiers vidéo et de différer leur chargement si elles apparaissent sous la ligne de flottaison.

• Réduire les fichiers vidéo avec l’outil en ligne : videosmaller.com
• Ajouter le lazyloading natif : loading="lazy" à la main s’il n’y a que quelques vidéos.

<iframe src="video-player.html" title="..." loading="lazy"></iframe>

On pourrait aussi l’ajouter dynamiquement à tous les iframes d’un bloc contenu (où sera présente notre vidéo). Par exemple dans le bloc contenu des articles de blog.

{{ article.content | replace: '<iframe ', '<iframe loading="lazy"' }}

Si vous vous n’êtes pas servi d’une iframe (ex: Vidéos YouTube) mais d’une simple vidéo ajoutée dans le CDN Shopify via les fichiers. Vous avez qu’une url, et il faudra ajouter l’attribut preload="none" pour différer le chargement de cette manière :

<video style="max-width:100%; height:auto;" src="video.mp4"
preload="none"
</video>

Optimiser et limiter les polices (font)

Sur l’outil Gtmetrix > Waterfall > Fonts, noter combien de polices se chargent sur le site.

• Je recommande d’utiliser 1 voire 2 polices Maximum en plus de la police d’écriture ‘Open Sans’.
• Dans le code, identifier où les polices sont appelées (normalement theme.liquid) et ajouter l’attribut « preload » pour précharger vos fichiers de police en priorité. <link rel="preload as="font">
• Utiliser la valeur ‘swap’ qui indique au navigateur d’utiliser la police de secours pour afficher le texte jusqu’à ce que la police personnalisée ait été entièrement téléchargée. Pour l’ajouter sur les polices internes et externes :
  • Polices système en local : Directement dans les fichiers où l’on configure les polices (ex : font.css), vous devrez ajouter à la class, la valeur : font-display: swap
  • Google Fonts : Dans le cas d’une implémentation des polices Google, il suffit d’ajouter au script qui se trouve dans le header : <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Minification de JS et CSS

La minification (minifying) est le processus qui consiste à supprimer les données inutiles ou redondante de votre site Web sans affecter leur fonctionnalité. La minification peut consister, par exemple, à supprimer le code inutilisé, à effacer les commentaires et le formatage du code et à utiliser des noms de fonction plus courts, pour n’en citer que quelques-uns.

Pour les non-développeurs, il existe des applications qui peuvent réduire la taille de ces fichiers pour vous, comme JSCompress.

Sinon, vous pouvez le faire manuellement avec JSCompress, et laisser Shopify le faire automatiquement pour les fichiers CSS en les convertissant au format .scss.css.

Asynchroniser/différer les scripts non essentiels

Si vous avez des scripts qui ne sont pas essentiels pour le chargement initial de la page, vous pouvez les différer pour qu’ils soient chargés en dernier, ou les charger de manière asynchrone pour que le script complet soit chargé en arrière-plan avant d’être exécuté.

Ce diagramme explique les différences dans la façon dont ils sont chargés :

Il s’agit d’une fonction que vous devriez confier à un développeur, mais elle est relativement simple à mettre en œuvre en ajoutant defer ou async à vos balises de script. Une app comme Hyperspeed permet de le faire, mais il sera toujours délicat de savoir quoi différer ou asynchroniser si ce n’est pas votre métier.

Regrouper les scripts de suivis dans Google Tag Manager

Google Tag Manager est utile pour suivre et collecter des données marketing. Il vous permet d’ajouter ou de supprimer facilement des balises de votre boutique sans toucher au code. Si plusieurs codes de tracking sont utilisés : Analytics, Search Console, Facebook, Hotjar, Axeptio… il est recommandé de les intégrer dans GTM et d’appeler ce seul script de suivi dans la balise <head>.

1. Aller sur Pagespeed
2. Regarder dans Diagnostic s’il y a la ligne > Réduire l’impact du code tiers
3. S’il y a plusieurs scripts, les migrer vers GTM.
4. Implémenter le script GTM dans la boutique via les paramètres de shopify Google Analytics ou via le fichier theme.liquid.

<!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

Indications sur les ressources / préchargement

Les indications de ressources, notamment preload, prefetch, dns-prefetch ou preconnect, sont utilisées pour optimiser le chargement de ressources importantes.

Chacune a un objectif différent :

• Preload : Récupérer une ressource critique pour la page actuelle avant que la page ne commence à s’afficher.
• Prefetch : Récupérer les ressources qui ne sont pas nécessaires pour la page actuelle, mais qui le seront probablement pour la page suivante, par exemple la feuille de style.
• DNS-Prefetch : Réduit la latence en effectuant une recherche DNS à l’avance vers un domaine à partir duquel vous allez charger les ressources. Notez que cette opération est effectuée après le chargement de la page actuelle.
• Preconnect : Pour les cas où vous prévoyez de récupérer le contenu d’un domaine spécifique dans les 10 secondes. Semblable à DNS-Prefetch mais cela effectue également les liaisons à trois voies TCP (TCP handshake) et la négociation TLS.

Ils peuvent être utilisés en modifiant les éléments <link> pour ajouter un rel= attribut, comme par exemple :

<link rel="preload" href="{{ jquery.min.js | asset_url }}" as="script">
<link rel="prefetch" href="{{ stylesheet.css | asset_url }}">
<link rel="dns-prefetch" href="//cdn.shopify.com">
<link rel="preconnect" href="//cdn.shopify.com">

Conclusion

Shopify est une plateforme assez rapide qui optimise automatiquement la vitesse.

Mais avec un grand nombre d’images, des thèmes inefficaces et une liste interminable d’applications à installer, il est facile d’alourdir votre site web et de le rendre lent.

Ne visez pas un score de rapidité parfait, c’est impossible. Vous devriez toutefois noter une nette amélioration du temps de chargement des pages après avoir mis en œuvre ces suggestions.

Toutes les étapes mentionnées ci-dessus sont intégrées dans nos stratégies SEO Shopify et ce rendu est créé à partir de notre expérience pratique.

Si vous avez besoin d’aide, nous offrons ce service à nos clients SEO, alors n’hésitez pas à nous contacter ici.

Bonne chance pour la vitesse et la conversion de votre site.