Lazy loading dans WordPress

Le lazy loading, à quoi ça sert ?

Le lazy Load ou chargement différé est un moyen d’accélérer le chargement HTML et ainsi d’améliorer à la fois l’expérience utilisateur et le référencement des sites.
Le principe est simple : il consiste à différer le chargement de ce qui n’est pas tout de suite utile à la lecture d’une page par le navigateur : à savoir, la plupart des fichiers js et les images qui ne sont pas sensées apparaître immédiatement dans la fenêtre du navigateur car se trouvant dans la partie hors champ de la page (en général le bas de la page). La ligne de démarcation entre partie visible sans scroll et le reste de la page est nommée la ligne de flottaison.

Mise en oeuvre

Dans le cas de pages statiques, l’affichage prioritaire de la partie supérieure à la ligne de flottaison peut se faire de façon légère à travers des attributs dans les balises HTML.
Pour le téléchargement différé des images (absentes de la zone immédiatement visible de la page), l’utilisation d’une bibliothèque js comme LazyLoad (https://github.com/verlok/lazyload) s’avère pratique : au niveau de la balise img , on place alors la source dans un attribut data-src et le tour est joué.

<img alt="..." 
 data-src="../img/44721746JJ_15_a.jpg"
 width="220" height="280">

Pour le chargement des fichiers js, l’utilisation des attributs ‘defer’ est théoriquement reconnue pas les navigateurs et permet de charger les scripts dans l’ordre d’appel :

<script defer src="application.js"></script>

A l’inverse, ‘async’ spécifie que l’ordre de chargement n’a pas d’importance.

<script async src="application.js"></script>

Les outils de WordPress

Dans le cas des CMS, on recherchera des solutions plus systématiques.
Pour WordPress, le dans le template, au niveau du fichier functions.php :

 function defer_parsing_of_js ( $url ) {
 if ( FALSE === strpos( $url, '.js' ) ) return $url;
 if ( strpos( $url, 'jquery.js' ) ) return $url;
 return "$url' defer ";
 }
 add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

 

Cependant, des plugins produisent le même résultat dans le frontend et permettent un paramétrage aux petits oignons.

Les plugins simples

  • Lazy Load
    Facile à activer. Repose sur jQuery.sonar.
  • Bj Lazy Load
    Permet d’appliquer le chargement différé au contenu des articles ou pas, aux miniatures, aux gravatars, aux iframes. Le paramétrage précis donne aussi la possibilité de choisir à quel endroit appeler le script, de retirer les images possédant une classe CSS particulière et d’adapter le script aux thèmes qui affichent le site avec un déroulement infini (infinite scroll)…
  • Wp Deferred Javascript
    Cette extension diffère le chargement de tous les fichiers JavaScripts déclarés par le biais de wp_enqueue_script(). Elle permet notamment d’exclure certains fichiers et de modifier leur source et de n’autoriser l’exécution d’une fonction que lorsque tous les js sont chargés.

Plugins d’optimisation globale comportant des fonctionnalités lazy loading
Le différé des chargements relève des bonnes pratiques du SEO. C’est pourquoi on retrouve cette fonctionnalité dans des plugins plus généraux et entre autres les plugins de cache.

  • Wp-Rocket
  • W3 Total Cache

Dans ces plugins, la palette des options d'amélioration de performance est large :
- La minification des sources js, css, et html
- La gestion du cache navigateur
- Serveurs CDN (type cloudflare)

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.