Comment différer les images hors écran dans WordPress

Nous savons tous que la vitesse est très importante pour Le SEO et conversion. Rendre un site Web rapide peut aider ce site Web à être mieux classé 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 consulté votre site Web via outils de test de vitesse comme Google PageSpeed ​​Insight ou Web.dev, l'un des avertissements que vous pourriez recevoir est de "différer les images hors écran".

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

Cependant, vous devez savoir que pourquoi le report des images hors écran peut augmenter la vitesse de votre mobile, les facteurs les plus importants affectant votre vitesse sont votre hébergement et votre thème. Ici à BloggingOutils que nous utilisons Cloudways car c'est l'hébergement WordPress le plus rapide. Si vous ne pouvez pas vous permettre Cloudways, Bluehost ou Hostinger sont de bonnes options. Pour le thème, nous utilisons le plus rapide Thème WordPress connue sous le nom GeneratePress.

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'un des plugins WordPress les plus populaires avec plus de 5 millions d'installations actives. Si vous avez déjà installé Jetpack, vous n'avez pas besoin d'installer un plugin 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 de performance très populaire. Si vous utilisez Autoptimize, il n'est pas nécessaire d'installer un plugin de chargement paresseux car Autoptimize a la même 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 le plugin de mise en cache WordPress premium le plus populaire. Si vous utilisez WP Rocket, vous n’avez besoin d’aucun autre plugin, le chargement paresseux est 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 le Plug-in LiteSpeed ​​Cache, Il dispose d'une fonction de chargement paresseux. Pour l'activer, accédez simplement à la section multimédia, et là, vous pouvez activer le chargement paresseux.

5. Chargement paresseux a3

Si vous avez juste besoin d'un plugin pour le chargement paresseux seul, alors a3 Charge paresseuse est un bon plugin pour ça. Allez simplement dans plugin> ajouter nouveau. Recherchez a3 Lazy Load. Installez et activez. Ensuite, allez dans les paramètres du plugin 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)