Comment charger paresseusement les images dans WordPress (2 méthodes)

Personne n'aime un site web lent. Si vos pages mettent trop de temps à se charger, les visiteurs partiront avant même de voir votre contenu.

Les images sont souvent la principale cause de la lenteur de chargement. Elles consomment le plus de bande passante, ce qui ralentit vos performances et votre classement dans les moteurs de recherche.

Nous avons optimisé des centaines de sites pour la vitesse, et le chargement différé (lazy loading) est l'une des améliorations rapides les plus efficaces que nous recommandons. Il empêche le chargement des images jusqu'à ce que l'utilisateur fasse défiler la page pour les voir.

Dans ce guide, nous vous montrerons comment charger facilement des images en différé dans WordPress pour accélérer instantanément votre site.

Pourquoi charger paresseusement les images dans WordPress ?

Le chargement paresseux des images WordPress peut accélérer votre site web et offrir une meilleure expérience utilisateur.

Personne n'aime les sites web lents. En fait, une étude sur les performances des sites web a révélé qu'un délai d'une seconde dans le temps de chargement d'une page entraîne 7 % de conversions en moins, 11 % de pages vues en moins et une diminution de 16 % de la satisfaction client.

Les moteurs de recherche comme Google n'aiment pas non plus les sites web à chargement lent. C'est pourquoi les sites plus rapides se classent plus haut dans les résultats de recherche.

Les images prennent le plus de temps à se charger sur votre site WordPress par rapport aux autres éléments web. Si vous ajoutez beaucoup d'images à vos articles, 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, ou une option plus simple comme Envira CDN. Un CDN permettra aux utilisateurs de télécharger des images depuis un serveur web le plus proche d'eux et de réduire les temps de chargement du site web.

Cependant, vos images seront toujours chargées et affecteront le temps de chargement global de la page. Pour résoudre ce problème, vous pouvez retarder le chargement des images en implémentant le chargement différé sur votre site Web.

Comment fonctionne le chargement différé des images ?

Au lieu de charger toutes vos images en une seule fois, le chargement différé ne télécharge que les images visibles à l'écran de l'utilisateur. Il remplace toutes les autres images par une image de substitution ou un espace vide.

Lorsque l'utilisateur fait défiler la page, votre site Web charge les images visibles dans la zone de visualisation du navigateur.

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

• Il réduit le temps de chargement initial de la page Web, de sorte que les utilisateurs verront votre site plus rapidement.
• Il économise de la bande passante en ne livrant que les images qui sont vues, ce qui peut vous faire économiser de l'argent sur les coûts d'hébergement WordPress.

Qu'est-ce que le chargement différé natif dans WordPress ?

Depuis WordPress 5.5, la plateforme inclut le « chargement différé natif » par défaut. Cela signifie que WordPress ajoute automatiquement l'attribut HTML loading="lazy" à vos balises img.

Cela indique aux navigateurs modernes (comme Chrome, Firefox et Safari) de retarder le chargement de l'image jusqu'à ce que l'utilisateur fasse défiler la page près de celle-ci.

Si WordPress fait cela automatiquement, pourquoi ai-je besoin d'un plugin ?

Bien que le chargement natif différé soit un bon début, il n'est pas parfait. Il repose entièrement sur le navigateur du visiteur pour décider quand charger une image. Des plugins dédiés comme WP Rocket offrent de meilleures performances car ils :

• Chargent en différé les images d'arrière-plan (ce que WordPress natif ne peut pas faire).
• Chargent en différé spécifiquement les iframes et les vidéos.
• Utilisent des scripts avancés qui chargent les images plus rapidement que le comportement par défaut du navigateur.

Jetons un coup d'œil à la façon de charger les images paresseusement dans WordPress à l'aide de deux plugins différents. Vous pouvez utiliser les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Charger les images paresseusement dans WordPress avec WP Rocket

Nous vous recommandons d'utiliser le plugin WP Rocket pour charger les images paresseusement dans WordPress. C'est le meilleur plugin 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 un plugin très puissant qui vous aide à optimiser la vitesse de votre page sans connaître de termes techniques complexes ni configurer de paramètres experts.

Dès la sortie de la boîte, tous leurs paramètres de mise en cache recommandés par défaut accéléreront considérablement votre site WordPress.

La première chose que vous devrez faire est d'installer et d'activer le plugin WP Rocket. Pour plus de détails, vous pouvez consulter notre guide sur comment installer un plugin WordPress.

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

Il vous suffit d'aller dans Réglages » WP Rocket dans votre tableau de bord WordPress et de cliquer sur l'onglet « Média ». Ensuite, vous pouvez faire défiler jusqu'à la section « LazyLoad » 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 comment installer et configurer correctement WP Rocket dans WordPress.

Méthode 2 : Charger les images en différé dans WordPress avec Optimole

Cette méthode utilise le plugin gratuit Optimole. C'est l'un des meilleurs plugins de compression d'images WordPress qui vous permet d'activer facilement le chargement différé des images.

Si votre trafic dépasse les limites du plan gratuit, vous aurez besoin de la version premium d'Optimole. Pour plus de détails, consultez notre avis complet sur Optimole.

Tout d'abord, vous devez installer et activer le plugin Optimole. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

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

Vous devrez vous assurer que l'adresse e-mail indiquée est correcte, puis cliquer sur le bouton « Créer et connecter votre compte ». Alternativement, si vous êtes un utilisateur existant, cliquez simplement sur le bouton « J'ai déjà une clé API ».

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

Pendant que cela se produit, vous pouvez cliquer sur l'onglet « Paramètres » pour configurer le chargement différé.

Here, you need to make sure the ‘Scale images and & Lazy load’ setting is enabled. This will generate images based on your visitor’s screen size and improve loading speeds.

Next, click on the ‘Advanced’ menu option and select ‘Lazyload’. On this screen, there are a few different settings that let you customize how your images will lazy load.

Tout d'abord, vous pouvez ajuster le paramètre « Exclure le premier nombre d'images du chargement différé ».

Cela empêchera les images en haut de vos articles ou pages d'être chargées en différé. Cela garantit que les images au-dessus de la ligne de flottaison se chargent instantanément, ce qui améliore votre score de Largest Contentful Paint (LCP) pour un meilleur SEO.

You can set this to 0 if you want every image to lazy load.

There are a few other advanced lazy load settings in Optimole that you can check. These settings are enabled by default.

The first is the ‘Scale Images’ setting. This will scale images to the visitor’s screen size and make your page load faster.

After that, you will see the ‘Enable lazyload for background images’ setting. This will lazy load your background images, which may be the largest images on your website.

Another setting is lazy loading embedded videos and iframes. If you have a lot of embedded video content, then you will want to leave this setting on. It will load a placeholder image in place of the video. When the placeholder is clicked, the full video will load.

You can continue to customize these settings and see what works best for your website and your images.

Before you exit the plugin settings, make sure to click the ‘Save changes’ button at the bottom of the page.

Dépannage des problèmes courants de chargement différé

Parfois, l'activation du chargement différé peut faire disparaître les images ou les rendre floues.

Voici des solutions courantes :

1. Les images ne s'affichent pas

Cela se produit souvent si vous avez deux plugins de chargement différé actifs en même temps (par exemple, WP Rocket et le chargement différé intégré de votre thème). Assurez-vous de n'utiliser qu'une seule méthode pour éviter les conflits.

2. Les images au-dessus de la ligne de flottaison apparaissent tardivement

Si votre logo ou votre image d'en-tête apparaît après le reste de la page, cela peut nuire à votre expérience utilisateur. Comme mentionné dans les méthodes ci-dessus, vous devriez exclure les 2 à 3 premières images de votre page du chargement différé pour résoudre ce problème.

3. Décalage de mise en page (CLS)

Si votre contenu ‘saute’ lorsqu'une image se charge, cela nuit à votre score SEO. Pour éviter cela, assurez-vous que toutes vos images ont des attributs width et height définis. WordPress le fait automatiquement, mais certains thèmes peuvent le remplacer.

Foire aux questions sur le chargement paresseux des images

We know you might still have some questions about lazy loading in WordPress. Here are the answers to some of the most common ones we receive.

1. Does WordPress automatically lazy load images?

Oui, depuis la sortie de WordPress 5.5, le chargement paresseux de base pour les images est une fonctionnalité par défaut. Cependant, cette fonction native est limitée et ne s'applique pas aux images d'arrière-plan, aux iframes ou aux vidéos. Pour vous assurer que tous vos médias sont optimisés, nous vous recommandons d'utiliser un plugin dédié comme WP Rocket ou Optimole.

2. Is lazy loading good for SEO?

Absolutely. Lazy loading significantly improves your page load speed, which is a key factor for user experience. Search engines like Google favor faster websites, so improving your speed with lazy loading can give your site a nice boost in search rankings.

3. Quel est le meilleur plugin de lazy load pour WordPress ?

Pour des performances globales et une facilité d'utilisation, nous recommandons WP Rocket. C'est le meilleur plugin de performance du marché, et il inclut une fonctionnalité de lazy load puissante et simple en quelques clics. Si vous recherchez une excellente alternative gratuite, Optimole est un excellent choix qui offre également des options de lazy loading robustes.

4. Peut-on faire du lazy load pour les vidéos dans WordPress ?

Oui, vous le pouvez et vous devriez ! C'est un moyen fantastique d'améliorer la vitesse des pages qui contiennent beaucoup de contenu vidéo intégré. WP Rocket et Optimole vous permettent tous deux d'activer facilement le lazy loading pour vos vidéos, qui les remplace par une image d'aperçu jusqu'à ce qu'un utilisateur clique pour jouer.

5. Faut-il faire du lazy load pour les images au-dessus de la ligne de flottaison ?

Il est généralement préférable d'exclure les images situées tout en haut de votre page (au-dessus de la ligne de flottaison) du lazy loading. Cela garantit que la première chose que vos visiteurs voient se charge instantanément, créant ainsi une excellente première impression. Des plugins comme Optimole vous permettent d'exclure facilement les premières images du lazy loading pour cette raison.

6. Comment désactiver le chargement paresseux natif dans WordPress ?

Si vous préférez utiliser un plugin spécifique et souhaitez vous assurer que le chargement paresseux natif de WordPress n'interfère pas, vous pouvez le désactiver en ajoutant un simple extrait de code au fichier functions.php de votre thème ou en utilisant un plugin d'extraits de code comme WPCode.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Conseils bonus pour optimiser vos images WordPress

Bien que le lazy loading contribue à améliorer la vitesse de chargement de votre site web, il existe d'autres moyens d'optimiser vos images WordPress pour de meilleures performances.

Par exemple, nous vous recommandons de compresser vos images avant de les télécharger sur votre site web en utilisant un outil comme TinyPNG ou JPEGmini. Alternativement, vous pouvez utiliser un plugin de compression d'images automatisé tel que Optimole ou EWWW Image Optimizer.

Il est également important de choisir le bon format de fichier. Bien que les JPEG et les PNG soient courants, nous recommandons vivement d'utiliser des formats de nouvelle génération comme WebP. Ces types de fichiers offrent une compression et une qualité supérieures, ce qui permet à votre site de se charger beaucoup plus rapidement.

Nous espérons que cet article vous a aidé à apprendre comment charger les images en différé dans WordPress. Vous voudrez peut-être aussi consulter notre tutoriel sur comment optimiser facilement les images pour le web sans perdre en qualité et nos sélections d'experts des meilleurs plugins de téléversement de fichiers pour WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.