WordPress 5.9 désactiver le lazy loading pour les images en avant
Avant WordPress 5.9, désactiver totalement le lazy loading via une ligne de code était facile.
Mais depuis WordPress 5.9 c’est un peu plus compliqué. En effet, le code qui fonctionnait antérieurement, n’exclut pas les images en avant du lazy loading.
Résultat, les images en avant au-dessus de la ligne de flottaison (à partir de la deuxième) ont un chargement différé.
Et là, patatras ! Le LCP (Largest Contentful Paint) de votre page voit son temps augmenter et corrélativement votre score de performance diminue. 😟
Mais, il y a une solution !
Découvrez :
- Pourquoi la désactivation du lazy loading sur les images en avant est importante
- Comment désactiver le lazy loading pour les images en avant
Pourquoi vouloir désactiver le lazy loading de WordPress ?
Le lazy loading est une solution d’amélioration de la vitesse des pages seulement s’il est utilisé correctement.
💡 Pour rappel, le lazy loading (chargement paresseux en français), c’est lorsque le navigateur charge immédiatement les images qui se trouvent dans l’écran d’accueil et toutes les autres de manière dynamique au fur et à mesure que vous faites défiler la page.
Vous l’avez donc compris, pour qu’il soit performant, le lazy loading ne doit pas être appliqué au contenu situé au-dessus de la ligne de flottaison.
En effet, pour avoir un bon score Core Web Vitals, le LCP (Large Contentful Paint) doit être inférieur à 2,5 secondes. C’est la raison pour laquelle, il est obligatoire que les images affichées dans la fenêtre d’accueil se chargent sans délai.
Mais voilà, avec le lazy loading de WordPress, pour l’instant, ce n’est pas le cas.
Alors, voyons à présent comment désactiver le lazy loading de WordPress.
La solution pour désactiver le lazy loading avant WordPress 5.9
Avec WordPress 5.5, l’équipe de WordPress avait choisi d’implémenter le lazy loading sur toutes les images en leur ajoutant l’attribut loading="lazy"
.
Il était donc simple de le désactiver totalement en ajoutant le code suivant dans le fichier functions.php de votre thème enfant :
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Mais, ça, c’était avant. 😓
La solution pour désactiver le lazy loading des images en avant depuis WordPress 5.9
L’équipe de WordPress a bien compris que différer toutes les images réduisait la performance du site au lieu de l’augmenter.
Par conséquent, depuis la version 5.9 de WordPress, elle a choisi d’exclure la première image du lazy loading et de l’appliquer à toutes les autres.
Le problème est que, dans certaines pages, plusieurs images peuvent être à exclure, notamment les images en avant.
C’est le cas, par exemple, pour la page affichant les derniers articles :
Pour remédier à cela, il vous faudra donc ajouter le code ci-dessus et également un code additionnel dans le fichier functions.php de votre thème enfant.
Le code remplacera l’attribut lazy
par eager
dans la balise loading
des images en avant (featured images).
Cela indiquera à WordPress de charger les images en avant immédiatement.
Voici donc le fameux code qui aura pour effet de désactiver le lazy loading uniquement pour les images en avant dans WordPress :
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
function disable_lazy_load_featured_images($attr, $attachment = null) {
$attr['loading'] = 'eager';
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'disable_lazy_load_featured_images');
Ensuite, il ne vous reste plus qu’à utiliser votre extension d’optimisation de médias préférée, par exemple Optimole, pour exclure du lazy loading le nombre d’images que vous souhaitez sur chaque page. 😉
Désormais, lors de vos tests de performance, vous n’aurez plus l’erreur indiquant que l’image Largest Contenful Paint a eu un chargement différé.
De plus, votre score de performance sera réévalué à la hausse.🎯
Si vous n’utilisez pas de thème enfant ou que vous n’avez pas envie de toucher au code de votre site. Alors, sachez que vous pouvez utiliser une extension.
Extension Disable Lazy Load
L’extension gratuite Disable Lazy Load fait exactement le même travail.
Il suffit de l’installer et de l’activer.
Et au cas où vous souhaiteriez réappliquer le lazy loading de WordPress, désactivez l’extension.
Réflexion finale sur le lazy loading natif de WordPress
En conclusion, force est de constater que l’équipe de WordPress y met du sien pour augmenter les performances des sites sous WordPress.
Mais pour que le lazy loading qu’elle embarque dans le core de WordPress soit concluant, il y a encore du chemin à parcourir.
À mon avis, WordPress devrait laisser au créateur de sites le moyen d’exclure le nombre d’images qu’il souhaite dans un menu accessible à tous.
Alors, comme on dit, “wait and see“, j’espère que cette fonctionnalité viendra prochainement.
Et vous, avez-vous remarqué ce problème pour les images en avant sous WordPress ?
Soumettre un commentaire 💬