Optimisation des images dans WordPress avec le lazy loading et le format Webp

L'optimisation d'image dans WordPress, se réfère au processus d'optimisation des images pour améliorer leur performance et réduire leur taille de fichier sans compromettre de manière significative leur qualité visuelle.

Examinons quelques techniques et pratiques visant à améliorer la vitesse de chargement des images sur un site web WordPress. Cela se traduit généralement par une amélioration de l'expérience utilisateur et un meilleur classement dans les moteurs de recherche (parce que les moteurs de recherche n'aiment pas les sites web qui se chargent lentement).

Voyons quelques techniques courantes d'optimisation des images dans WordPress.

Il s'agit de réduire la taille du fichier d'une image sans perdre trop de qualité visuelle. Vous pouvez compresser des images en utilisant différentes méthodes et en utilisant des outils de compression d'images en ligne , des plugins WordPress ou des logiciels d'optimisation d'images.

Les images doivent être redimensionnées en fonction de leurs dimensions d'affichage sur le site web, afin d'éviter une utilisation inutile de la bande passante. Cela dit, essayez toujours de réduire au minimum le nombre de tailles de recadrage, d'autres plugins, voire des thèmes, peuvent enregistrer des tailles de recadrage supplémentaires sur votre WordPress, heureusement vous pouvez les désactiver, alors soyez prudent.

Le recadrage vous permet de supprimer toute partie indésirable d'une image qui n'est pas essentielle au contenu. WordPress dispose de 3 tailles de recadrage intégrées : vignette, moyenne et grande. Seule la taille de la vignette possède une case à cocher qui permet de recadrer aux dimensions exactes, les autres tailles étant en fait redimensionnées proportionnellement. Il est possible de modifier les dimensions à partir de l'écran d'administration. Rendez-vous dans Paramètres > Médias pour les modifier.

Conseil de pro : vous devrez régénérer vos vignettes (c'est-à-dire toutes les tailles inférieures à l'original) pour que les images existantes soient recadrées en fonction des tailles définies pour les médias. Voir plus d'informations sur le contrôle de la taille des images dans WordPress.

Remarque : si vous souhaitez réellement avoir des images à haute résolution sur votre site, pour quelque raison que ce soit, essayez de maintenir les dimensions à la largeur ou à la hauteur maximale de votre plus grande taille de rognage.

Le choix du bon format de fichier pour les images peut avoir un impact significatif sur la taille du fichier et la vitesse de chargement. Le format JPEG convient généralement aux photographies et aux images complexes, tandis que le format PNG est préférable pour les images à fond transparent ou les graphiques simples. Avec WebP, vous pouvez obtenir le meilleur des deux mondes : des fichiers de petite taille et une très faible perte de qualité visuelle.

Avec le chargement paresseux, les images ne sont chargées que lorsqu'elles deviennent visibles du point de vue du visiteur, et non pas toutes en même temps. Cette technique permet de réduire le temps de chargement initial de la page, en particulier pour les pages contenant beaucoup d'images. Depuis WordPress 5.5, le chargement paresseux est une fonctionnalité par défaut.

La mise en cache consiste à stocker des images dans le navigateur du visiteur, ce qui permet aux pages suivantes de récupérer les images localement plutôt que de les télécharger à nouveau. Cela réduit la charge du serveur et accélère le chargement des pages. Utilisez des plugins tels que WP Super Cache (c'est ce que nous utilisons sur wplake.org), W3 Total Cache ou LiteSpeed Cache pour activer la mise en cache de votre site web.

Ces techniques ne sont pas vraiment complexes, elles nécessitent simplement quelques étapes supplémentaires. Mais si vous les utilisez, vous obtiendrez probablement d'autres avantages. Voyons cela de plus près.

L'utilisation d'un réseau de diffusion de contenu permet de fournir des images plus efficacement. Bien entendu, un CDN est bien plus qu'un simple service de diffusion d'images. En bref, il accélère votre site en stockant des copies sur des serveurs répartis sur différents sites géographiques. Cela réduit la distance et la latence entre le navigateur de l'utilisateur et le serveur d'images.

Il existe plusieurs plugins WordPress, tels que Smush, Imagify, et EWWW Image Optimizer, qui automatisent les processus d'optimisation des images. Je recommande toujours de les essayer d'abord sur un environnement de scène jusqu'à ce que vous sachiez ce qu'ils font. Car si vous n'êtes pas sûr de ce qu'il fait, il pourrait, par exemple, supprimer vos images originales (cela signifie que lorsque vous essayez quelque chose d'autre, les nouvelles images ne sont pas recadrées à partir des originales, mais plutôt à partir d'une version plus petite de l'image). En outre, ces plugins peuvent prendre en charge des tâches telles que la compression, le redimensionnement, le chargement paresseux et la mise en cache, ce qui simplifie le processus d'optimisation.

Conseil de pro : N'oubliez pas de ne pas remplacer ou dupliquer les étapes. Par exemple, si vous avez le plugin Image Optimizing et qu'il propose également la mise en cache, ne l'activez pas si vous avez déjà un plugin Cache.

Il s'agit souvent d'un scénario d'essai et d'erreur lors de l'optimisation de la vitesse des pages et de l'optimisation des images, mais sachez que si votre site ne contient pas beaucoup d'images, l'impact ne sera pas aussi important que si c'était le contraire.

En mettant en œuvre ces techniques, vous pouvez améliorer de manière significative la vitesse de chargement et les performances des images sur votre site web WordPress, ce qui se traduira par une meilleure expérience utilisateur et potentiellement un meilleur classement dans les moteurs de recherche. Il existe de nombreuses autres techniques que vous pouvez utiliser pour optimiser votre site web WordPress parce qu'en fin de compte, un site web rapide améliore l'expérience utilisateur et, comme vous devriez le savoir maintenant, les moteurs de recherche l'adorent.

J'espère que cet article vous a été utile.

Bonne optimisation !