Depuis la version 5.4, WordPress intègre le lazy loading sur les images en natif.
C’est une grosse évolution pour la plateforme et de plus, une majorité de navigateur, supporte cette fonctionnalité.
Le problème avec le lazy loading
Le souci, c’est que WordPress ne fait pas dans la demi-mesure et il ajoute donc l’attribut « loading=’lazy’ » sur toutes les images.
Ce qui peut poser un problème pour les images en haut des pages que l’on retrouve souvent sur l’élément « Hero ».
En effet, cette image devient l’élément « Largest Contentful Paint » pour les Core Web Vitals. Autrement dit, il mesure un des indicateurs du chargement de la page sur cet élément.
Et comme, l’image est réglée « non-prioritaire », cela donne un score médiocre sur le « LCP ».
LCP (Largest Contentful Paint) : temps nécessaire au navigateur pour afficher le plus grand élément visible dans la fenêtre d’affichage à partir du moment où l’internaute essaie d’accéder à l’URL. Le plus grand élément visible est généralement une image ou une vidéo, mais il peut également s’agir d’un élément de texte volumineux de niveau bloc. Cette valeur est cruciale, car elle vous indique si la page se charge correctement.
Seulement, pour le moment, il n’existe pas de possibilité de désactiver l’attribut sur certaines images. Ça viendra peut-être un jour.
La solution
J’ai donc cherché une solution pour tout simplement parser le code final de la page avant qu’il soit affiché pour tout simplement remplacer l’attribut de certaines images.
Dans mon code, je cherche les figures avec la classe « nolazy » et les classes « wp-block-cover__image-background » pour les heros.
Le code
J’ai donc créé un plugin qui effectue le filtre du code HTML avant l’affichage.
Il est disponible ici : WP-Performance/wp-performance-remove-lazy
Attention cependant, il est encore en version beta et je ne garantie pas son fonctionnement avec tous les sites WordPress.
La vidéo
J’ai aussi fait une vidéo pour tout vous expliquer.
