Activer le Lazy Loading sur WordPress | LWS

Activer le Lazy Loading sur WordPress

Procédure

Qu'est-ce que le lazy loading ?

Imaginez visiter un site web et devoir patienter interminablement avant qu'il ne se charge complètement, à cause d’un florilège d'images et vidéos volumineuses que votre navigateur peine à charger. Il y a de fortes chances pour que vous stoppiez votre navigation sur ce site au profit d’un autre, mieux optimisé. Pour éviter que cet exemple devienne réalité sur votre site, il est essentiel que vous preniez le temps d’optimiser vos images et activiez le lazy loading.

Le lazy loading, c’est quoi ? I Il s’agit d’une technique permettant de ne charger que les images et vidéos visible au dessus de la ligne de flottaison (c’est-à-dire ce que vous voyez du site sans avoir à faire défiler la page), ce qui permet au navigateur de charger le contenu important de la page en priorité et ainsi réduire les temps de chargement et améliorer les performances.

L'effet est d'autant plus marquant sur des sites affichant beaucoup d'images, car ce sont parmis les éléments les plus lourds et longs à charger d'un site.


Comment utiliser le lazy-load sur votre site ?

Depuis quelques années, WordPress propose du lazy-loading par défaut pour les images et les iframes ; si vous utilisez une version de WordPress supérieure à 5.6, vous devriez déjà en profiter.
Si vous souhaitez toutefois procéder manuellement, que vous n'utilisez pas WordPress ou utilisez une version antérieure à la 5.6, il vous suffit simplement d’ajouter l’attribut lazy=”load” à l’élément que vous souhaitez voir chargé paresseusement, si étant qu'il est compatible :

<img src="https://example.fr/images/mon_image.png" width="200px" height="100px" lazy="load">

Cela indique au navigateur qu’il doit le charger paresseusement. Les navigateurs se chargeront automatiquement de choisir quand charger les images, vous n’avez rien à faire de plus. Si l'élément sur lequel vous avez ajouté l'attribut n'est pas compatible, il ne se passera rien.

Certaines extensions vous permettent également d'améliorer ou contrôler le Lazy loading de WordPress. L'une de ces extensions est LWS Optimize, une extension réalisée par LWS.


Activer le lazy-load avec LWS Optimize


Pour activer le lazy-load depuis LWS Optimize, il vous suffit de vous rendre dans les paramètres de l’extension puis dans l’onglet “Médias” :

Lazy Loading sur WordPress : booster les performances de votre siteLazy Loading sur WordPress : booster les performances de votre site

Ici, cochez les actions “Lazy Loading pour Images” et “Lazy Loading pour Iframes et vidéos” afin de les activer. Vous n'avez plus rien à faire pour que le lazy-load soit activé. Vous pouvez cependant exclure des éléments du lazy-loading.
Pour se faire, cliquez sur le bouton “Exclure des fichiers”, ce qui ouvrira une nouvelle fenêtre, dans laquelle vous pourrez gérer différents éléments :

Lazy Loading sur WordPress : booster les performances de votre site

Vous avez la possibilité d'exclure des éléments du lazy load selon les classes CSS qu'ils possèdent ou le type de média auquel ils appartiennent (vidéo, iframe, ...). Vous pouvez aussi simplement indiquer l'URL à exclure, ce qui excluera du processus tout élément comportant cet URL. Une fois les exclusions rentrées, cliquez sur le bouton "Enregistrer" pour sauvegarder vos changements.

Afin que vos changements soient pris en compte, il vous faudra vider le cache de fichiers, autrement vos visiteurs verront une version obsolète de vos pages. Pour se faire, rendez-vous dans l'onglet "Mise en cache" puis cliquez sur le bouton "Vider le cache" en regard de l'action "Purge Manuelle" :
Lazy Loading sur WordPress : booster les performances de votre siteLazy Loading sur WordPress : booster les performances de votre site

Conclusion

Vous savez maintenant comment : réduire les temps de chargement de votre site en mettant en œuvre le lazy loading, utiliser cette technique aussi bien manuellement qu'à l'aide d'extensions, et gérer les exceptions pour certains éléments. 🚀

Grâce à cet article, l'optimisation de vos pages web ne devrait plus avoir de secret pour vous. Vous êtes désormais en mesure d'activer le lazy loading sur votre site WordPress, d'utiliser des plugins tels que LWS Optimize pour un contrôle plus poussé, et même de savoir comment exclure certaines images ou vidéos de cette optimisation si nécessaire. 💡

Vos utilisateurs pourront profiter d'une expérience utilisateur améliorée, avec des pages qui se chargent rapidement et sans frustration. 🌐✨

Merci de nous avoir lus jusqu'au bout ! Votre avis nous intéresse : avez-vous déjà mis en place le lazy loading sur votre site ? Rencontrez-vous des défis spécifiques ? N'hésitez pas à partager votre expérience et à poser vos questions dans la section des commentaires ci-dessous. 👇 Votre retour est précieux et pourrait aider d'autres lecteurs !

Et si cet article vous a été utile, pensez à le partager avec d'autres webmasters ou développeurs qui pourraient bénéficier de ces astuces ! 🤓

Rate this article :

This article was useful to you ?

Article utileYes

Article non utileNo

Vous souhaitez nous laisser un commentaire concernant cet article ?

Si cela concerne une erreur dans la documentation ou un manque d'informations, n'hésitez pas à nous en faire part depuis le formulaire.

Pour toute question non liée à cette documentation ou problème technique sur l'un de vos services, contactez le support commercial ou le support technique

Merci ! N'hésitez pas à poser des questions sur nos documentations si vous souhaitez plus d'informations et nous aider à les améliorer.


Vous avez noté 0 étoile(s)

Similar articles

2mn reading

Comment mettre le plugin d'affiliation LWS sur WordPress ?

3mn reading

Comment installer le plugin LWS SMS pour WooCommerce sur WordPress ?

0mn reading

Comment nettoyer son site WordPress avec LWS Cleaner ?

0mn reading

Comment faciliter la gestion de WordPress avec LWS tools ?


Ask the LWS team and its community a question