Lazy loading native WordPress problème de performance avéré

Oh là là, je crois que je vais m’attirer les foudres de certains. Mais sincèrement, je trouve qu’il y a un problème de performance avec le lazy loading inclus dans WordPress depuis la version 5.5.

Je vais donc vous expliquer pourquoi je pense cela en passant par :

• Ce que signifie le concept de lazy loading en général,
• Comment WordPress le gère dans son core (noyau),
• Pourquoi il n’est pas performant en l’état,
• Et enfin, comment instaurer un lazy loading performant.

Qu’est ce que le lazy loading ?

Tout d’abord, il faut savoir que sans optimisation tout le contenu de la page d’un site web (CSS, scripts, images, vidéos et autres) se chargera dès que le visiteur arrivera.

Par conséquent, cela peut prendre un certain temps, qui plus est, si la page comporte beaucoup de médias.

Alors, la seule solution pour charger les médias plus rapidement est de les optimiser avant et après leur importation.

Le lazy loading est un des moyens parmi d’autres qui permet d’optimiser le temps de chargement des images.

En effet, avec cette technique, le chargement des images situées en dessous de la ligne de flottaison sera différé.

En bref, les médias qui doivent être immédiatement visibles pour le visiteur seront chargés immédiatement. Par contre, ceux qui sont différés ne seront chargés qu’au fur et à mesure que l’utilisateur fera défiler la page.

L’équipe de WordPress a implémenté le lazy loading à partir de la version 5.5.

Cool, me direz-vous. Bof, je ne dirai pas ça.

Alors, voyons tout de suite de quelle manière WordPress le gère.

Comment WordPress gère le lazy loading depuis sa version 5.5 ?

Depuis sa version 5.5, WordPress a intégré le lazy loading “automatique” des images.

Mais attention, il y a une subtilité. WordPress n’ajoute loading=”lazy” qu’à des balises d’images dont les dimensions sont indiquées.

Alors, en premier lieu, il recherchera les images sans attribut de taille. Puis, il renseignera leur largeur (width) et hauteur (height), et enfin, il leur ajoutera l’attribut loading=”lazy”.

OK, c’est pas mal, j’en conviens.

Toutefois, le hic est qu’il n’ajoutera cet attribut qu’aux images se situant dans les fonctions suivantes :

• Le contenu des articles ( the_content)
• Les extraits d’articles ( the_excerpt)
• Les avatars (get_avatar)
• Celles dans les templates utilisant wp_get_attachment_image()( wp_get_attachment_image)

Donc, si vous incorporez des images via d’autres fonctions, elles ne seront pas prises en compte. 🤨

Autre innovation, depuis la version 5.7 de WordPress, les iframes sont également chargés en différé.

Par défaut, WordPress ajoutera donc un attribut loading=”lazy” aux iframes se situant dans les fonctions suivantes :

• Le contenu de la publication ( the_content)
• Les extraits de messages ( the_excerpt)
• Les widgets de texte ( widget_text_content)

Là, vous vous dites que, puisque WordPress gère automatiquement le lazy loading, il n’y a plus rien à faire. Et vous pensez évidemment que, dorénavant, vous n’avez plus besoin de vous embêter avec des plugins qui le font. Mais, force est de constater qu’en termes de performance et de convivialité le lazy loading de WordPress est loin d’être la panacée.

Pourquoi je pense cela ?

Je vais vous l’expliquer tout de suite.

Pourquoi celui de WordPress est contre-performant ?

👉 Tout d’abord, il faut se rendre à l’évidence qu’à ce jour, certains navigateurs ne prennent pas encore en charge la méthode par attribut HTML qu’emploie WordPress pour intégrer son lazy loading.

Par exemple, pour Safari, il faut l’activer dans les paramètres > Avancé > Fonctionnalités expérimentales sinon ça ne fonctionne pas.

Et en ce qui concerne Firefox, le chargement paresseux est effectif que pour les images, mais pas pour les iframes.

(Source : caniuse 28/10/2021)

👉 Ensuite, cette méthode ne prend pas en compte les images d’arrière-plan.

👉 Et puis, il n’y aucun moyen de modifier ou désactiver le lazy loading directement dans WordPress.

Bon, on peut le faire, mais uniquement en passant par le code.

Alors, ne pensez-vous pas que c’est contradictoire avec la finalité d’un CMS qui se veut utilisable par les non-développeurs ?

Par exemple, pour désactiver complètement l’option Lazy Loading, il vous faudra indiquer ce code dans le functions.php du thème enfant :

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Et si vous souhaitez désactiver le chargement différé par défaut pour certaines images, là encore, il faudra jouer avec le code qui variera en fonctions des sortes d’images.

Ce n’est vraiment pas cool !

👉 Enfin, et c’est le point le plus important, le lazy loading embarqué dans le core de WordPress fait chuter le score de performance dans les Core Web Vitals de Google.

En effet, il influe sur la métrique Largest Contentfull Paint (LCP).

Pour rappel, le LCP mesure le temps de rendu de la plus grande image ou du plus grand bloc de texte visible dans la fenêtre, par rapport au moment où la page a commencé à se charger. Et… il doit être inférieur à 2,5 secondes.

Or, comme le remarque très justement Félix Arntz, contributeur régulier de Make WordPress Core :

“Le core de WordPress n’est pas en mesure d’évaluer de manière fiable si une image va apparaître au-dessus ou en dessous du pli, car cela dépend du thème actuellement” actif.”

Et ça, c’est un gros problème.

En effet, au-dessus de la ligne de flottaison se trouve forcément des images comme le logo ou l’image du hero header. Par conséquent, celles-ci voient leur chargement différé et leur apparition retardée alors qu’elles devraient être visibles de suite.

Voici un test de performance avec une image dans le hero header :

👉 On peut constater que, bien qu’elle soit au-dessus de la ligne de flottaison, WordPress lui applique le lazy loading. Lighthouse génère alors un message de mise en garde pour le LCP.

Comment intégrer un lazy loading performant ?

Vous avez vu en image que le lazy loading de WordPress est contre performant.

Alors, pour avoir un bon LCP, vous avez deux solutions :

👉 Soit, vous mettez les mains dans le code et vous excluez les images se situant au-dessus de la ligne de flottaison du lazy loading.

👉 Soit, vous installez un plugin qui gère le lazy loading et vous le paramétrez comme vous le souhaitez.

Pour ma part, j’utilise Optimole, LA solution tout-en-un pour l’optimisation des images pour WordPress qui :

• Permet le chargement en différé des images d’arrière-plan, des vidéos et des iframes
• Autorise l’exclusion de certaines images
• Sert les images via un CDN gratuit
• Que l’on peut activer ou désactiver facilement

Réalisons maintenant le test de performance avec Optimole d’activé et paramétré pour exclure l’image du hero header.

Il n’y a pas photo. Rien qu’en excluant l’image, on passe de 97 à 100 en performance. 😉

Le lazy loading natif de WordPress, qu’en penser ?

Pour conclure, l’équipe de WordPress a voulu améliorer ses performances, mais pour l’instant, ce n’est pas encore au point.

Dans la version 5.9 de WordPress qui doit sortir le 14/12/2021, rien n’a été modifié concernant le lazy loading. Et malheureusement, ce n’est pas apparemment pas encore prévu à court terme. Selon Andrew Ozz, il serait bon de revenir là-dessus dans 6 mois à un an et de l’évaluer à nouveau. ☹️

Alors, nous n’avons plus qu’à espérer qu’une prochaine version comportera enfin un moyen direct de gérer le lazy loading. (Par exemple, sous Paramètres > Média)

En effet, il est contreproductif que WordPress impose son lazy loading sans possibilité de modification autre que par le code.

L’avenir nous le dira.

Quoi qu’il en soit, en attendant, je continuerai de le désactiver et d’utiliser Optimole afin d’obtenir de bons scores de performance.

Et vous, utilisez-vous le lazy loading de WordPress ou un plugin dédié ?