LazyLoad pour les images background CSS

Depuis la version 3.15, WP Rocket inclut la fonctionnalité de LazyLoad pour les images background CSS, qui est chargée de différer les images d'arrière-plan insérées via les styles internes et les fichiers CSS. Cela permet à la page de se charger plus rapidement car les images d'arrière-plan ne seront chargées que lorsqu'elles doivent être affichées.

Vous pouvez activer cette fonctionnalité à partir de l'onglet Médias, dans la section LazyLoad, comme indiqué ci-dessous :

enabling lazyload for CSS background images

Aperçu de l'option

La fonctionnalité LazyLoad pour les images background CSS cible deux types d'images d'arrière-plan :

Images d'arrière-plan ajoutées par le biais de CSS interne.
Images d'arrière-plan ajoutées à partir d'un fichier CSS.

Cette option est entièrement automatisée, ce qui signifie que vous n'avez pas besoin de spécifier les images ou les sélecteurs CSS qui doivent être inclus. Les images d'arrière-plan de votre site seront LazyLoadées dès son activation.

L'utilisation de cette option vous aidera à résoudre le problème du report des images hors écran dans les tests basés sur Google Lighthouse, tels que PageSpeed et GTmetrix.

L'option LazyLoad pour les images background CSS est complémentaire au LazyLoad pour les images, qui cible également les images d'arrière-plan, mais pour celles appliquées à ces balises HTML spécifiques via des attributs de style inline.

Comment vérifier que l'option fonctionne

Comportement des images d'arrière-plan dans Outils pour les développeurs > ; Network

Vous pouvez voir le LazyLoad pour les images background CSS en action en utilisant l'onglet Network des Outils pour les développeurs, comme illustré ci-dessous :

Après avoir activé la fonctionnalité LazyLoad pour les images background CSS, ouvrez la page contenant l'image d'arrière-plan dans une fenêtre incognito.
Ouvrez les outils de développement dans votre navigateur.
Dans Chrome: Afficher > Options pour les développeurs > Outils pour les développeurs
Cliquez sur l'onglet Network ou Réseau.
Cliquez sur le filtre Img
Lorsque vous faites défiler la page, l'image d'arrière-plan est chargée.

Exemple

Dans le GIF suivant, vous pouvez voir comment l'image Stroke-Report-Brochure.webp est chargée seulement après avoir fait défiler la page :

lazyloaded image in the network

Changements dans le balisage

En outre, une page comportant une ou plusieurs images d'arrière-plan présentera les modifications suivantes dans son balisage.

Changements dans l'élément HTML

Une fois l'image chargée avec succès, l'élément HTML comprendra l'attribut data-rocket-lazy-bg-aa111bb22-cc-33-ee-44ffgg55="loaded".

Remarque : la chaîne aa111bb22-cc-33-ee-44ffgg55 est un hachage spécifique qui correspond au sélecteur CSS.
Par exemple, le balisage d'un élément p avec une image d'arrière-plan changera de :
```
<p class="some-class">
	
```
à :
```
<p class="some-class" data-rocket-lazy-bg-aa111bb22-cc-33-ee-44ffgg55="loaded">
	
```
Changements dans le CSS interne

Dans le bloc CSS interne, l'URL de l'image d'arrière-plan sera remplacée par une variable CSS qui inclut le hachage du sélecteur CSS.

Par exemple, le style CSS de l'élément HTML passera de :

p.some-class {
	background-image: url("https://yoursite.com/background-image.webp");
}

à :

p.some-class {
	background-image: var(--wpr-bg-aa111bb22-cc-33-ee-44ffgg55);
}

Changements dans les fichiers CSS

Le fichier CSS contenant l'image d'arrière-plan verra son contenu réécrit pour inclure la variable CSS de la même manière que pour les images dans les blocs CSS internes.

En outre, ce nouveau fichier sera renommé et stocké dans le dossier cache.

Par exemple, le fichier CSS passera de :
```
https://yourdomain.com/wp-content/css/css-file-with-background-image.css
	
```
à :
```
https://yourdomain.com/wp-content/cache/background-css/yourdomain.com/wp-content/css/css-file-with-background-image.css
	
```

Comment exclure une image background CSS du LazyLoad

Vous pouvez utiliser le champ Images ou iframe exclues pour exclure les images d'arrière-plan de cette optimisation.

Dans la zone, vous pouvez ajouter des mots-clés, tels que le nom de fichier de l'image, le nom de fichier CSS, la classe CSS ou le domaine de l'image à exclure. S'il y a plusieurs entrées, vous devez les ajouter une par ligne, comme indiqué ci-dessous :

image exclusions Attention : Si vous excluez un fichier CSS, toutes les images qu'il contient seront exclues de cette fonctionnalité !

Vous pouvez confirmer que l'exclusion a fonctionné en vérifiant Outils du développeur > Réseau, car l'image sera chargée immédiatement lors du chargement de la page..

Remarque : l'élément HTML d'une image exclue utilisera toujours l'attribut mais avec la valeur excluded, comme ceci : data-rocket-lazy-bg-aa111bb22-cc-33-ee-44ffgg55="excluded".

L'utilisation de la zone d'exclusion n'est recommandée que dans les cas suivants :

L'image, son style ou un élément de mise en page est cassé lors du LazyLoad.
Les images d'arrière-plan se trouvent au-dessus de la ligne de flottaison, et vous devez les charger instantanément.

Détails techniques

L'attribut data-rocket-lazy-bg-aa111bb22-cc-33-ee-44ffgg55="loaded" sera appliquée aux éléments HTML avec les images d'arrière-plan traités par cette fonctionnalité.
L'URL de l'image d'arrière-plan sera remplacée par une variable CSS associée à l'URL de l'image d'arrière-plan. La variable CSS aura le préfixe --wpr-bg.
Cette fonctionnalité ajoute deux styles internes au balisage de la page, comme suit :
- Une balise CSS avec l'ID wpr-lazyload-bg-container suivie d'une balise de style pour chaque image d'arrière-plan LazyLoadée. Chaque conteneur, après l'exécution du LazyLoad, contiendra la définition de la ou des paires de variables CSS et de l'URL de l'image d'arrière-plan LazyLoadée.
- Le bloc CSS avec l'ID wpr-lazyload-bg-exclusion utilisé pour définir la paire de variables CSS et l'URL pour les images d'arrière-plan exclues. Ce style est défini dans la source de la page, prêt à être utilisé dès le chargement de la page.
Les deux blocs CSS internes sont nécessaires pour que le navigateur trouve l'URL de l'image d'arrière-plan liée à la variable CSS et rende l'élément HTML avec l'image d'arrière-plan correspondante.
Additionally, this feature adds three inline scripts to the optimized pages:
- Un bloc JSON qui utilise la constante const rocket_pairs, et stocke : la ou les paires d'URL et de variables CSS ; et l'ID de l'élément HTML lié à chaque paire.
- Le script avec l'ID rocket_lazyload_css-js-extra, qui permet de définir le seuil de LazyLoad. Ce seuil peut être personnalisé comme indiqué ici.
- Le script avec l'ID rocket_lazyload_css-js-after, qui est utilisé pour gérer le processus de LazyLoad en vérifiant constamment les éléments DOM présents dans le seuil défini, et en appliquant les remplacements en fonction des informations contenues dans le bloc JSON.
Le(s) fichier(s) CSS réécrit(s) sera(ont) stocké(s) dans le système de fichiers, sous le dossier /wp-content/cache/background-css/yourdomain.com/. Si vous utilisez WordPress Multisite, le dossier nommé /1/ changera pour refléter le numéro du site afin d'éviter de mélanger les fichiers CSS entre les sous-sites.

Problèmes connus

La fonctionnalité LazyLoad pour les images background CSS n'est pas entièrement compatible avec les fonctionnalités CSS combinées de tiers, il n'est donc pas recommandé d'utiliser les deux en même temps.
La fonction LazyLoad pour les images background CSS n'est pas compatible avec le lazyloading d'images d'arrière-plan de tiers.
La fonction LazyLoad pour les images d'arrière-plan CSS doit traiter toutes les feuilles de style CSS de vos pages. Dans certains cas, cette option peut donc augmenter le Time To First Byte (TTFB) si le site contient beaucoup de feuilles de style CSS ou si le serveur ne dispose pas de suffisamment de ressources. Plus le site contient de feuilles de style CSS, plus l'impact sur le TTFB est important. (Uniquement lorsque le cache est en cours de création, lorsque le cache des pages existe déjà, cette option ne devrait pas avoir d'impact).

Le problème ci-dessus peut également se traduire par un problème d'utilisation élevée du processeur.

Malheureusement, il n'existe pas de solution à ces problèmes. Par conséquent, si vous rencontrez ce type de problèmes lors de l'utilisation de cette fonctionnalité, vous devez la désactiver.