Comment différer les images hors écran dans WordPress

Nous savons tous que la vitesse est très importante pour le référencement et la conversion. Rendre un site Web rapide peut aider ce site Web à se classer plus haut sur Google. Et cela peut aussi rendre vos lecteurs heureux. Qui n'aime pas un site Web rapide?

Mais lorsque vous essayez d'optimiser un site Web pour la vitesse, cela peut prendre beaucoup de temps avec tant de choses à faire. J'essaie généralement de temps en temps de tester mon site Web et de m'assurer qu'il ne fonctionne pas mal. Vous ne savez jamais ce qui est nouveau là-bas. Dans le monde du SEO, les choses changent très souvent.

Si vous avez testé la vitesse de votre site web à l'aide d'outils comme Google PageSpeed ​​Insights ou Web.dev, l'un des avertissements que vous pourriez recevoir est de « différer l'affichage des images hors écran ».

Dans cet article, je vais vous expliquer ce que cela signifie, vous dire comment y remédier et vous recommander des plugins que vous pouvez utiliser pour y remédier.

Cependant, il est important de savoir que si le chargement différé des images hors écran peut améliorer la vitesse de votre mobile, les facteurs les plus importants qui l'influencent sont votre hébergement et votre thème. Chez BloggingTools, nous utilisons Cloudways, car c'est l'hébergement WordPress le plus rapide. Si Cloudways est trop cher pour vous, Bluehost ou Hostinger sont de bonnes alternatives. Quant au thème, nous utilisons GeneratePress , le thème WordPress le plus rapide.

Que signifie différer les images hors écran ?

Différer les images hors écran signifie retarder le chargement des images qui ne sont pas encore visibles pour l'utilisateur. Cela obligera le navigateur à se concentrer sur le chargement uniquement de ce qui est nécessaire et, en fin de compte, à rendre le site Web plus rapide.

Si vous avez beaucoup d'images sur vos publications ou votre page d'accueil, lorsqu'un utilisateur visite votre site, le navigateur commence immédiatement à tout charger. Si les images sont nombreuses, cela peut prendre beaucoup de temps pour rendre la page à l'utilisateur.

Mais lorsque vous reportez des images hors écran, les images ne se chargent que lorsque l'utilisateur y fait défiler.

Notez que ce ne sont pas seulement les images que vous pouvez différer, mais la plupart des actifs de votre site Web peuvent également être différés jusqu'à ce qu'ils soient nécessaires.

Comment différer les images hors écran dans WordPress

Vous pouvez différer les images hors écran en chargeant paresseusement les images. Le chargement différé garantira que les images ne se chargeront que lorsqu'elles seront nécessaires. Cela rendra à son tour le site Web plus rapide.

Une fois que vous êtes en mesure de charger paresseusement des images et d'autres éléments qui empêchent votre page de se charger rapidement. Les "différer les images hors écran" de Google PageSpeed ​​Insight et d'autres outils de test disparaîtront.

Suivez ces étapes pour différer les images hors écran dans WordPress :

1. Installez un plugin de chargement paresseux

Il existe de nombreux plugins de chargement paresseux qui sont disponibles gratuitement dans le répertoire des plugins WordPress. Vous pouvez aller dans Plugin, ajouter un nouveau puis taper chargement paresseux. Installez n'importe qui avec de bonnes critiques.

Mais vous n'avez pas besoin d'installer de plugin si vous avez déjà des plugins capables de gérer le chargement paresseux. La plupart des plugins de mise en cache ont un chargement paresseux. Vérifiez votre plugin de mise en cache pour les options de chargement paresseux. Les plugins d'optimisation d'image ont pour la plupart une option de chargement paresseux.

De plus, si vous utilisez Jetpack et l'optimisation automatique, ils ont des options de chargement paresseux.

2. Activez les options de chargement paresseux

Une fois que vous avez installé le plugin, assurez-vous d'activer l'option de chargement paresseux. Si vous avez un plugin de cache avec une fonction de chargement différé, assurez-vous d'activer cette option.

3. Videz votre cache.

Une fois le lazy loading activé, videz votre cache et c'est tout !

Vous pouvez tester à nouveau votre site, l'avertissement devrait avoir disparu !

Différer les images hors écran Plugin WordPress

Différer les plugins d'images hors écran sont les mêmes que les plugins de chargement paresseux. En voici quelques-unes ci-dessous :

1. Jetpack

Jetpack est l'une des extensions WordPress les plus populaires, avec plus de 5 millions d'installations actives. Si Jetpack est déjà installé, vous n'avez pas besoin d'installer d'extension supplémentaire pour le chargement différé.

Activez simplement le chargement différé dans Jetpack. Pour l'activer, allez dans les paramètres de Jetpack puis sous l'onglet performances, faites défiler vers le bas et activez le chargement différé.

2. Optimisation automatique

Autoptimize est un plugin d'optimisation des performances très populaire. Si vous utilisez Autoptimize, il est inutile d'installer un plugin de chargement différé, car Autoptimize intègre déjà cette fonctionnalité.

Accédez aux paramètres d'optimisation automatique, puis cliquez sur l'onglet images et activez le chargement différé.

3. WP Rocket

WP Rocket est l'extension de mise en cache premium la plus populaire pour WordPress. Avec WP Rocket, aucune autre extension n'est nécessaire, car le chargement différé est déjà activé.

Accédez aux paramètres de WP Rocket puis cliquez sur le média, à partir de là, vous pouvez activer le chargement paresseux.

4. Cache LiteSpeed

Si vous utilisez l' extension LiteSpeed ​​Cache , celle-ci propose une fonction de chargement différé. Pour l'activer, rendez-vous dans la section « Médias » et activez-la.

5. Chargement paresseux a3

Si vous avez simplement besoin d'une extension pour le chargement différé, a3 Lazy Load est une excellente option. Allez dans Extensions > Ajouter. Recherchez a3 Lazy Load. Installez-la et activez-la. Ensuite, accédez aux paramètres de l'extension et activez le chargement différé.

Généralement, certains thèmes, certains plugins de cache et certains plugins d'optimisation d'image sont livrés avec une fonction de chargement paresseux.

Foire Aux Questions (FAQ)