Lazy load sur WordPress : appliquez-le aux images, aux vidéos et plus encore

Votre site WordPress utilise beaucoup d’images ? Rien d’étonnant, puisqu’elles sont le format de média le plus répandu sur le Web. Pourtant, dans le même temps, les images peuvent sérieusement ralentir votre site, et c’est pourquoi vous devez savoir utiliser le lazy load sur WordPress.

Nous avons déjà parlé de l’optimisation des images, qui consiste à les rendre aussi légères que possible pour qu’elles se chargent rapidement. Toutefois, vous ne pouvez réduire la taille de vos images que jusqu’à un certain point sans en compromettre la qualité. De plus, si vous avez beaucoup d’images sur une même page, leurs tailles s’additionnent, même si elles ont été optimisées.

Adame Dahmani, Product Manager chez WP Rocket, explique :

Le lazy-loading diffère le chargement des images, des vidéos et des iframes hors écran jusqu’à ce qu’elles soient nécessaires, ce qui réduit les requêtes inutiles. Cela allège la pression sur la bande passante et sur le traitement, et aide le navigateur à gérer plus efficacement le thread principal et le chemin critique du rendu. Lorsqu’il est correctement mis en place, il améliore le First Contentful Paint et souvent le Largest Contentful Paint en donnant la priorité au contenu situé au-dessus de la ligne de flottaison.

Voilà une raison suffisante pour consacrer un guide détaillé au lazy-loading sur WordPress, vous ne trouvez pas ? C’est pourquoi, dans cet article, vous allez découvrir comment il fonctionne et comment vous pouvez appliquer le lazy-loading à votre site pour obtenir les meilleurs résultats.

Qu’est-ce que le lazy-loading ?

En temps normal, lorsque vous ouvrez une page web, votre navigateur charge toutes ses données en une seule fois. Chaque image, chaque texte, chaque lien, etc. qu’elle contient.

Avec les images en particulier, quand elles sont nombreuses, cela peut prendre beaucoup de temps. Les images sont bien plus lourdes que les autres éléments d’un site web. De plus, pendant que le navigateur s’en occupe, elles bloquent souvent le chargement d’autres ressources, si bien que votre page ne peut pas terminer son rendu.

Résultat : vos visiteurs doivent attendre longtemps avant de voir la page web qu’ils ont demandée. Et beaucoup ne patienteront pas jusque-là, ce qui fait grimper votre taux de rebond.

Le lazy-loading évite cela en empêchant le chargement des images et des autres ressources qui ne sont pas visibles à l’écran au départ, et c’est un moyen efficace d’optimiser le temps de chargement de votre site web.

À la place, les images situées plus bas dans la page ne se chargent qu’au fur et à mesure, quand les visiteurs font défiler la page jusqu’à elles. Ainsi, elles n’encombrent pas le navigateur, qui peut charger plus rapidement les autres parties du site. Par conséquent, les pages s’affichent plus vite pour les visiteurs, ce qui leur offre une meilleure expérience.

C’est d’ailleurs exactement ce que veulent dire les outils de test de vitesse lorsqu’ils vous recommandent : « Différez le chargement des images hors écran ».

Comment fonctionne le lazy-loading

Il existe plusieurs façons de mettre en place le lazy-loading. Autrefois, il vous fallait pour cela du JavaScript assez élaboré. Mais aujourd’hui, c’est devenu une fonctionnalité standard des navigateurs.

Par conséquent, vous pouvez tout simplement signaler, avec un attribut HTML, les images que vous voulez charger de cette manière, et les navigateurs de vos visiteurs feront le reste.

C’est très pratique, car cela facilite la mise en place, ne nécessite aucun code supplémentaire sur votre site et standardise l’approche. Comme c’est devenu la norme de fait, on parle désormais aussi de « lazy-loading natif ».

Les avantages du lazy-loading

Maintenant que vous savez comment il fonctionne, quels sont les avantages du lazy-loading des images sur votre site ?

• Temps de chargement des pages améliorés : nous en avons déjà parlé. En empêchant les images et les autres médias de se charger dès le départ, vous pouvez réduire considérablement le temps nécessaire à l’affichage d’une page web.
• Moins de travail pour le navigateur : si les images sont chargées en différé, votre navigateur n’aura pas besoin de les analyser tant qu’un visiteur ne fait pas défiler la page vers le bas.
• Moins de requêtes HTTP : vous allez aussi réduire le nombre de requêtes HTTP et améliorer la note du Largest Contentful Paint.
• Meilleure expérience utilisateur : les visiteurs adorent les pages qui se chargent vite, si bien que le lazy-loading peut favoriser les conversions et d’autres indicateurs d’engagement.
• Coûts de serveur et de CDN réduits : votre serveur ou votre CDN aura moins de données à télécharger, ce qui se traduit par des factures moins élevées si votre bande passante est limitée.
• Performances mobiles plus rapides : les images pèsent davantage sur les connexions mobiles plus lentes. Si vous réduisez leur influence, vos utilisateurs mobiles en profiteront tout particulièrement.
• Avantages pour le SEO : le lazy-loading améliore les Core Web Vitals, qui sont un facteur de classement de Google.

Les inconvénients possibles

En revanche, le lazy-loading peut aussi s’accompagner de problèmes :

• Problèmes de performance : utiliser le lazy load au-dessus de la ligne de flottaison (logos, images hero, etc.) peut en réalité nuire aux performances. En effet, l’élément Largest Contentful Paint est probablement une image située au-dessus de la ligne de flottaison, et il devrait donc se charger le plus vite possible. Nous verrons plus loin comment exclure des images du lazy-loading.
• Problèmes de SEO : si vous le mettez en place de manière incorrecte, vous pouvez empêcher les moteurs de recherche d’indexer les images chargées en différé. Toutefois, si vous suivez les instructions données ici, cela ne devrait pas poser de problème.

• Décalages de mise en page : si vous ne définissez pas la taille des images chargées en différé, la mise en page du site peut se décaler, ce qui pénalise le Cumulative Layout Shift.
• Conflits possibles : la fonctionnalité peut entrer en conflit avec certains plugins.
• Effets sur l’expérience utilisateur : le lazy-loading se remarque quand quelqu’un fait défiler la page très rapidement vers le bas.

Quand utiliser le lazy-loading

Alors, dans quels cas est-il judicieux d’utiliser cette technique ?

Dans la plupart des cas, elle est surtout efficace si vous avez beaucoup d’images sur votre site web, par exemple de longs articles de blog avec de nombreuses captures d’écran. Mais cela peut aussi s’appliquer aux pages produits ou aux pages de portfolio.

Quant à savoir quelles images précisément charger en différé, il devrait s’agir de celles situées sous la ligne de flottaison. Cela réduira le temps de chargement des pages sans nuire à l’expérience utilisateur. Nous avons déjà mentionné plus haut que vous ne devriez pas appliquer le lazy load aux images situées au-dessus de la ligne de flottaison, car cela peut nuire au temps de chargement des pages.

💡 Le saviez-vous ? WP Rocket inclut désormais Rocket Insights, le hub de performance intégré qui s’appuie sur GTmetrix. Il apporte le suivi des performances là où vous optimisez déjà votre site, pour que vous puissiez surveiller vos pages clés, comprendre vos résultats, obtenir des recommandations claires liées aux fonctionnalités de WP Rocket et relancer un test à tout moment, le tout sans jongler entre plusieurs outils.

🚀 Mettez à jour WP Rocket vers la dernière version pour commencer à utiliser Rocket Insights directement depuis votre tableau de bord : c’est inclus gratuitement dans votre offre !

Comment charger les images en différé avec le lazy-loading natif

Assez de théorie, passons à la pratique. Pour commencer, voyons comment mettre en place le lazy-loading si vous voulez utiliser la solution native du navigateur.

L’attribut HTML loading

Pour que les navigateurs appliquent le lazy-loading, les éléments du site web à différer doivent être marqués avec l’attribut HTML <loading=“lazy”>. Voici à quoi cela ressemble en pratique :

<img src="wp-rocket-is-awesome.jpg" loading="lazy" alt="WP Rocket" />
<iframe src="WP-Cache-Basics.html" loading="lazy"></iframe>

L’attribut accepte deux valeurs :

• lazy : diffère le chargement des éléments image ou iframe.
• eager : c’est le comportement de chargement standard. La ressource est demandée immédiatement, quel que soit son emplacement.

Actuellement, l’attribut loading ne prend en charge que les balises <img> et <iframe>. Vous ne pouvez pas, par exemple, l’utiliser pour charger en différé des images d’arrière-plan CSS. Nous verrons plus bas les options qui permettent de le faire.

De plus, comme cet attribut a été adopté par pratiquement tous les navigateurs (voir ci-dessous), cette méthode est aussi la plus sûre pour l’indexation des images chargées en différé dans une optique SEO. Tant que la balise img contient un attribut src, Google, au moins, ne devrait avoir aucun problème pour indexer vos images.

Ce n’est que si vous mettez en place le lazy-loading avec JavaScript qu’il peut être judicieux d’indiquer le src dans une balise <noscript>. C’est utile pour les moteurs de recherche dont les robots d’exploration ne savent pas traiter le JavaScript (là encore, Google s’en sort très bien).

Dans les deux cas, fournir en plus un sitemap d’images est une bonne idée.

Compatibilité des navigateurs

Le lazy-loading est devenu une norme de fait du Web. D’après Can I Use, il devrait fonctionner pour plus de 95 % des internautes dans le monde.

Par ailleurs, même si vous avez mis en place le lazy-loading sur votre site, il ne dégradera pas l’expérience dans un navigateur qui ne le prend pas en charge.

Le lazy-loading dans WordPress : les options intégrées

Depuis WordPress 5.5, le CMS applique par défaut le lazy-loading aux images. La fonctionnalité a été étendue aux iframes dans la version 5.7, puis affinée dans WordPress 5.9.

Ainsi, si vous avez migré votre site d’un CMS comme Squarespace vers WordPress, et si votre site WordPress tourne sous la dernière version, toute image ou iframe dotée d’attributs de largeur et de hauteur recevra automatiquement l’attribut <loading=”lazy”>. Cette condition a été ajoutée pour éviter les problèmes de Cumulative Layout Shift évoqués plus haut.

De plus, à partir de WordPress 5.9, le lazy-loading ne s’appliquera pas à la première iframe ou image d’une page. Il s’agit d’éviter les problèmes de LCP évoqués précédemment.

Par ailleurs, WordPress applique l’attribut aux images présentes aux emplacements suivants :

• Contenu des articles
• Extraits des articles
• Widgets Texte
• Images d’avatar
• Images ajoutées en tant que fichiers joints

Options de personnalisation

Il n’existe actuellement aucune option sans code pour désactiver sélectivement le lazy-loading natif de WordPress sur certaines pages ou certaines images. Si vous voulez le faire, vous devez utiliser un plugin ou certains des filtres et fonctions ci-dessous.

• wp_lazy_loading_enabled : vous pouvez l’utiliser pour activer ou désactiver complètement le lazy-loading des images dans certains contextes.
• wp_filter_content_tags() : ajoute les attributs srcset, sizes et loading aux balises HTML img, ainsi que l’attribut loading aux iframes.
• wp_img_tag_add_width_and_height_attr() : sert à ajouter des attributs width et height aux balises img qui n’en ont pas, pour que le lazy-loading puisse s’y appliquer.
• wp_img_tag_add_srcset_and_sizes_attr() : ajoute des attributs srcset et sizes aux balises img existantes, dans un but similaire à celui de la fonction précédente.
• wp_img_tag_add_loading_attr() : ajoute l’attribut loading aux balises img. Pour les iframes, utilisez wp_iframe_tag_add_loading_attr().
• wp_omit_loading_attr_threshold() : définit un seuil indiquant combien des premières images et iframes ne doivent pas être chargées en différé. Utile si votre site web affiche plusieurs éléments multimédias au-dessus de la ligne de flottaison et que vous voulez désactiver le lazy load pour chacun d’eux.

Pour des exemples d’utilisation de ces filtres et fonctions afin de modifier le lazy-loading dans WordPress, consultez les annonces de WordPress 5.5, 5.7 et 5.9.

Conseils de dépannage

Si le lazy-loading natif ne fonctionne pas sur votre site WordPress, c’est probablement parce que vous ciblez des éléments qui ne sont pas dans des balises <img> ou <iframe>. Ce sont les seules balises auxquelles WordPress applique nativement le lazy-loading. Pour d’autres options, consultez la section suivante.

Comment activer le lazy-loading de WordPress pour les images et les vidéos avec un plugin

Il existe de nombreux plugins pour ajouter le lazy-loading à votre site. Mais le moyen de loin le plus simple, c’est WP Rocket. Cela prend moins d’une minute.

Il vous suffit d’aller dans Réglages > WP Rocket > Média dans votre tableau de bord WordPress.

Cochez les cases des types de médias pour lesquels vous voulez activer le lazy-loading :

• Images
• Images background CSS
• iframes et vidéos

Vous pouvez aussi demander à WP Rocket de remplacer toutes les vidéos YouTube intégrées par une image d’aperçu. Enfin, une option permet d’ajouter des attributs de largeur et de hauteur aux images qui n’en ont pas, pour qu’elles puissent, elles aussi, bénéficier du lazy-loading.

Faites vos choix et cliquez sur Enregistrer les modifications en bas de la page. Et voilà.

Différences avec le lazy-loading natif

Comme vous pouvez déjà le constater, les options de WP Rocket vont au-delà du lazy-loading natif de WordPress. L’une des principales différences est que WP Rocket applique aussi le lazy-loading aux images d’arrière-plan, qu’elles soient définies en ligne ou dans des fichiers CSS. Voici par exemple un balisage compatible avec cette fonctionnalité :

<div style="background-image: url(image.jpg)">

Vous trouverez plus d’informations sur le lazy-loading des images d’arrière-plan avec WP Rocket dans notre documentation technique.

Comment vérifier que le lazy-loading fonctionne

Pour savoir si le lazy-loading est bien appliqué sur votre site web, vous pouvez utiliser les outils de développement du navigateur. Allez dans l’onglet « Réseau » et utilisez le filtre « Image ». Rechargez la page : vous ne devriez voir dans la liste que les images situées au-dessus de la ligne de flottaison.

Quand vous commencez à faire défiler la page vers le bas, de plus en plus d’images devraient apparaître. Vous devriez aussi voir la valeur lazyload dans la colonne « Initiateur ».

Conseils de dépannage

Si vous constatez que certaines images ne sont pas chargées en différé alors que vous avez activé l’option, plusieurs raisons sont possibles :

• Certains types d’images sont exclus volontairement, comme les galeries de produits WooCommerce
• Les images contiennent l’un des attributs exclus, comme data-src et data-no-lazy
• L’image a été ajoutée dynamiquement avec JavaScript
• Un autre plugin qui ajoute du lazy-loading entre en conflit, ou votre thème dispose de sa propre fonctionnalité de lazy-loading

Pour en savoir plus, consultez notre documentation sur les raisons pour lesquelles certaines images ne sont pas chargées en différé, les problèmes courants liés au LazyLoad et les plugins compatibles.

Comment désactiver le lazy-loading dans WordPress

Dans certains cas, vous voudrez désactiver le lazy-loading, que ce soit sur tout le site, sur une page entière ou pour certaines images précises. Voici différentes façons de le faire.

Désactivez complètement le lazy-loading natif de WordPress

Si vous voulez désactiver le lazy-loading intégré à votre site WordPress, vous pouvez le faire avec cet extrait de code :

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Placez-le dans le fichier functions.php de votre thème (enfant !). Sinon, ajoutez-le à l’aide d’un plugin comme Insert Headers and Footers ou créez votre propre MU-plugin.

Pour désactiver le lazy-loading natif de WordPress uniquement dans certains contextes ou pour certaines images, reportez-vous aux fonctions et filtres de la section Options de personnalisation ci-dessus.

Désactivez le lazy-loading dans WP Rocket

Vous pouvez désactiver la fonctionnalité LazyLoad de WP Rocket aussi facilement que vous l’avez activée. Allez dans l’onglet Média, décochez les cases et enregistrez.

Excluez certains articles et certaines pages du lazy-loading

Si vous voulez désactiver cette fonctionnalité uniquement sur un article ou une page en particulier, vous pouvez aussi le faire très facilement avec WP Rocket. Ouvrez la page ou l’article dans l’éditeur et repérez les « Options WP Rocket » dans la barre latérale (notez que le contenu doit être publié pour qu’elles soient disponibles).

Il vous suffit de décocher l’option que vous ne voulez pas utiliser et de mettre à jour le contenu. Si une option est grisée, vous devez d’abord l’activer globalement dans les réglages de WP Rocket.

Retirez le lazy-loading de certaines images ou iframes

Vous pouvez aussi désactiver le lazy-loading pour certains éléments multimédias. Vous trouverez cette option dans l’onglet Média des réglages de WP Rocket.

Saisissez dans le champ le nom du fichier, la classe CSS, l’attribut img, le nom de domaine (pour les images externes) ou le nom du fichier CSS de l’image que vous ne voulez pas charger en différé, puis enregistrez. Plus d’informations et d’exemples dans la documentation.

Sachez toutefois que vous n’avez pas besoin d’utiliser cette fonctionnalité pour exclure du lazy load les images situées au-dessus de la ligne de flottaison. Comme ne pas les exclure peut avoir de telles conséquences sur le Largest Contentful Paint et sur le score global de PageSpeed Insights, WP Rocket le fait automatiquement sans que vous ayez à lever le petit doigt. Si vous avez d’autres raisons d’exclure des images ou des iframes du lazy-loading, vous pouvez toujours utiliser la méthode décrite ci-dessus.

Modifiez le lazy-loading de WP Rocket avec du code

Si vous voulez mieux contrôler le fonctionnement du lazy-loading dans WP Rocket, vous pouvez aussi le modifier avec du code. Les extraits ci-dessous se placent dans votre fichier functions.php ou dans un plugin prévu à cet effet.

Désactivez le lazy-loading sous conditions

Commençons par une structure de fonction générale que vous pouvez utiliser pour désactiver le lazy-loading dans différentes situations :

add_action('wp', function () {

   	 // Declare condition set to false as a default
   	 $condition = false;

   	 // Build your condition logic to turn ‘$condition’ to ‘true’ when applicable

   	 if ($condition) {

   	  // Disable Rocket Lazy Load if condition is met
   	  add_filter('do_rocket_lazyload', '__return_false');
   	 
   	 }
    }
);

Voici ensuite quelques exemples d’utilisation de cette approche.

Désactivez le lazy-loading sur toutes les pages

Utilisez ce code si vous voulez appliquer le lazy-loading aux images de vos articles, mais pas à celles de vos pages :

add_filter( 'wp', function () {
   	 if ( is_page() ) {
   		 add_filter('do_rocket_lazyload', '__return_false');
   	 }
    }
);

Désactivez le lazy load sur la page d’accueil

Désactivez le lazy-loading pour la page d’accueil de votre site (la page que vous définissez dans Réglages > Lecture > Page d’accueil) :

add_filter( 'wp', function () {
   	 if ( is_front_page() ) {
   		 add_filter('do_rocket_lazyload', '__return_false');
   	 }
    }
);

Désactivez le lazy load sur votre page de blog

Même chose que ci-dessus, mais lorsque vous avez défini votre page d’accueil comme un blog :

add_filter( 'wp', function () {
   	 if ( is_home() ) {
   		 add_filter('do_rocket_lazyload', '__return_false');
   	 }
    }
);

Supprimez le lazy load sur les articles individuels

Pour désactiver le lazy-loading sur tous les articles individuels, mais le conserver sur les pages et sur la page d’accueil de votre blog, utilisez cet extrait :

add_filter( 'wp', function () {
   	 if ( is_single() ) {
   		 add_filter('do_rocket_lazyload', '__return_false');
   	 }
    }
);

Désactivez le LazyLoad sur certaines images

Vous pouvez indiquer à WP Rocket de ne pas appliquer le lazy-loading à certaines images grâce à l’attribut data-no-lazy :

<img src="my-image.jpg" data-no-lazy="1" alt="" width="100" height="100" />

Ajoutez un effet de fondu aux images chargées en différé

Il peut être un peu déroutant pour les visiteurs de voir vos images chargées en différé surgir de nulle part sur la page. Afficher les images progressivement est un effet répandu pour améliorer cette expérience.

L’extrait CSS suivant ajoutera un effet de fondu à votre site. Notez qu’il se place dans votre fichier style.css, et non dans functions.php :

img[data-lazy-src] {
    opacity: 0;
}

img.lazyloaded {
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}

Ajustez le seuil du LazyLoad

Par défaut, WP Rocket chargera les images en lazy-loading situées à moins de 300 pixels de la fenêtre du navigateur. Vous pouvez ajuster ce seuil de la façon suivante :

add_filter( 'rocket_lazyload_threshold', function ( $threshold ) {
    return 100;
});

Remarque : dans l’exemple ci-dessus, le seuil est fixé à 100 px. Ajustez la valeur à votre convenance.

FAQ

Le lazy loading, c’est quoi ?

Le lazy-loading, ou chargement différé, est une technique qui diffère le chargement des images, des vidéos et des iframes hors écran jusqu’à ce qu’elles soient nécessaires, ce qui réduit les requêtes inutiles. Au lieu de charger toutes les images d’une page en une seule fois, le navigateur ne charge celles situées plus bas qu’au fur et à mesure que le visiteur fait défiler la page jusqu’à elles. Les pages s’affichent ainsi plus vite. C’est aujourd’hui une fonctionnalité standard des navigateurs, que l’on appelle aussi « lazy-loading natif ».

Le lazy loading est-il bon pour le SEO ?

Oui, s’il est bien mis en place : le lazy-loading améliore les Core Web Vitals, qui sont un facteur de classement de Google. Mal mis en place, en revanche, il peut empêcher les moteurs de recherche d’indexer les images chargées en différé. L’attribut HTML loading est la méthode la plus sûre pour l’indexation : tant que la balise img contient un attribut src, Google, au moins, ne devrait avoir aucun problème pour indexer vos images. Fournir en plus un sitemap d’images est une bonne idée.

Comment activer le lazy load sur WordPress ?

Depuis WordPress 5.5, le lazy load est activé par défaut sur WordPress pour les images, et depuis la version 5.7 pour les iframes, à condition qu’elles aient des attributs de largeur et de hauteur. Pour aller plus loin, par exemple pour les images d’arrière-plan CSS, utilisez un plugin : avec WP Rocket, cela prend moins d’une minute. Allez dans Réglages > WP Rocket > Média, cochez les types de médias voulus et cliquez sur Enregistrer les modifications.

Comment désactiver le lazy loading sur WordPress ?

Pour désactiver complètement le lazy-loading natif de WordPress, ajoutez le filtre add_filter( 'wp_lazy_loading_enabled', '__return_false' ); au fichier functions.php de votre thème (enfant !) ou ajoutez-le avec un plugin. Avec WP Rocket, allez dans l’onglet Média, décochez les cases du LazyLoad et enregistrez. Pour un seul article ou une seule page, décochez l’option voulue dans les « Options WP Rocket » de la barre latérale de l’éditeur, puis mettez à jour le contenu.

Comment appliquer le lazy loading aux images sans plugin ?

Pour appliquer le lazy-loading aux images sans plugin, ajoutez l’attribut HTML loading avec la valeur lazy à leurs balises <img> ; il fonctionne aussi sur les balises <iframe>. Les navigateurs de vos visiteurs font le reste : selon Can I Use, cet attribut devrait fonctionner pour plus de 95 % des internautes dans le monde. Sur un site WordPress à jour, les images dotées d’attributs de largeur et de hauteur reçoivent déjà cet attribut automatiquement, sauf la première image ou iframe de la page.

Commencez dès maintenant à utiliser le lazy-loading dans WordPress

Le lazy-loading est un excellent moyen d’améliorer les performances de votre site web. Il est surtout efficace sur les sites qui contiennent beaucoup d’images, car il empêche celles-ci et les autres éléments multimédias de se charger tant qu’ils n’apparaissent pas réellement à l’écran.

Même si WordPress dispose désormais du lazy-loading natif par défaut, celui-ci offre peu de réglages aux non-développeurs et ne s’applique qu’aux images et aux éléments iframe. Si vous voulez une approche plus fine et appliquer aussi le lazy-loading à des éléments comme les arrière-plans CSS, une solution sous forme de plugin comme WP Rocket est la voie à suivre. Elle vous donne la possibilité de désactiver le lazy-loading pour certaines parties de votre site, et même pour des fichiers individuels.

Essayez-le dès maintenant. Si vous n’êtes pas convaincu, vous pouvez toujours compter sur notre garantie satisfait ou remboursé à 100 %.