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

La mise en œuvre du chargement paresseux des images dans WordPress est une petite étape qui peut faire une énorme différence pour votre site web. C'est une pratique essentielle pour tout site performant aujourd'hui.

Cette technique unique contribue directement à deux choses que chaque propriétaire de site souhaite. Une meilleure expérience pour les visiteurs et un bel avantage dans le classement des moteurs de recherche.

Pour vos visiteurs, cela signifie que vos pages sont exceptionnellement rapides et réactives. Ils voient votre contenu presque instantanément, ce qui les maintient engagés.

Les moteurs de recherche comme Google remarquent également cette vitesse. Ils ont tendance à favoriser les sites web plus rapides, ce qui peut aider votre contenu à être découvert par plus de personnes.

Nous voulons vous aider à obtenir ces avantages immédiatement. Voici deux méthodes simples pour activer le chargement paresseux sur votre site dès aujourd'hui.

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, qui est spécialement conçu pour les images. Un CDN permettra aux utilisateurs 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 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.

La sortie de WordPress 5.5 a ajouté le chargement différé comme fonctionnalité par défaut.

Cependant, si vous souhaitez personnaliser la façon dont vos images se chargent de manière différée et également charger de manière différée les images d'arrière-plan, vous devrez utiliser un plugin WordPress.

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 :

1. Charger les images paresseusement dans WordPress avec WP Rocket (recommandé)
2. Charger les images paresseusement dans WordPress avec Optimole (gratuit)
3. Foire aux questions sur le chargement paresseux des images
4. Conseils bonus pour optimiser vos images WordPress

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 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 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.

First, you can adjust the ‘Exclude first number of images from lazyload’ setting. This will stop images at the top of your posts or pages from lazy loading, so images above the fold will always appear.

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.

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?

Yes, since the release of WordPress 5.5, basic lazy loading for images is a default feature. However, this native function doesn’t apply to things like background images or videos. For more control and to ensure all your media is lazy-loaded, we recommend using a dedicated plugin like WP Rocket or 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.

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 la bonne taille d'image WordPress et le bon format de fichier pour vos images. Les JPEG conviennent mieux aux photos ou aux images avec de nombreuses couleurs, les PNG sont adaptés aux images simples ou transparentes, et les GIF sont uniquement pour les images animées.

Nous espérons que cet article vous a aidé à apprendre comment charger les images paresseusement 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échargement 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.