Lazy Loading dans WordPress : la marche à suivre

Pour améliorer les per­for­mances de votre site WordPress, le Lazy Loading est une bonne option. Si cette fonction est désormais intégrée par défaut à WordPress, elle peut encore être étendue grâce à des plugins.

Le Lazy Loading est une technique qui permet d’améliorer les per­for­mances d’un site Web lors de sa con­sul­ta­tion. En effet, au lieu de charger tous les contenus en même temps, seules les images et les vidéos im­mé­dia­te­ment visibles par les in­ter­nautes sont chargées. Tout ce qui se trouve en dehors de la zone visible est chargé plus tard, lors du scrolling.

Le Lazy Loading permet aux in­ter­nautes d’interagir beaucoup plus ra­pi­de­ment avec un site Internet. Une fois qu’ils ont fini de lire (ou de regarder) la partie visible, le na­vi­ga­teur charge la partie below the fold (traduit par « en dehors du champ de vision » en français) à son tour, pour n’ap­pa­raître qu’après le dé­fi­le­ment vers le bas (ou scrolling).

Le Lazy Loading aide à rendre WordPress plus rapide. Certes, le char­ge­ment en lui-même n’est pas accéléré, mais l’ex­pé­rience uti­li­sa­teur est bien meilleure. Les in­ter­nautes voient les contenus les plus im­por­tants s’afficher en premier sur l’écran pendant que le reste des contenus est chargé en arrière-plan sans que l’in­ter­naute ne le remarque.

C’est aussi un bon point pour Google : les Core Web Vitals sont des facteurs de clas­se­ment pour l’affichage rapide d’éléments Web. Plus l’in­te­rac­tion avec un site Internet est rapide, meilleur est le clas­se­ment dans les résultats de recherche. À ce titre, le Lazy Loading fait aussi partie des outils SEO. En com­bi­nai­son avec d’autres astuces SEO WordPress, cette technique met votre site en avant.

Vous pouvez aussi améliorer les per­for­mances de votre site en utilisant la com­pres­sion d’images. La vitesse de char­ge­ment des contenus gra­phiques sera alors vraiment plus élevée. En outre, il est utile de connaître les formats d’image WordPress pour choisir les meilleurs cadrages.

Depuis sa version 5.5 de Wordpress, le Lazy Loading est activé par défaut pour les gra­phiques. Chaque fois que vous placez une image dans vos pages et vos articles, WordPress ajoute au­to­ma­ti­que­ment un attribut aux fichiers. On le retrouve dans le code source de la manière suivante :

Cet attribut est désormais pris en charge par Chrome, Firefox et Safari notamment. Ce qui signifie aussi que ce n’est pas le cas pour tous les na­vi­ga­teurs. Si d’autres contenus, comme les vidéos, peuvent aussi bé­né­fi­cier du Lazy Loading, l’attribut n’est toutefois ajouté qu’aux images. Il faut donc passer par d’autres options pour élargir cette technique à l’in­té­gra­lité de son site Internet. À ce titre, des plugins per­met­tent d’étendre le Lazy Loading dans le cas où vous sou­hai­te­riez intégrer des vidéos dans WordPress.

Pour bien gérer le Lazy Loading dans WordPress, il est re­com­mandé d’utiliser des plugins. Voici une liste des meil­leures ex­ten­sions :

Le plugin LazyLoad de WP Rocket facilite le Lazy Loading dans Wordpress pour les images, les vidéos et les iFrames. Il va donc au-delà des pos­si­bi­li­tés par défaut et reste très léger (10 Ko). Le plugin prend aussi en compte avatars et smileys. Il est aussi in­té­res­sant de pouvoir remplacer les vidéos YouTube intégrées par des images d’aperçus avant qu’elles ne soient chargées en­tiè­re­ment. Cette manœuvre permet de réduire le temps de char­ge­ment à l’ouverture de la page.

Prêt à l’emploi, le plugin n’a pas besoin d’être configuré. Mais c’est aussi l’un de ses in­con­vé­nients : LazyLoad ne propose pra­ti­que­ment aucun réglage. Il permet seulement d’activer ou de dé­sac­ti­ver le Lazy Loading pour dif­fé­rents types de médias in­dé­pen­dam­ment les uns des autres.

Pour davantage de fonc­tion­na­li­tés, il faut opter pour le plugin de cache WordPress WP Rocket payant. Celui-ci inclut Lazy Loading et d’autres fonctions d’op­ti­mi­sa­tion.

Vous disposez de beaucoup plus d’options avec a3 Lazy Load. Le plugin WordPress offre par exemple la pos­si­bi­lité d’activer le Lazy Loading in­dé­pen­dam­ment pour les images, vidéos ou iFrames. Mais le choix ne s’arrête pas là : il est aussi possible de choisir le Lazy Loading pour un type d’image précis. Par exemple, il est possible d’exclure les gravatars ou les vignettes. La fonction peut aussi être dé­sac­ti­vée sur certains types de pages (par exemple la page d’accueil). Il est possible d’aller encore plus loin en excluant certains objets du Lazy Loading à l’aide de leur URI.

De plus, a3 Lazy Load offre la pos­si­bi­lité de dé­ter­mi­ner l’apparence du char­ge­ment : les images doivent-elles ap­pa­raître lentement ou le plugin doit-il afficher une icône de char­ge­ment ? Mais ce qui est plus important au niveau technique, c’est que vous pouvez étendre le Viewport et ainsi con­fi­gu­rer le char­ge­ment direct de certaines parties de la zone non visible.

Autre par­ti­cu­la­rité du plugin : la pos­si­bi­lité de dé­sac­ti­ver le Lazy Loading standard, déjà inclus dans WordPress, via a3 Lazy Load. C’est un moyen de s’assurer que les fonctions du plugin et du CMS ne rentrent pas en conflit.

Le plugin Optimole va au-delà du Lazy Loading : il cherche de manière générale à améliorer la mise à dis­po­si­tion des images pour votre site WordPress. En plus du char­ge­ment in­tel­li­gent, les images sont com­pri­mées à l’aide du plugin. De plus, la taille de l’image est adaptée au terminal de l’in­ter­naute. À cela s’ajoute un propre Content Delivery Network (CDN) pour la diffusion des images, ce qui réduit encore le temps de char­ge­ment.

Le Lazy Loading ne dispose en revanche pas de nom­breuses options. Vous pouvez choisir de l’utiliser ou non, et il est seulement possible d’exclure les images d’arrière-plan du Lazy Loading. Enfin, il faut s’inscrire sur Optimole pour utiliser ses fonctions.

Smush est une suite complète pour augmenter la vitesse de votre site WordPress. Ce plugin comprime au­to­ma­ti­que­ment les images et supprime aussi les données EXIF pour réduire encore la taille des fichiers. Comme Optimole, Smush propose aussi un CDN pour accélérer la mise à dis­po­si­tion des images.

Con­trai­re­ment à Optimole, Smush inclut des options sup­plé­men­taires pour le Lazy Loading : la pos­si­bi­lité de définir l’ac­ti­va­tion en fonction du format graphique, ou d’inclure/exclure les iFrames. En outre, il est possible de pa­ra­mé­trer plus finement son uti­li­sa­tion : Lazy Loading aussi pour les vignettes ou les images des widgets ? Enfin, il est aussi possible d’exclure certains types de pages – voire exclure des URL ou des URI spé­ci­fiques.

Comme pour a3 Lazy Load, Smush permet de per­son­na­li­ser le design de char­ge­ment : fondu, roue de char­ge­ment ou un graphique d’espace réservé.

Lazy Loader de Florian Brinkmann utilise un script et non l’attribut loading. Ce script permet de régler le char­ge­ment des images, des iFrames, des vidéos et des fichiers audios. Il est même possible d’affiner la sélection en excluant certaines classes CSS du Lazy Loading. Une des options permet même d’activer ou non le Lazy Loading pour chaque page et chaque com­men­taire.

Pour rendre le char­ge­ment plus agréable, il est aussi possible de pa­ra­mé­trer la couleur de la roue animée.

Si vous souhaitez con­tour­ner le Lazy Loading par défaut de WordPress, choi­sis­sez un plugin. Nous avons décidé de choisir le plugin a3 Lazy Load pour ce guide car il inclut de nom­breuses fonctions.

Avant d’apporter des mo­di­fi­ca­tions im­por­tantes à votre site, faites un backup ou une sau­ve­garde de WordPress. C’est un moyen sûr de revenir ra­pi­de­ment à une version qui fonc­tionne en cas de problème. Vous devriez également envisager de créer un thème enfant WordPress. Ce double du thème en ligne vous garantira que tous vos pa­ra­mètres per­son­na­li­sés fonc­tion­ne­ront encore après une mise à jour du thème par le dé­ve­lop­peur.

Allez dans partie Ex­ten­sions dans le tableau de bord WordPress et allez au point « Ajouter ». Saisissez « a3 Lazy Load » dans la barre de recherche en haut à droite et le plugin cor­res­pon­dant s’affiche. Installez-le en cliquant dessus puis activez-le avec un autre clic.

Les options du plugin se trouvent dans le menu Réglages du tableau de bord WordPress, dans lequel a3 Lazy Load a désormais sa propre entrée. Vous accédez aussi aux pa­ra­mètres de l’extension via « Ex­ten­sions ins­tal­lées ». Dans le deuxième point du menu (« Lazy Load Ac­ti­va­tion »), il est aussi possible de dé­sac­ti­ver la fonction sans dé­sac­ti­ver le plugin. De plus, vous y dé­fi­nis­sez si vous souhaitez dé­sac­ti­ver la fonction standard Lazy Loading de WordPress, conseillé de manière à éviter les éventuels conflits.

Choi­sis­sez à présent les objets pour lesquels le Lazy Load doit s’appliquer, vous avez dif­fé­rentes options :

• Lazy Load Images : définit là où les images doivent bé­né­fi­cier du Lazy Loading. Vous pouvez définir par exemple que cela ne concerne que les images de la zone de contenu, pas les widgets ;
   
• Lazy Load Videos and iFrames : détermine si les vidéos et iFrames du contenu et/ou des widgets doivent bé­né­fi­cier du Lazy Loading ;
   
• Exclude by URI’s and Page Type : dé­fi­nis­sez à l’aide d’un curseur les types de pages à inclure du Lazy Loading. Vous pouvez par exemple exclure la page d’accueil ou une page de catégorie, ou encore exclure certains objets par URI.

Le plugin vous donne aussi la pos­si­bi­lité de per­son­na­li­ser l’affichage lors du char­ge­ment des images et des vidéos. Le pa­ra­mé­trage se fait sous le point « Effect & Style ». Vous pouvez choisir entre un fondu ou une roue tournante. Vous dé­fi­nis­sez également la couleur de l’arrière-plan, que vous pouvez par exemple accorder avec l’arrière-plan de votre site.

La fonction Lazy Loading fait partie in­té­grante de WordPress, et il n’est pas possible de la dé­sac­ti­ver de manière intuitive. Voilà pourquoi WordPress ne dispose pas non plus d’une fonction analogue dans ses propres pa­ra­mètres. Néanmoins, vous re­mar­que­rez qu’il peut être utile de dé­sac­ti­ver cette fonction, notamment si vous utilisez un plugin avec une option de Lazy Loading. Cela permet d’éviter les conflits entre les deux fonctions.

Il est possible de la dé­sac­ti­ver en passant par exemple par le plugin a3 Lazy Load présenté plus haut. Le plugin Disable Lazy Load est même spé­cia­le­ment programmé à cet effet. Il vous suffit de l’activer pour que la fonction que le Lazy Loading par défaut dans WordPress ne fonc­tionne plus.

Cependant, un plugin n’est pas in­dis­pen­sable pour cette opération. La fonction peut aussi être dé­sac­ti­vée avec une entrée dans le code source. Avant cela, créez un thème enfant pour vous assurer que vos mo­di­fi­ca­tions ne seront pas sim­ple­ment écrasées, même après la mise à jour du thème. Ensuite, allez dans le menu Apparence > Éditeur de thème dans le tableau de bord WordPress et affichez le fichier functions.php pour y ajoutez une nouvelle ligne :

Si vous cliquez main­te­nant sur « Mettre à jour le fichier », les mo­di­fi­ca­tions seront prises en compte et le Lazy Loading sera désactivé.