Même si les vitesses Internet mondiales se sont nettement améliorées—atteignant une moyenne de 90,67 Mbps pour le haut débit fixe et de 44,67 Mbps pour les connexions mobiles début 2024—de nombreux clients subissent encore des connexions plus lentes selon leur localisation et les conditions de leur réseau. Il est donc essentiel de veiller à ce que vos pages produits se chargent aussi vite que possible pour tous les clients.
Une solution simple consiste à ajouter le lazy load à vos pages. Le lazy loading est une stratégie qui consiste à identifier des ressources comme non bloquantes et à ne les charger qu’au moment où elles sont nécessaires, ce qui raccourcit le chemin critique de rendu et réduit les temps de chargement des pages. Il est principalement utilisé pour les images d’un site web.
Avantages du lazy loading
D’un côté, il améliore les performances et la vitesse. Le lazy loading a un impact direct sur les performances de la boutique en réduisant les temps de chargement initiaux, en améliorant les métriques Core Web Vitals comme le Largest Contentful Paint (LCP) et en minimisant l’utilisation des ressources serveur—des indicateurs clés que Google prend en compte pour classer les sites. De l’autre, il donne à vos clients l’impression que les produits se chargent plus vite, grâce à un phénomène appelé performance perçue.
Vous pouvez ajouter le lazy load à votre boutique Shopify de plusieurs façons.
Utiliser le lazy loading HTML natif
Le lazy loading natif est désormais pris en charge par tous les principaux navigateurs, comme Chrome, Firefox, Safari et Edge. L’approche la plus simple et la plus moderne consiste à ajouter l’attribut loading=”lazy” directement à vos balises d’image. Voici comment faire :
- Allez dans l’admin Shopify et sélectionnez Boutique en ligne.
- Sélectionnez Themes et choisissez le thème que vous souhaitez modifier.
- Sélectionnez Actions puis cliquez sur Edit Code.
- Recherchez les balises d’image dans vos fichiers de template (comme les templates produit, les pages de collection, etc.).
- Ajoutez l’attribut loading=”lazy” aux balises d’image pour les images situées sous la ligne de flottaison.
<img src="image.jpg" loading="lazy" alt="Product image" />Important : ne mettez pas en lazy-load les images susceptibles d’être visibles dans la fenêtre au chargement de la page, en particulier les images LCP (Largest Contentful Paint), car cela peut nuire aux performances. Pour les images au-dessus de la ligne de flottaison, utilisez plutôt loading=”eager”.
Ajouter un script de lazy loading (méthode héritée)
Si vous devez prendre en charge d’anciens navigateurs ou si vous préférez une approche via une bibliothèque JavaScript, vous pouvez toujours utiliser cette méthode. Voici comment faire :
- Allez dans l’admin Shopify et sélectionnez Boutique en ligne.
- Sélectionnez Themes et choisissez le thème que vous souhaitez modifier.
- Sélectionnez Actions puis cliquez sur Edit Code.
- Accédez au répertoire Layouts .
- Cliquez sur themes.liquid.
- Ensuite, collez le code suivant avant la balise </head> dans l’éditeur de code en ligne.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}Enregistrez les modifications. Désormais, les images avec la classe lazyload seront chargées en lazy-load.
Ajouter le lazy loading à certaines images
Vous pouvez aussi définir quelles images doivent être chargées en lazy-load si vous ne souhaitez pas appliquer ce réglage à toute la boutique. Si vous voulez qu’une image spécifique se charge en lazy-load, appliquez la classe ‘lazyload.’ De plus, remplacez l’attribut src par data-src.
<!-- Before -->
<img src="image.jpg" />
<!-- After -->
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" />Ajouter le lazy loading au document JS
Si vous ajoutez ce code Javascript au fichier js.liquid ou .js dans le répertoire Assets de votre boutique, le lazy load sera ajouté au site.
$(document).ready(function(){$("img.lazyload").lazyload();});Utiliser une application
Si vous n’êtes pas à l’aise avec la modification des fichiers de thème et que vous avez besoin d’une solution rapide, vous pouvez consulter des applications qui proposent cette fonctionnalité.
Loadify
Améliorez les performances et l’expérience utilisateur de votre boutique Shopify grâce à des écrans de chargement personnalisables et des transitions de page fluides avec Loadify. Mettez en place le lazy loading et la prédiction de liens pour accélérer les pages en retardant le chargement des images et des vidéos jusqu’au moment nécessaire, tout en tirant parti de la prédiction de liens basée sur le survol.
Tiny SEO Image optimize
TinyIMG propose une suite complète d’outils d’optimisation de la vitesse des pages et du SEO, incluant le texte ALT des images, le JSON-LD, la gestion des pages 404, les redirections 301, le SEO des plugins, les rich snippets et un compresseur d’images SEO. L’application propose aussi des descriptions générées par IA, le redimensionnement des photos, la compression d’images, le lazy loading, la création de sitemaps et une intégration IA ChatGPT.
Conclusion
Le lazy loading est une technique efficace pour améliorer les performances et la vitesse de votre boutique Shopify en retardant le chargement des images jusqu’au moment où elles sont nécessaires. Le lazy loading des images est une technique puissante qui peut améliorer les performances d’un site en réduisant le temps de chargement initial de la page et l’utilisation globale de la bande passante ; et grâce aux navigateurs modernes et aux API JavaScript, sa mise en place n’a jamais été aussi simple.
En mettant en œuvre le lazy loading via des attributs HTML natifs (l’approche moderne recommandée) ou via des scripts, vous garantissez une navigation plus fluide aux utilisateurs, en particulier à ceux qui disposent de connexions Internet plus lentes. Cela peut accroître la satisfaction client et potentiellement améliorer les taux de conversion. Ajouter le lazy loading à votre boutique Shopify est une démarche simple qui peut apporter des bénéfices significatifs, à la fois pour les performances de votre boutique et pour l’expérience de vos clients—d’autant plus que la vitesse de chargement reste un facteur déterminant de la réussite en e-commerce.
