Lazy Loading dans WordPress : charger les images uniquement lorsqu’elles sont nécessaires

Lazy Loading dans WordPress : charger les images uniquement lorsqu’elles sont nécessaires

Le lazy loading est l’une des techniques les plus importantes pour accélérer les sites WordPress riches en images. Les longs articles de blog, guides, portfolios, galeries, pages produits ou landing pages contiennent souvent de nombreuses images. Sans optimisation, le navigateur devrait charger un très grand nombre de fichiers simultanément lors du premier affichage de la page, même si les visiteurs ne voient pas encore ces images.

C’est précisément là qu’intervient le lazy loading. Les images, vidéos ou contenus intégrés ne sont pas entièrement chargés immédiatement, mais seulement lorsqu’ils se rapprochent de la zone visible du navigateur. La partie supérieure de la page peut ainsi apparaître plus rapidement, la consommation de données diminue et le site paraît nettement plus réactif pour les visiteurs.

Pourquoi le lazy loading est si important

Imaginez un long article contenant 20 images. Sans lazy loading, le navigateur essaie de télécharger toutes les images dès le chargement de la page. Cela peut considérablement allonger le temps de chargement, surtout sur les appareils mobiles ou avec des connexions Internet plus lentes.

Avec le lazy loading, seuls les contenus importants pour la zone visible sont d’abord chargés. Les images situées plus bas sur la page sont chargées ensuite dès que le visiteur fait défiler la page. Cela allège le chargement initial.

Les avantages typiques du lazy loading sont :

• chargement initial plus rapide de la page : Moins de fichiers doivent être chargés immédiatement.
• consommation de données réduite : Les images non consultées peuvent ne pas être chargées du tout.
• meilleure expérience utilisateur mobile : Particulièrement important pour les connexions mobiles.
• moins de charge pour le navigateur : Le navigateur n’a pas besoin de traiter tous les médias immédiatement.
• scores de performance potentiellement meilleurs : Surtout sur les pages riches en images.

Comment fonctionne techniquement le lazy loading

Avec le lazy loading, le navigateur ou un script décide quelles images doivent être chargées immédiatement et lesquelles suivront plus tard. Les navigateurs modernes prennent en charge l’attribut HTML natif loading="lazy" à cet effet.

Un exemple simple :

<img src="beispielbild.webp" alt="Image d’exemple dans un article WordPress" loading="lazy">

Cet attribut indique au navigateur que l’image peut être chargée de manière différée. Le navigateur décide ensuite lui-même du bon moment pour la charger.

Il existe également des solutions de lazy loading basées sur JavaScript. Celles-ci sont souvent utilisées par les plugins de performance afin d’optimiser également les contenus qui ne sont pas entièrement couverts par le lazy loading natif du navigateur.

Lazy loading dans WordPress depuis la version 5.5

Depuis WordPress 5.5, le lazy loading pour les images est généralement intégré au cœur de WordPress. WordPress ajoute automatiquement l’attribut loading="lazy" aux images appropriées. De nombreux sites bénéficient ainsi déjà d’une optimisation de base sans plugin supplémentaire. 

Cela ne signifie toutefois pas que tous les plugins de lazy loading sont inutiles. La fonction de base de WordPress se concentre principalement sur les images normales dans le contenu. Selon leur étendue fonctionnelle, les plugins avancés peuvent également charger de manière différée les iframes, vidéos, images d’arrière-plan, sliders, images WooCommerce ou contenus intégrés.

Qu’est-ce qui ne devrait pas être chargé en lazy loading ?

Le lazy loading est très utile, mais il ne convient pas à toutes les images. L’image visible la plus grande dans la partie supérieure de la page est particulièrement importante. Il peut s’agir par exemple d’une image hero, d’une grande image mise en avant ou d’une image produit importante.

Si cette image principale est chargée avec un délai, le chargement de la page peut même se détériorer. Le navigateur charge alors trop tard un élément central, ce qui peut avoir un effet négatif sur le Largest Contentful Paint, abrégé LCP.

En règle générale, les éléments suivants ne devraient pas être chargés en lazy loading :

• les images hero dans la partie supérieure,
• l’image mise en avant la plus importante au-dessus de la zone visible,
• les logos dans l’en-tête,
• les images produit importantes dès le lancement de la page,
• les images de slider visibles dans le premier viewport.

Above the Fold : la zone visible compte en premier

Le terme Above the Fold décrit la zone d’un site web que les visiteurs voient sans faire défiler la page. Cette zone est particulièrement importante, car elle détermine la première impression. Lorsque le titre, l’introduction, l’image principale et la navigation s’affichent rapidement, le site paraît plus rapide et plus professionnel.

Le lazy loading aide à prioriser la zone visible. Les contenus plus bas sont différés afin que le navigateur utilise d’abord ses ressources pour ce que les visiteurs voient immédiatement.

Pour de bonnes performances, vous devriez donc :

• ne pas retarder inutilement l’image la plus importante dans la partie supérieure,
• charger les images plus bas en lazy loading,
• optimiser les grandes images d’arrière-plan,
• éviter les sliders inutiles,
• garder CSS et JavaScript légers,
• indiquer correctement les dimensions des images.

Lazy loading et Core Web Vitals

Le lazy loading peut avoir un effet positif sur le temps de chargement et l’expérience utilisateur. Les Core Web Vitals de Google sont particulièrement pertinents à cet égard. Il est toutefois important de bien les situer : la métrique autrefois souvent citée First Input Delay, abrégée FID, a été remplacée en mars 2024 par Interaction to Next Paint, abrégée INP, comme métrique Core Web Vitals pour la réactivité.

Le lazy loading influence surtout la rapidité avec laquelle les contenus visibles sont chargés et la charge imposée au navigateur au démarrage de la page. Il peut ainsi contribuer indirectement à améliorer l’expérience utilisateur. Toutefois, plusieurs facteurs sont déterminants pour obtenir de bons scores Core Web Vitals :

• LCP : L’élément visible le plus important devrait apparaître rapidement.
• CLS : La mise en page ne devrait pas bouger pendant le chargement.
• INP : La page devrait aussi réagir rapidement aux interactions.
• Temps de réponse du serveur : L’hébergement devrait répondre rapidement et de manière stable.
• JavaScript : Trop de JavaScript peut retarder les interactions.

Le lazy loading est donc un élément important, mais pas une solution unique à tous les problèmes de performance.

Lazy loading pour les images

Les images sont le cas d’utilisation le plus fréquent du lazy loading. L’effet peut être très perceptible, notamment dans les longs articles, les galeries ou les listes de produits. WordPress en gère déjà une grande partie automatiquement, à condition que les images soient correctement intégrées via la médiathèque et l’éditeur.

Pour que le lazy loading fonctionne bien, les images doivent aussi être optimisées :

• utiliser des dimensions d’image adaptées,
• compresser la taille des fichiers,
• vérifier WebP ou d’autres formats modernes,
• soigner les textes alternatifs,
• faire afficher correctement la largeur et la hauteur,
• ne pas intégrer d’images originales inutilement grandes.

Le lazy loading ne remplace pas l’optimisation des images. Une image beaucoup trop grande reste beaucoup trop grande, même si elle est chargée plus tard.

Lazy loading pour YouTube, Vimeo et les iframes

Les vidéos intégrées de YouTube, Vimeo ou d’autres plateformes peuvent fortement influencer le temps de chargement. Souvent, des scripts externes, images d’aperçu, composants de suivi et fichiers du lecteur sont déjà chargés dès l’ouverture de la page, même si le visiteur ne lance pas encore la vidéo.

De nombreux plugins de performance proposent donc un lazy loading spécifique pour les iframes ou les vidéos. Une méthode particulièrement efficace consiste à remplacer le lecteur intégré par une image d’aperçu. Le lecteur vidéo proprement dit n’est chargé que lorsque le visiteur clique activement.

Cela peut apporter de grands avantages, surtout sur les pages contenant plusieurs vidéos intégrées.

Lazy loading pour les images d’arrière-plan

Les images d’arrière-plan sont souvent intégrées via CSS. Cela concerne par exemple les zones hero, les sections de design, les tuiles ou les sections de page builders. Les fonctions natives de lazy loading du navigateur ne s’appliquent pas toujours automatiquement à ces images d’arrière-plan CSS.

Certains plugins de performance peuvent également charger les images d’arrière-plan de manière différée. L’utilité dépend de leur emplacement. Les images d’arrière-plan dans la partie supérieure visible ne devraient pas être différées. En revanche, les images d’arrière-plan situées plus bas sur la page peuvent être de bonnes candidates pour le lazy loading.

Plugins pour un lazy loading avancé

Si la fonction de base de WordPress ne suffit pas, les plugins de performance peuvent offrir des possibilités supplémentaires. Les solutions connues incluent par exemple WP Rocket, Autoptimize, LiteSpeed Cache ou d’autres plugins d’optimisation. La solution la mieux adaptée dépend de votre hébergement, de votre thème, de votre système de cache et des plugins utilisés.

Selon leur étendue fonctionnelle, les plugins de lazy loading avancés peuvent :

• charger les images de manière différée,
• charger les iframes en lazy loading,
• remplacer les vidéos YouTube par des images d’aperçu,
• optimiser les images d’arrière-plan,
• définir des exceptions pour certaines images,
• ajuster les thresholds ou distances de chargement,
• améliorer le lazy loading pour les sliders ou galeries.

Veillez à ne pas activer simultanément plusieurs plugins avec des fonctions de lazy loading similaires. Une double optimisation peut faire en sorte que les images ne s’affichent pas ou se chargent trop tard.

Tester le lazy loading

Après l’activation ou l’ajustement du lazy loading, vous devriez tester votre site web. Vérifiez non seulement la page d’accueil, mais aussi les articles de blog, pages produits, galeries, landing pages et vues mobiles.

Vous pouvez notamment vérifier le lazy loading avec les outils de développement du navigateur :

1. Ouvrez votre site web dans le navigateur.
2. Ouvrez les outils de développement avec F12 ou par clic droit puis Inspecter.
3. Passez à la section Réseau.
4. Rechargez la page.
5. Observez à quel moment les images sont chargées.
6. Faites défiler lentement vers le bas et vérifiez si d’autres images sont chargées ensuite.

Vous pouvez également utiliser des outils comme PageSpeed Insights, Lighthouse ou WebPageTest pour vérifier le temps de chargement et les indications liées aux Core Web Vitals.

Erreurs typiques avec le lazy loading

Le lazy loading est simple à activer, mais il n’est pas toujours automatiquement configuré de manière parfaite. Les erreurs fréquentes sont :

• L’image hero est chargée en lazy loading : L’image la plus importante apparaît trop tard.
• Systèmes de lazy loading en double : WordPress, le thème et le plugin travaillent simultanément les uns contre les autres.
• Problèmes de sliders : Les sliders chargent les images de manière incorrecte ou différée.
• Images d’arrière-plan manquantes : Les images CSS ne sont pas traitées correctement.
• La mise en page bouge : Les dimensions des images manquent et provoquent des décalages.
• Les vidéos se chargent tout de même immédiatement : Les iframes ne sont pas optimisées.
• La vue mobile n’est pas vérifiée : Les problèmes n’apparaissent que sur les smartphones.

Si, après une optimisation, des images manquent, apparaissent avec retard ou si la mise en page bouge, vous devriez vérifier les réglages de lazy loading, le cache et la compatibilité du thème.

Lazy loading et visiteurs mobiles

Les visiteurs mobiles profitent particulièrement du lazy loading. Les smartphones disposent aujourd’hui souvent d’un matériel rapide, mais les connexions mobiles ne sont pas toujours stables. Chaque fichier chargé inutilement coûte du temps, du volume de données et de l’énergie.

Pour les performances mobiles, les éléments suivants sont particulièrement importants :

• petits fichiers image,
• tailles d’image responsive correctes,
• lazy loading pour les images situées plus bas,
• peu de scripts externes,
• pas de chargement inutile de vidéos,
• hébergement rapide et bon caching.

Dans les longs articles contenant de nombreuses images, le lazy loading peut faire la différence entre une page mobile lourde et une page agréablement utilisable.

SEO et lazy loading

Le lazy loading peut soutenir indirectement le SEO, car il peut améliorer les temps de chargement, l’expérience utilisateur et la qualité technique. Les moteurs de recherche ne privilégient pas globalement une méthode précise de lazy loading. Ce qui compte, c’est que les contenus importants soient visibles, accessibles et correctement présents dans le HTML.

D’un point de vue SEO, vous devriez veiller à ce que :

• les images importantes soient correctement intégrées dans le HTML,
• les textes alternatifs soient présents,
• les images ne soient pas cachées aux moteurs de recherche par un JavaScript défectueux,
• la zone visible soit chargée rapidement,
• les problèmes Core Web Vitals soient vérifiés régulièrement,
• aucun contenu important ne devienne visible uniquement via des actions utilisateur problématiques.

GEO : pourquoi le lazy loading est également pertinent pour les systèmes de recherche modernes

Le GEO, c’est-à-dire Generative Engine Optimization, concerne avant tout la trouvabilité et la compréhensibilité des contenus pour les systèmes de recherche assistés par IA. Un site techniquement propre soutient ce processus, car les contenus doivent être accessibles de manière fiable et utilisables rapidement.

Le lazy loading peut contribuer à livrer rapidement et de manière stable des contenus étendus contenant de nombreuses images. Il est toutefois important que les images, textes alternatifs et contenus restent intégrés proprement sur le plan sémantique. Un site rapide ne suffit pas à lui seul. Les contenus doivent rester compréhensibles, structurés et entièrement accessibles.

Méthode recommandée

1. Vérifier la version de WordPress : Les versions modernes de WordPress intègrent déjà le lazy loading pour les images.
2. Tester le site web : Vérifiez quelles images sont chargées immédiatement et lesquelles suivent plus tard.
3. Exclure l’image hero : L’image supérieure la plus importante ne devrait pas être différée.
4. Optimiser les images : Améliorer la taille des fichiers, les dimensions et le format.
5. Vérifier les iframes : Charger YouTube, Vimeo et les intégrations externes en lazy loading si nécessaire.
6. Utiliser un seul système : Évitez plusieurs fonctions de lazy loading concurrentes.
7. Tester la vue mobile : Contrôler particulièrement sur smartphones et tablettes.
8. Mesurer les Core Web Vitals : Utiliser PageSpeed Insights ou Lighthouse pour le contrôle.

Questions fréquentes sur le lazy loading dans WordPress

Qu’est-ce que le lazy loading ?

Le lazy loading signifie que les images, vidéos ou iframes ne sont chargés que lorsqu’ils sont nécessaires. Les contenus situés plus bas sur la page ne sont donc pas chargés immédiatement lors du premier affichage.

WordPress intègre-t-il déjà le lazy loading ?

Oui. Depuis WordPress 5.5, WordPress ajoute par défaut le lazy loading natif aux images appropriées via l’attribut loading="lazy".

Ai-je tout de même besoin d’un plugin de lazy loading ?

Cela dépend de votre site web. Pour les contenus simples, la fonction de base de WordPress suffit souvent. Pour les iframes, vidéos, images d’arrière-plan, sliders ou optimisations spécifiques, un plugin de performance peut être utile.

La première grande image devrait-elle être chargée en lazy loading ?

En règle générale, non. L’image visible la plus importante dans la partie supérieure devrait être chargée rapidement afin de ne pas retarder le chargement de la page.

Le lazy loading améliore-t-il automatiquement mon classement Google ?

Pas automatiquement. Le lazy loading peut améliorer le temps de chargement et l’expérience utilisateur. Cela peut contribuer indirectement à la qualité technique, mais ne remplace pas de bons contenus, une structure propre et d’autres optimisations de performance.

Le lazy loading peut-il causer des problèmes ?

Oui, s’il est mal configuré. Les problèmes typiques sont les images manquantes, les images hero chargées trop tard, les décalages de mise en page ou les conflits entre plusieurs plugins d’optimisation.

Quelle est la différence entre FID et INP ?

FID était auparavant une métrique Core Web Vitals pour le premier délai d’entrée. Depuis mars 2024, FID a été remplacé par INP, qui évalue plus globalement la réactivité d’une page.