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

Lazy loading native WordPress problÚme de performance avéré
9 mn de lecture

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)

lazy loading support navigateurs en date du 27/09/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.

LCP-Google vitesse optimale de chargement du site

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.

image avec lazy loading natif de WordPress

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. 😉

image exclue du lazy loading avec Optimole

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é ?

Soumettre un commentaire 💬

guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires