Les images exclues continuent d'être chargées de manière différée.

Cet article inclut des informations sur les images qui sont chargées de manière différée ou cassées même si elles sont exclues du LazyLoad.

Comportement attendu d'une image exclue.

Si vous avez suivi ce guide pour exclure une image du LazyLoad, vous devriez vous attendre à voir ce qui suit :

L'image n'utilise plus la classe lazyloaded.
L'image est chargée lorsque vous visitez la page, peu importe son emplacement par rapport au viewport du navigateur.

Comment détecter s'il y a un problème avec l'exclusion

Cependant, parfois vous pouvez constater qu'une image exclue :

Utilise toujours la classe lazyloaded, ou similaire.
Utilise un attribut loading="lazy", ou similaire.
Se charge uniquement lorsque le viewport atteint son emplacement.
Active l'audit de Lighthouse l'image LCP "Largest Contentful Paint" a été chargée de manière différée, comme indiqué ici.

Tous les scénarios énumérés ci-dessus indiquent qu'une image est toujours en cours de chargement différé. Si tel est le cas, vous devez effectuer un processus de dépannage comme indiqué dans les sections suivantes.

Résoudre le problème dans WP Rocket

Dans WP Rocket, assurez-vous que l'exclusion correspond exactement à :

Le nom de fichier de l'image, le chemin et/ou l'extension.
La classe doit être à l'intérieur de la balise img. Utiliser des classes d'autres balises comme div ne fonctionnera pas.

Résoudre le problème en dehors de WP Rocket

Parfois, des plugins tiers, des thèmes ou WordPress lui-même peuvent être ceux qui chargent les images de manière différée. Veuillez suivre ces étapes pour vérifier si c'est le cas :

Visitez votre site tout en contournant le cache et les optimisations de WP Rocket, en ajoutant ?nowprocket à la fin de l'URL.
Localisez l'image affectée.
Faites un clic droit sur l'image pour ouvrir le menu contextuel, puis cliquez sur Inspecter/Élément inspecter.
Explorez la balise de l'image et recherchez la balise associée au chargement différé, telle que la classe lazyloaded, l'attribut loading="lazy", ou similaire.
Si votre image comporte de tels changements de balise, vous avez confirmé qu'elle est chargée de manière différée par un tiers.

À ce stade, vous devez exclure l'image du chargement différé tiers. Si vous ne savez pas comment faire, vous devriez contacter leur équipe de support.

Remarque : Si vous utilisez le LazyLoad de WP Rocket, vous devriez désactiver la fonction de lazyload tierce pour éviter les problèmes.

Les tiers habituels qui pourraient utiliser le chargement différé de vos images.

Voici quelques-uns des plugins tiers les plus courants qui pourraient charger vos images de manière différée :

Également, à partir de la version 5.5 de WordPress et ultérieure, le chargement différé natif est intégré. Si le LazyLoad de WP Rocket est désactivé, le chargement différé natif de WordPress sera appliqué à vos images.

Vous pouvez désactiver le chargement différé natif de WordPress en activant ce plugin externe : Désactiver le chargement différé.

Exemple

Dans l'image ci-dessous, vous pouvez voir comment le processus de dépannage peut être suivi dans la version ?nowprocket de la page. Dans ce cas, l'image est chargée de manière différé par Optimole, elle est servie depuis le CDN d'Optimole avec l'URL mlqfawd8mrcz.i.optimole.com et contient l'attribut data-opt-loaded="true".