Exclure un nombre spécifique d'images du LazyLoad en ciblant un attribut

Google PageSpeed recommande que tout ce qui se trouve au-dessus de la ligne de flottaison ne soit pas lazyloadé. Pour ce faire, vous pouvez utiliser notre champ d'exclusion des images et des iframes en ciblant des noms et des classes d'images spécifiques.

Un problème potentiel de performance peut survenir lors de l'utilisation de curseurs, de carrousels ou de grilles positionnés au-dessus de la ligne de flottaison. Ce type de structure comporte deux types d'images répétitives :

• Images visibles qui ne doivent pas être LazyLoadées pour respecter la recommandation de Google PageSpeed.
• Images cachées que le visiteur ne consulte pas immédiatement et qui, par conséquent, doivent être LazyLoadées pour de meilleures performances. 

<ul>
	<li><a href="#"><img src="//wp-content/uploads/img-1" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt=""></a></li>
	<li><a href="#"><img src="//wp-content/uploads/img-1" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt=""></a></li>
	<li><a href="#"><img src="//wp-content/uploads/img-1" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt=""></a></li>
</ul>

Dans cet exemple, la balise  <img> possède un attribut unique class="attachment-shop_catalog size-shop_catalog wp-post-image" que nous pouvons utiliser pour cibler ces images.

Vous pouvez utiliser le plugin d'aide comme suit pour cibler les bonnes images à exclure :

1. Téléchargez le fichier zip du plugin d'aide, puis décompressez-le.
2. Ouvrez le fichier PHP dans un éditeur de texte.
3. Modifiez la ligne 20 pour cibler un attribut d'image spécifique.
   $pattern = 'class="attachment-shop_catalog';
Assurez-vous de bien garder la partie class=".
4. Modifiez le nombre à la ligne 23 pour spécifier le nombre d'images contenant le motif que vous voulez exclure.
   $count = 3;
5. Re-zippez le dossier.
6. Installez le plugin d'aide sur votre site - allez dans Extensions → Ajouter → Téléverser et sélectionnez le fichier zip.
7. Activez le plugin.
8. Videz le cache de WP Rocket.

📥   Télécharger (.zip):  WP Rocket | Exclude X First Images by Attribute
Développeurs : Vous trouverez le code de ce plugin sur GitHub.