Désactivez le LazyLoad sur des images spécifiques

Vous pouvez utiliser le champ Images ou iframes exclues dans les paramètres du plugin pour désactiver le lazyloading sur les images et les images d'arrière-plan.

Pour exclure une image, vous pouvez utiliser n'importe quel mot-clé du nom de fichier de l'image, de sa classe CSS ou du nom de domaine (pour les images hébergées en externe).

Pour exclure les images, vous pouvez utiliser l'un de ces mots-clés dans le balisage de l'image :

• Nom de fichier
• Tout attribut de l'élément <img>. Remarque : Les attributs de l'élément parent ne fonctionnent pas.
• Nom de domaine, pour les images hébergées en externe. 
• Classe CSS du conteneur pour les images d'arrière-plan.
• Nom de fichier CSS, pour les images d'arrière-plan ajoutées à partir d'un fichier CSS. Remarque : toutes les images du fichier CSS seront exclues.

Et s'il y en a, plusieurs exclusions doivent être ajoutées, une par ligne.

Exemple

Si vous souhaitez exclure l'image suivante :

<img src="http://www.example.org/wp-content/uploads/daniele-riggi-635135-unsplash.jpg" class="attachment-full size-full" data-imgsrc="http://www.example.org/wp-content/uploads/daniele-riggi-635135-unsplash.jpg" alt="unsplash image" title="image title"/>

Vous pouvez utiliser l'un des éléments suivants :

• Nom de fichier : daniele-riggi-635135-unsplash.jpg
• Classe : attachment-full size-full - cela exclura toutes les images avec ces deux classes
• Classe : attachment-full ou size-full -  cela exclura les images avec l'une ou l'autre classe spécifique
• -unsplash - cela exclura également toute autre image avec -unsplash dans le nom de fichier
• Contenu du texte alternatif : unsplash image
• Contenu de l'attribut title : image title
• Nom de l'attribut personnalisé : data-imgsrc

Remarque : les mots-clés (noms de fichiers, classes CSS, identifiants CSS, textes alt, attributs de titre, noms d'attributs) peuvent être trouvés dans le code source de la page.

Exclure les images de LazyLoad par page

Vous pouvez également désactiver LazyLoad pour vos images en utilisant le plugin d'aide suivant. Ce plugin vous permet de désactiver LazyLoad pour des images spécifiques sur des pages sélectionnées (par page slug), tout en conservant l'image lazyloadée sur d'autres pages.

📥 Télécharger (.zip): WP Rocket | Exclude images from LazyLoad per page
Développeurs : Vous trouverez le code de ce plugin sur GitHub.

Attention ! Le plugin d'aide ne fonctionne pas seul. L'édition manuelle du code est requis avant utilisation !

Consultez le fichier README.md pour obtenir des détails spécifiques sur la manière d'appliquer chaque modification.

Astuce pour le widget images d'Elementor

Les images intégrées avec le widget image d'Elementor peuvent parfois être difficiles à exclure. L'utilisation d'une classe CSS ne fonctionne pas car Elementor ne l'ajoute pas à la balise image mais à une balise div parente, vous devrez donc indiquer chaque nom de fichier dans les paramètres d'exclusion. 

Une solution de secours est possible avec ce plugin : https://fr.wordpress.org/plugins/add-class-to-elementor-image/. 

Il suffit d'ajouter cette classe no-lazy dans le champ d'exclusion LazyLoad de WP Rocket et d'ajouter no-lazy dans le champ Custom Class de chaque image que vous ne voulez pas voir chargée par LazyLoad par WP Rocket.