LazyLoad pour les images

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

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.

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 seule 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 chargées à partir d'un fichier JavaScript, ne seront pas LazyLoadées. Pour les images d'arrière-plan chargées à partir de fichiers CSS, veuillez vous référer à cette section.

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

Images background CSS

Si l'image de fond est ajoutée au moyen d'un fichier CSS ou d'une balise de style CSS interne, vous pouvez utiliser l'option LazyLoad pour les images background CSS.

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:

Dans le HTML de la page lors de la consultation de la page source
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é.
Si nécessaire, l'élément <noscript> peut être supprimé avec ce filtre : add_filter( 'rocket_lazyload_noscript', function (){return false;});.

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