Comment charger facilement des images paresseuses dans WordPress (2 façons)

Aucun internaute n’a envie d’attendre le chargement d’une page lente, comme c’est le cas lorsqu’une publication de blog contient de nombreuses images. Même si elles sont superbes, l’attente pour les voir peut être frustrante pour vos internautes.

C’est là que le « lazy loading » (chargement paresseux) peut apporter une aide. Il s’agit d’une astuce astucieuse qui consiste à charger les images uniquement lorsqu’elles sont nécessaires. Au lieu de charger toutes les images d’une page en même temps, votre site attend que l’internaute défile vers le bas jusqu’à l’endroit où une image est sur le point d’apparaître.

Cela signifie des temps de chargement de page plus rapides, des internautes plus satisfaits et même un coup de pouce pour le référencement de votre site.

La meilleure partie est, que l’ajout de chargement paresseux à votre site WordPress est plus facile que vous ne le pensez. Dans cet article, nous vous guiderons à travers le processus afin que vous puissiez profiter d’un site plus rapide et plus efficace.

Pourquoi charger les images paresseusement dans WordPress ?

Les images WordPress à chargement paresseux peuvent accélérer votre site et offrir une meilleure expérience à l’utilisateur.

Personne n’aime les sites trop lents. En fait, une étude sur les performances des sites Web a trouvé qu’un retard d’une seconde dans le temps de chargement des pages prospectait 7 % de conversions en moins, 11 % de pages vues en moins et 16 % de satisfaction des clients/clientes.

Les moteurs de recherche comme Google n’aiment pas non plus les sites qui se chargent lentement. C’est pourquoi les sites plus rapides sont mieux classés dans les résultats de recherche.

Les images prennent le plus de temps à charger sur votre site WordPress par rapport aux autres éléments web. Si vous ajoutez beaucoup d’images à vos articles, alors chaque image augmente le temps de chargement de votre page.

Une façon de gérer cette situation est d’utiliser un service CDN comme BunnyCDN. Un CDN permettra aux utilisateurs/utilisatrices de télécharger des images à partir d’un serveur web le plus proche d’eux et de réduire la vitesse de chargement du site.

Cependant, vos images seront toujours chargées et affecteront le temps de chargement global de la page. Pour contourner ce problème, vous pouvez retarder le chargement des images en mettant en place le lazy load sur votre site.

Comment fonctionne le chargement paresseux des images ?

Au lieu de charger toutes vos images en même temps, le chargement paresseux télécharge uniquement les images visibles sur l’écran de l’utilisateur. Il remplace toutes les autres images par une image de remplacement ou un espace vide.

Lorsqu’un compte défile vers le bas de la page, votre site charge les images qui sont visibles dans la zone de vue du navigateur.

Le chargement paresseux peut être très bénéfique pour votre blog WordPress:

• Il réduit le temps de chargement initial des pages web afin que les utilisateurs/utilisatrices voient votre site plus rapidement.
• Il préserve la bande passante en livrant uniquement les images qui sont vues, ce qui peut vous permettre d’enregistrer des économies sur les coûts d’hébergement de WordPress.

La version 5.5 de WordPress a ajouté le chargement paresseux comme une fonctionnalité par défaut.

Cependant, si vous souhaitez personnaliser le mode de chargement paresseux de vos images et également charger paresseusement les images d’arrière-plan, vous devrez utiliser une extension WordPress.

Voyons comment charger les images paresseusement dans WordPress à l’aide de deux extensions différentes. Vous pouvez utiliser les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Chargement paresseux des images dans WordPress avec WP Rocket

Nous recommandons l’utilisation de l’extension WP Rocket pour le chargement paresseux des images dans WordPress. C’est la meilleure extension de mise en cache WordPress sur le marché qui vous permet d’activer facilement le chargement paresseux des images.

En dehors de cela, c’est une extension très puissante qui vous aide à optimiser la vitesse de votre page sans connaître de termes techniques complexes ou configurer des réglages d’experts.

Dès la sortie de la boîte, tous les réglages de mise en cache recommandés par défaut permettront de configurer votre site WordPress avec une grande rapidité.

La première chose à faire est d’installer et d’activer l’extension WP Rocket. Pour plus de détails, vous pouvez consulter notre guide sur l’installation d’une extension WordPress.

Pour activer le chargement paresseux des images, il vous suffit de cocher quelques cases. Vous pouvez même activer le lazy loading pour les vidéos, ce qui améliorera encore la vitesse de votre site.

Tout ce que vous avez à faire est d’aller dans Réglages  » WP Rocket dans votre Tableau de bord WordPress et de cliquer sur l’onglet ‘Media’. Ensuite, vous pouvez défiler jusqu’à la section ‘Chargement différé’ et cocher les cases à côté de ‘Activer pour les images’ et ‘Activer pour les iframes et les vidéos’.

Pour plus de détails, consultez notre guide sur la manière d’installer et de configurer correctement WP Rocket dans WordPress.

Méthode 2 : Chargement paresseux des images dans WordPress avec Optimole

Cette méthode utilise l’extension gratuite Optimole. C’est l’une des meilleures extensions de compression d’images WordPress qui vous permet d’activer facilement le chargement paresseux des images.

Si vous recevez plus de 5 000 visiteurs par mois, vous aurez besoin de la version premium d’Optimole. Pour plus de détails, consultez notre évaluation complète d’Optimole.

Tout d’abord, vous devez installer et activer l’extension Optimole. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Lors de l’activation, vous verrez un écran vous demandant de vous inscrire pour obtenir une clé API. Vous pouvez également trouver cet écran en naviguant vers Optimole dans le menu d’administration.

Vous devez vous assurer que l’adresse e-mail indiquée est correcte, puis cliquer sur le bouton « Create & connect your account » (Créer et connecter votre compte). Si vous êtes déjà un utilisateur/utilisatrice, il vous suffit de cliquer sur le bouton « J’ai déjà une clé API ».

Vous devrez peut-être attendre quelques secondes pendant que l’extension se connecte à Optimole. Après cela, l’extension commencera automatiquement à optimiser vos images afin que vos internautes voient désormais les meilleures images pour leurs appareils.

Pendant ce temps, vous pouvez cliquer sur l’onglet « Réglages » pour définir la charge paresseuse.

Confirmez-vous que le réglage « Redimensionner les images et & Lazy load » est activé. Cela permettra de générer des images en fonction de la taille de l’écran de votre internaute et d’améliorer les vitesses de chargement.

Cliquez ensuite sur l’option de menu « Avancé » et sélectionnez « Chargement différé ». Sur cet écran, il y a quelques réglages différents qui vous permettent de personnaliser la façon dont vos images se chargeront paresseusement.

Tout d’abord, vous pouvez définir le paramètre « Exclure le premier nombre d’images du chargement différé ». Cela empêchera les images situées en haut de vos publications ou pages de se charger paresseusement, de sorte que les images situées au-dessus du pli apparaîtront toujours.

Vous pouvez définir cette valeur à 0 si vous souhaitez que chaque image soit chargée paresseusement.

Il existe quelques autres réglages avancés de lazy load dans Optimole que vous pouvez vérifier. Ces Réglages sont activés par défaut.

Le premier est le réglage « Redimensionner les images ». Ce paramètre redimensionne les images en fonction de la taille de l’écran de l’internaute et accélère le chargement de la page.

Ensuite, vous verrez le réglage « Activer le chargement différé pour les images d’arrière-plan ». Cela permettra de charger paresseusement vos images d’arrière-plan, qui peuvent être les plus grandes images de votre site.

Un autre réglage concerne le chargement paresseux des vidéos embarquées et des iframes. Si vous avez beaucoup de contenu vidéo embarqué, il est préférable de laisser ce réglage activé. Il chargera une image de remplacement à la place de la vidéo. Lorsque l’on clique sur l’image de remplacement, la vidéo complète se charge.

Vous pouvez continuer à personnaliser ces réglages et voir ce qui fonctionne le mieux pour votre site et vos images.

Avant de quitter les réglages du plugin, veillez à cliquer sur le bouton « Enregistrer les modifications » en bas de la page.

Astuces pour optimiser vos images WordPress

Bien que le lazy loading aide à améliorer la vitesse de chargement du site, il existe quelques autres façons d’optimiser vos images WordPress pour obtenir les meilleures performances.

Par exemple, nous vous recommandons de compresser vos images avant de les téléverser sur votre site à l’aide d’un outil comme TinyPNG ou JPEGmini. Vous pouvez également utiliser une extension de compression d’images automatisée comme Optimole ou EWWW Image Optimizer.

Il est également important de choisir la bonne taille d’image WordPress et le bon format de fichier pour vos images. Les JPEG conviennent mieux aux photos ou aux images comportant de nombreuses couleurs, les PNG sont adaptés aux images simples ou transparentes, et les GIF sont uniquement destinés aux images animées.

Nous espérons que cet article vous a aidé à apprendre comment charger des images paresseusement sur WordPress. Vous pouvez également consulter notre tutoriel sur comment optimiser facilement les images pour le web sans perdre en qualité et nos choix d’experts des meilleurs plugins de téléversement de fichiers pour WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.