Lazy Load WordPress : Comment l’implémenter sur votre site

Si votre site WordPress s’appuie fortement sur un contenu visuel, vous pouvez ajouter la fonctionnalité de lazy load. Cette fonctionnalité de WordPress permet d’améliorer la vitesse et les performances des pages d’un site web, ce qui la rend essentielle pour vos efforts de référencement.

Cet article examine le fonctionnement du lazy load WordPress, ainsi que ses avantages et ses inconvénients. Vous apprendrez également comment le mettre en œuvre sur votre site web et comment optimiser son utilisation pour obtenir de meilleurs résultats.

Comment fonctionne le lazy load de WordPress ?

Lorsqu’un utilisateur visite un site web WordPress, son navigateur télécharge toutes les images de la page web en une seule fois. Pour les pages contenant de nombreuses images à haute résolution, ce processus peut augmenter le temps de chargement de manière significative, ce qui nuit aux performances de votre site.

L’ajout d’un lazy loading à votre site web l’incite à ne télécharger que les images visibles sur l’écran de l’utilisateur. Les autres fichiers multimédias sont remplacés par une image de remplacement et ne sont chargés que lorsque l’utilisateur fait défiler la page web.

Avantages et inconvénients du lazy load de WordPress

Si vous vous demandez encore si vous devriez mettre en œuvre le lazy loading des images dans WordPress, voici les avantages et les inconvénients de cette fonctionnalité :

Pour :

• Réduit l’utilisation de la bande passante, ce qui diminue les coûts d’hébergement.
• Améliore la vitesse du site, améliorant ainsi l’expérience de navigation des visiteurs.
• Améliore l’expérience mobile.
• Optimise le score du Largest Contentful Paint.
• Améliore les efforts de référencement, en augmentant le classement de votre site dans les moteurs de recherche.

Cons :

• Provoque une mise en mémoire tampon du contenu, ce qui nuit à la vitesse de chargement.
• Ralentit le défilement rapide.

Comment ajouter le lazy load à votre site WordPress : 3 méthodes

Il existe trois façons de mettre en œuvre le lazy load sur votre site WordPress. Nous vous recommandons de choisir celle qui convient le mieux à votre situation.

1. Mise à jour vers WordPress 5.4 ou supérieur

WordPress 5.4 et les versions ultérieures incluent par défaut les images à chargement paresseux. La mise à jour de votre WordPress vers la version la plus récente activera automatiquement le lazy load.

Bien qu’il s’agisse de la méthode la plus simple, elle ne vous permet pas de configurer les images à charger paresseusement. Par conséquent, votre site web risque d’abuser de cette fonctionnalité et de présenter les inconvénients susmentionnés.

Un autre facteur à prendre en compte est la nature différente de la fonction de lazy load dans chaque version de WordPress. Récemment, WordPress a publié que WordPress 5.9 mettait en œuvre des raffinements pour résoudre les problèmes liés aux mauvais scores de Large Contentful Paint des versions antérieures.

Cela signifie que les sites web fonctionnant avec des versions antérieures de WordPress ne bénéficient pas des mêmes avantages que ceux qui utilisent WordPress 5.9.

2. Activer le lazy load natif via le navigateur

Les navigateurs les plus répandus, tels que Chrome, Firefox et Opera, prennent en charge le lazy loading des images en mode natif. Il vous suffit d’ajouter l’attribut <img loading=”lazy”> aux images et vidéos ciblées pour l’activer automatiquement.

Dans le lazy load natif de WordPress, l’attribut loading prend en charge ces trois valeurs :

• Auto – déclenche le lazy load par défaut, ce qui revient à ne pas inclure d’attribut de chargement.
• Lazy – répartit le chargement des éléments jusqu’à ce que chacun atteigne la distance spécifiée par rapport à la fenêtre.
• Eager – charge toutes les ressources dès le chargement de la page, quel que soit leur emplacement.

Voici un exemple d’utilisation :

<img src="nom-image.png" loading="lazy" alt="attribut alt" width="200″ height="200″>

Cette méthode est idéale pour le lazy load de certaines images, en attribuant à chacune d’elles un attribut de chargement qui détermine le moment de leur apparition dans la fenêtre de visualisation. Cependant, le lazy load d’images individuelles peut prendre un certain temps, surtout si votre site web contient de nombreux fichiers multimédias.

3. Installer un plugin

Étant donné que tous les navigateurs ne prennent pas en charge le lazy load des images et des vidéos, la deuxième méthode risque de ne pas fonctionner tout le temps. Vous pouvez atténuer ce problème en installant un plugin WordPress de lazy loading. Cette méthode vous permet de mieux contrôler les images à charger paresseusement sans avoir à coder.

Voici les meilleurs plugins WordPress pour le lazy load, accessibles via le répertoire de plugins de WordPress.

Optimisation des images et lazy load par Optimole

L’un des points forts d’Optimole est qu’il prend en charge tous les types d’images, y compris AVIF. Ce plugin freemium de lazy load WordPress permet d’optimiser les images WordPress et de les mettre à l’échelle pour qu’elles s’adaptent aux appareils des visiteurs, garantissant ainsi une expérience utilisateur optimale.

Lorsqu’il détecte un réseau plus lent, Optimole vous donne la possibilité de réduire la qualité de l’image. En outre, vous pouvez économiser de l’espace de stockage en stockant vos images dans la bibliothèque en nuage d’Optimole.

Le plugin gratuit vous permet d’optimiser les images pour un maximum de 5 000 visites mensuelles. L’achat du plan Pro vous permet de charger paresseusement des images pour 25 000 visiteurs actifs mensuels et plus. Dans les deux cas, les images sont servies via le CDN AWS Cloudfront.

Smush

Smush est un plugin d’optimisation d’image populaire qui prend en charge le lazy load. Il est compatible avec les thèmes populaires, les constructeurs de pages et les plugins de bibliothèque multimédia. De plus, il vous permet d’enregistrer les paramètres du plugin dans des configurations illimitées et de les appliquer en quelques clics.

D’autres fonctionnalités utiles incluent la détection de taille d’image incorrecte, le support multisite et des outils de compression d’image. La mise à niveau vers Smush Pro vous permet d’optimiser les grandes images sans limitation de taille, de sauvegarder les images originales et d’accéder à d’autres plugins WPMU Pro. Les prix commencent à partir de 5.69 €/mois.

a3 Lazy Load

a3 Lazy Load est un plugin gratuit de lazy load orienté mobile. Il est entièrement compatible avec WordPress 5.9 et un certain nombre d’outils populaires, y compris les plugins WebP et AMP.

Outre les fonctionnalités de base du lazy load d’images, a3 Lazy Load vous permet également de charger paresseusement des vidéos, y compris des vidéos intégrées dans des pages, des articles, des types d’articles personnalisés et des widgets. Des effets de lazy load et l’option de charger des scripts depuis l’en-tête ou le pied de page sont également disponibles.

Parmi les autres fonctionnalités notables, citons la prise en charge du multisite, la prise en charge des images WebP et le lazy load des iframes – qui s’applique aux iframes que le noyau de WordPress ne charge pas, comme Google Maps et les médias intégrés.

Conseils sur le lazy loading de WordPress

La clé pour tirer le meilleur parti du lazy loading est de l’utiliser correctement. Voici quelques conseils pour utiliser le lazy load sur votre site WordPress :

• Ne chargez pas paresseusement les images au-dessus du pli. Les images placées en haut de la page étant visibles au chargement, il n’y a aucun avantage à les charger paresseusement.
• Choisissez des espaces réservés appropriés. Nous vous recommandons d’utiliser une couleur dominante unie ou une image de faible qualité comme marqueur pour vos images.
• Ajoutez un temps tampon pour le chargement des images. De cette façon, vos images sont prêtes juste avant d’entrer dans la fenêtre du visiteur, ce qui élimine tout temps d’attente.
• Définissez les dimensions des conteneurs d’images. Vous éviterez ainsi les changements soudains de mise en page, ce qui donnera à votre page web un aspect ordonné lors de son chargement.
• Implémentez le lazy loading uniquement sur les pages longues. Les pages longues sont celles qui nécessitent plus de deux défilements pour atteindre la fin et qui comportent plus de cinq images sous le pli.

Conclusion

Le lazy loading des images dans WordPress vous permet d’offrir aux visiteurs une meilleure expérience de navigation. En plus d’améliorer la vitesse du site, cette fonctionnalité réduit également l’utilisation de la bande passante. Dans l’ensemble, elle contribue à vos efforts de référencement pour un meilleur classement dans les moteurs de recherche.

Nous espérons que cet article vous a aidé à comprendre comment tirer le meilleur parti de la fonction de lazy load sur les sites WordPress. Veillez à utiliser un hébergement WordPress de haute qualité pour améliorer encore les performances de votre site. Nous vous souhaitons bonne chance !