Utiliser le LazyLoad pour les images dans WP Rocket

Dans cet article

NOTE: WordPress a introduit LazyLoad dans le cœur WP à partir de la version 5.5. Cette fonctionnalité sera automatiquement désactivée lorsque LazyLoad de WP Rocket est actif.

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 en ligne dans le HTML de votre page en utilisant les balisages suivants : 

  • div
  • span
  • section
  • li
  • figure
  • a

Par exemple :

<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 utilisez Elementor, nous ne sommes pas en mesure de charger certaines de leurs images de fond pour le moment. Vous pouvez essayer ce plugin (pas d'affiliation avec WP Rocket) : https://fr.wordpress.org/plugins/lazy-load-background-images-for-elementor/

Le LazyLoad pour les images de background est automatiquement désactivé lorsque le thème Bridge est utilisé.

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 

Il y a 2 endroits où vous verrez des changements:

  1. Dans le HTML de la page lors de la consultation de la page source
  2. Lorsque vous utilisez les outils de développement de votre navigateur, le panneau Elements/Inspector affichera le HTML après l'application du script JavaScript du LazyLoad

Images standards

Dans la balise <img> de la page source vous verrez : 

  • L'URL de l’image, dans src, sera remplacé par un ceci: 
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
  • l’attribut data-lazy-src est ajouté
  • Si les images utilisent srcset, vous verrez data-lazy-srcset et data-lazy-sizes
  • La balise <noscript> est ajoutée après l'image 

Dans les outils de développement du navigateur, vous verrez que :

  • la classlazyloaded est ajoutée
  • data-was-processed="loaded" est ajouté
  • La balise <noscript> est ajoutée après l'image 

Images d’arrière-plan (background)

À l'intérieur de la balise <div> ou autre, dans la page source, vous verrez: 

  • la class rocket-lazyload est ajoutée
  • l’attribut data-bg est ajouté
  • <noscript> n'est pas ajouté

Dans les outils de développement du navigateur, vous verrez que :

  • la class rocket-lazyload est ajoutée
  • la class lazyloaded est ajoutée
  • data-ll-status="loaded" est ajouté

Élement Picture

Dans la page du code source, vous verrez :

  • L'URL de l'image dans src sera remplacée par ceci:
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
  • data-lazy-srcset et data-lazy-sizesest ajoutée sur chaque <source>
  • La balise <noscript> est ajouté après l’image

Dans les outils de développement du navigateur, vous verrez que :

  • la class lazyloaded est ajoutée dans <img>
  • data-ll-status="loaded" est ajouté
  • La balise <noscript> est ajouté après l’image

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 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>.
Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.