Utiliser le LazyLoad pour les images dans WP Rocket

Dans cet article

Que fait le Lazyload ?

Le LazyLoad - ou Chargement différé - retarde le chargement des images sur votre site Web jusqu'à ce que l'utilisateur fasse défiler la page vers le bas et ait réellement besoin de les voir. Nous le faisons de manière à ce que Google puisse explorer et indexer ce contenu, comme ce qui est recommandé.

Le LazyLoad répond à la recommandation de Google PageSpeed de "Différez le chargement des images hors écran".

En quoi cela accélère-t-il votre site ?

" Lorsqu’on Lazyload des images et des vidéos, nous réduisons le temps de chargement initial des pages, le poids initial des pages et l'utilisation des ressources système, ce qui a un impact positif sur les performances."

Ref: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Disons que vous avez 10 images sur votre page, avec un poids total de 2MB. Si le poids total de ces images de 2MB doit être téléchargées en une seul fois, cela aura un impact sur le temps de chargement global de la page et la performance perçue par l’utilisateur. Particulièrement sur les appareils mobiles qui ont une puissance de traitement plus limitée et qui sont souvent connectés à des connexions Internet plus lentes.

Pour les utilisateurs mobiles qui paient pour des données, cela signifie également qu'ils n'ont pas à payer pour télécharger des images qu'ils ne verront pas, s'ils ne font pas défiler la page entière.

Images standards

Toutes les images, y compris celles des domaines externes, trouvées dans les balises <img>, ajoutées à votre contenu dans les posts, widgets, etc... , devraient être LazyLoadées automatiquement. 

Les images trouvées dans les fichiers CSS, ou chargées à partir d'un fichier JavaScript, ne seront pas LazyLoadées. 

Images d’arrière-plan (background)

Les images d'arrière-plan sont un cas particulier et sont plus complexes pour le LazyLoad puisqu'il y a plusieurs façons de les ajouter à une page. Cependant WP Rocket va automatiquement Lazyloader celles qui se trouvent dans le HTML de votre page en utilisant le balisage suivant : 

<div style="background-image: url(image.jpg)">

L'élément <div> peut avoir d’autres attributs, classes, etc, ça fonctionnera. 

L'élément sera alors transformé en :

<div data-bg="url(image.jpg)" class="rocket-lazyload" style="">

Un exemple de balisage d'image d’arrière plan qui sera LazyLoadée :

Avec le LazyLoad appliqué, il est transformé en : 

Certains constructeurs de pages utilisent ce balisage et les images d'arrière-plan seront donc automatiquement LazyLoadées lors de leur utilisation : 

  • Divi - en utilisant une image de fond de parallaxe sur une section
  • Avada - en utilisant une image d'arrière-plan sur une section

Si l'image d'arrière-plan est ajoutée d'une autre manière, par exemple dans un fichier CSS, ou dans une balise CSS <style> en ligne, elle ne pourra pas être LazyLoadée en l'état.

Si vous rencontrez un problème, vous devrez peut être désactiver le LazyLoad sur les images d’arrière-plan avec ce plugin d’aide..

L'élément Picture et WebP

Les images ajoutées avec l'élément <picture> seront LazyLoadées, y compris les images WebP ajoutées de cette façon.

Chaque élément <source> de l'élément <picture> sera LazyLoadé. 

Comment vérifier que ça fonctionne ?

Utilisez l’onglet Réseau (Network) de votre navigateur

  • Ouvrez la console dans Chrome : Afficher > Options pour les développeurs > Outils de développement
  • Cliquez sur l’onglet Réseau ou Network
  • Cliquez sur le filtre Img
  • Rechargez la page
  • Lorsque vous faites défiler la page vers le bas, les images qui sont LazyLoadée apparaîtront dans l'onglet Réseau quand elles seront sur le point de franchir la ligne de flottaison :

Les changements de balisage 

Images standards

Dans la balise <img> vous verrez : 

  • La class lazyloaded est ajoutée
  • l’attribut data-lazy-src est ajouté
  • Si les images utilisent srcset, vous verrez data-lazy-srcset
  • data-was-processed="true"
  • La balise <noscript> est ajoutée après l'image 

Images d’arrière-plan (background)

Dans la balise <div> vous verrez : 

  • La class rocket-lazyload est ajoutée
  • L’attribut data-bg est ajouté
  • data-was-processed="true"
  • <noscript> n’est pas ajouté

Élément Picture

  • data-lazy-srcset est ajouté sur chaque <source>
  • Les class rocket-lazyload et lazyloaded sont ajoutées dans <img>
  • data-was-processed="true"  est ajouté dans <img>
  • WP Rocket n’ajoute pas de balise <noscript> ici, mais les plugins tiers que vous utilisez pour implémenter la balise <picture> peut l'ajouter

Résoudre les problèmes

Si le LazyLoad cause un problème, vous pouvez le désactiver de différentes manières :

Notes techniques

  • Nous utilisons ce script : https://github.com/verlok/lazyload
  • Le LazyLoad est appliqué sur le hook template_redirect
  • Le script du LazyLoad est minifié et chargé de manière asynchrone depuis le footer.
    wp-content/plugins/wp-rocket/assets/js/lazyload/11.0.3/lazyload.min.js
  • Srcset est supporté. 
  • Le LazyLoad peut être appliqué manuellement si besoin : Appliquer manuellement le LazyLoad à une image
Le processus :
  • Le LazyLoad se déroule en 2 étapes. 
  • Tout d'abord, nous traitons le HTML en PHP, en utilisant une RegEx pour détecter les images et réécrire le(s) src img avec les caractères de remplacement. 
  • Par conséquent, si vous avez des parties mal codées sur votre site, cela pourrait causer des problèmes là où les images pourraient échapper à cette détection.
  • Nous remplaçons la src de l’image avec ce code bouche-trou :
    data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E
  • Vous pouvez utiliser un bouche-trou personnalisé : https://docs.wp-rocket.me/article/771-rocketlazyloadplaceholder
  • La deuxième partie du processus est gérée par le script LazyLoad lorsque la page est chargée. 
  • Par défaut, le seuil est de 300, c'est-à-dire que les images situées à moins de 300 pixels de la fenêtre seront Lazyloadées. 
  • Ce seuil peut être ajusté en fonction de vos besoins : Ajuster le seuil du LazyLoad
  • Lorsque les images atteignent le seuil, le code de remplacement est remplacé par l'image réelle. Pour ce faire, la balise <img> est modifiée 
  • La src de l’image est remplacée par l’image originale stockée dans data-lazy-src ou data-bg 
  • Selon le type d'image (voir ci-dessus), une classe est ajoutée au tag <img> : lazyloaded et/ou rocket-lazyload
  • data-was-processed="true" est ajouté à la balise <img>.