Le chargement différé d’images est l’un des moyens les plus facile pour accélérer votre site WordPress et ainsi d’optimiser ses performances.
Suite à l’ajout dans le code HTML d’un nouvel attribut de chargement loading= »lazy », WordPress 5.5 l’a intégré à son Core pour permettre le chargement différé natif des images.
Avant, les développeurs Web devaient utiliser du JavaScript pour activer un chargement différé des images ou utiliser une extension d’optimisation comme WP Rocket.
Dans cet article, Je vais vous expliquer en quoi consiste le chargement différé de WordPress 5.5 et sur la façon dont elle est entièrement compatible avec la fonctionnalité LazyLoad de WP Rocket.
Je vous expliquerais également les avantages supplémentaires liés à l’utilisation de la fonctionnalité de WP Rocket pour le «LazyLoad ».
C’EST QUOI LE CHARGEMENT DIFFÉRÉ DES IMAGES NATIVES ?
Les images sont l’une des ressources médias les plus lourdes chargées par la plupart des sites Web et celles-ci utilisent beaucoup de bande passante.
Par conséquent, l’optimisation des images est importante voir indispensable pour tous sites web haut de gamme. Mais il y a une limite à ce que vous pouvez optimiser.
Si vous avez trop d’images sur votre page Web, il y a de fortes chances que vos visiteurs quittent avant même la fin de chargement d’une page. Le chargement différé force les images à se charger uniquement lorsque l’utilisateur pendant sa visite sur votre site web, fait défiler vers le bas. C’est une solution simple et pratique pour réduire le chargement sans nuire à l’expérience utilisateur.
Avantages du chargement différé d’images natives
- La prise en charge native des images à chargement différé vous permet d’améliorer très facilement les performances de votre site. En effet vous n’avez pas besoin d’installer des bibliothèques JS externes comme jQuery pour activer la fonctionnalité de chargement différé sur votre site.
- Faire de la fonctionnalité de chargement différé en utilisant la norme HTML garantira qu’elle fonctionne parfaitement sur tous les principaux navigateurs.
- Amélioration grâce à la réduction des données et des coûts de bande passante pour les utilisateurs et propriétaires de sites Web.
CHARGEMENT DIFFÉRÉ DE L’IMAGE NATIVE DANS WORDPRESS 5.5
L’introduction de l’ API native de chargement différé dans le Core de WordPress était un débat parmi les contributeurs WordPress depuis de nombreuses années. Cependant, ce n’était pas un processus simple par rapport aux normes appliquées auparavant.
L’introduction de l’attribut de chargement HTML natif et son éventuelle prise en charge par les principaux navigateurs ont changé la donne. Quelques mois plus tard, l’équipe de développement principale de WordPress a annoncé l’ajout d’ images natives à chargement différé dans WordPress 5.5 .
COMPATIBILITÉ AVEC WP ROCKET LAZYLOAD
WP Rocket est fourni avec le chargement différé d’image, la fonctionnalité est appelée « LazyLoad » . Pour éviter tout conflit potentiel, WP Rocket désactive automatiquement le chargement différé des images prévu nativement dans WordPress 5,5 lorsque « LazyLoad » de WP Rocket est activé.
Une grosse différence à l’avantage de WP Rocket.
Contrairement à l’implémentation native de WordPress 5.5, « LazyLoad » permet le chargement différé pour d’autres éléments HTML comme les iframes et les vidéos. Les images d’arrière-plan seront également chargées en différé si elles sont appliquées en ligne pour certains éléments HTML ce qui n’est pas le cas pour WordPress 5.5.
CONCLUSION
Les images à chargement différé sont un excellent moyen d’accélérer votre site WordPress avec un minimum d’effort. Il vous aide à économiser les coûts de bande passante tout en garantissant une meilleure expérience utilisateur pour les visiteurs de votre site.
Comme WordPress 5.5 permet le chargement différé d’images natives par défaut, il donnera une amélioration significative des performances à de nombreux sites Web qui ne l’utilisent pas encore. Mais WordPress 5.5 manque encore de mordant, en particulier pour les sites Web qui utilisent des ressources médiatiques en dehors des images (iframes, vidéos et autres éléments HTML).
A+
Thierry Maesen
