Optimiser votre boutique Shopify avec le lazy-loading

QU’EST-CE QUE LE LAZY-LOADING ?

Le lazy-loading est une technique d’optimisation des performances qui charge les images au fur et à mesure que l’utilisateur fait défiler la page web, au lieu de le faire lors du chargement initial de la page.

Également connu sous le nom de “différer les images hors écran“.

Nous constatons souvent une réduction de 10 à 30 % du poids des pages en intégration la fonctionnalité du lazy-loading.

Du côté navigateur, la page se charge plus rapidement car elle ne charge pas toutes les images immédiatement.

D’un point de vue technique, cela fonctionne en remplaçant l’attribut html src de l’image par un paramètre fictif data-src, ce qui empêche le chargement de l’image dans la séquence html standard. Ensuite, le javascript est utilisé pour récupérer l’url du paramètre fictif et mettre à jour l’attribut src de l’élément, en chargeant l’image lorsqu’elle est affichée.

L’effet Google : Les images chargées en mode lazy-loading ne contribuent pas au chargement initial de la page. Votre site est donc plus léger et bénéficie des avantages grâce au temps de chargement plus rapide (amélioration du classement et du trafic).

POURQUOI LE LAZY-LOADING EST-IL GÉNIAL ?

• La page se charge plus rapidement !
• Pages plus rapides = meilleur classement dans les moteurs de recherche
• Pages plus rapides = meilleurs taux de conversion

Considérez ceci :

Examinons maintenant cet exemple de page d’accueil d’un client avant et après la mise en œuvre du lazy-loading :

AVANT

Une page assez dense avec un temps de chargement lent à ce point, mais…

APRES

Voici les points forts après cette optimisation :

• Amélioration du temps de chargement mobile de plus de 2,5 secondes
• 20 requêtes serveur sont dégagés
• Le poids de la page a diminué de 1 Mo
• Super!

Ces statistiques utilisent webpagetest.org avec une vitesse de téléchargement mobile LTE de 12Mbs…

Le site est encore lourd, avec environ 10 Mo (nous pouvons généralement ramener les boutiques Shopify à 1 ou 2 Mo avec une optimisation complète… mais même avec le lazy-loading, vous pouvez constater une réduction significative du temps de chargement.

HOW TO ADD LAZY LOADING TO YOUR SHOPIFY THEME

• Ajoutez la bibliothèque lazysizes.js au dossier des ressources de votre thème et incluez-la dans theme.liquid
• Localisez les balises d’image dans les fichiers de votre thème
• Mettez à jour ces balises d’image en remplaçant src par data-source et en ajoutant la classe “lazyload”.
• Vous pouvez ajouter des éléments de style CSS pour les effets d’animation.

Option A) Si vous souhaitez que nos experts en optimisation s’en occupent pour vous, vous pouvez commander notre service de lazy-loading Shopify.

Nous pouvons généralement lazy-load les vidéos aussi (si elles ne sont pas en haut de la page).

Option B) Si vous aimez travailler avec du code et que vous voulez y essayer, commencez par l’implémentation de la bibliothèque lazysizes.

Modifier en toute sécurité un thème Shopify : dupliquez-le avant de le modifier.

Les instructions détaillées pour mettre en œuvre l’utilisation de lazysizes sont sur cette page si vous faites défiler vers le bas.

Parfois, vous pouvez rencontrer des problèmes, selon la façon dont le code du thème est configuré, mais cela fait partie du plaisir d’apprendre 🤓.

Les fichiers exacts à modifier sur votre boutique Shopify varient en fonction de votre thème, mais en général, vous devez rechercher le code du modèle qui charge les images et substituer la syntaxe du lazy-loading expliquée par lazysizes (ou toute autre bibliothèque que vous finirez par choisir).

Par exemple, si vous utilisez la bibliothèque lazysizes que je vous ai recommandée, une fois qu’elle est installée dans votre fichier theme.liquid, vous devez remplacer vos balises img standard :

<img src="IMAGE_URL">

Avec la nouvelle syntaxe du lazy-loading :

<img data-src="IMAGE_URL" class="lazyload">

Pour installer la bibliothèque, téléchargez le dernier fichier depuis la page lazysizes, téléchargez-le dans le dossier Assets de votre thème Shopify et nommez-le lazysizes.min.js, puis incluez-le dans la section "head" de votre theme.liquid comme ceci :

<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>

*La partie "style" est utilisée pour créer un subtil effet de fondu animé en CSS.

Une fois le code configuré, vous verrez vos images s’afficher en fondu au fur et à mesure que vous faites défiler votre site, au lieu de les voir toutes au chargement initial de la page (vous pouvez également rafraîchir cette page et faire défiler la page très rapidement pour essayer de saisir l’effet ici).

Le lazy-loading peut généralement accélérer la plupart des pages de votre site – Accueil, Collections, Pages de produits et Articles de blog en bénéficient tous.

Lorsque on fait l’implementation du lazt-loading, la plupart de votre boutique devient prête pour l’avenir et automatise le process du lazy-load des images. Dans certains cas, une intervention manuelle peut être nécessaire pour les éléments futurs, mais nous vous expliquerons si c’est le cas dans votre thème.

COMMENT VÉRIFIER SI LE LAZY-LOADING EST ACTIVÉ SUR VOTRE BOUTIQUE ?

Pour vérifier si le lazy-loading est actif sur votre site, vous devez inspecter le code du navigateur en faisant un clic droit sur votre page, puis en sélectionnant “Afficher le code source de la page“. Recherchez “lazy” sur cette page. Si aucun élément ne contient “lazy”, il est probable que vous ne l’avez pas.

Si vous visualisez la source et que vous voyez des éléments “lazy”, il est toujours utile de passer par un outil d’analyse pour s’assurer qu’ils sont tous chargés avec un “vrai lazy-loading” (et pas seulement un “lazy-loading de type placeholder”).

QUELLES SONT LES IMAGES DONT VOUS DEVEZ ACTIVER LE LAZY-LOADING?

Vous obtiendrez le plus de gains en lazy-loading :

• images de la page de collection
• images de la page d’accueil
• produits liés
• images du blog

Il arrive parfois que les outils d’analyse affichent un avertissement concernant les icônes ou les petits graphiques – je ne m’en préoccuperais pas.

Les principaux avantages du lazy-loading proviennent du report des graphiques de grandes tailles et des images de produits larges.

LE VRAI LAZY-LOADING VS PLACEHOLDER LAZY LOADING

Il se peut que le lazy-loading soit déjà configuré, mais que vous obteniez encore des avertissements dans les outils d’analyse. C’est probablement parce que vous avez un “lazy-loading de type placeholder” au lieu d’un “lazy-loading réel”.

Lazy-loading réel : Les images n’ont pas d’attribut src, elles ne se chargent donc pas au chargement de la page, mais uniquement lorsque l’utilisateur fait défiler la page.

Lazy-loading de type placeholder : Les images sont accompagnées d’une petite vignette qui se charge au chargement initial de la page, puis, au fur et à mesure que l’utilisateur fait défiler la page, l’image normale plus grande remplace la vignette.

Parfois, le recours à des placeholders est une préférence de conception, et c’est bien ainsi. Mais si vous voulez maximiser les performances, nous vous recommandons de passer au “vrai lazy-loading “.

LAZY-LOADING ET SEO

Lorsque vous appliquez le lazy-loading des images, vos éléments d’image html se chargent normalement. La seule chose qui change du côté html est l’utilisation de l’attribut data-src au lieu de src, qui empêche l’image de s’afficher pour le spectateur jusqu’à ce qu’elle déclenche le chargement.

De point de vue du référencement, l’attribut important alt est toujours présent pour les robots d’exploration des pages, et la page se charge plus rapidement avec le lazy-loading, nous le recommandons donc à la fois pour les performances et le référencement.

ALORS,

Si vous souhaitez que nous mettions en œuvre cette fonctionnalité pour vous, contactez-nous sur notre site. Si vous avez consulté notre article en cherchant à optimiser votre boutique Shopify, voici d’autres conseils pour gagner en rapidité :

• Compressez automatique vos images avec Crush Pics
• Assurez-vous que vous utilisez le format d’image JPG plutôt que PNG pour les images photographiques (les PNG sont souvent 2 à 10 fois plus grands pour la même résolution).
• Passez votre site à un analyseur des sites web comme Google PageSpeed pour voir quelles sont les possibilités d’optimisation et comment les aborder.