Le lazy loading est une technique où les images et autres contenus ne sont chargés que lorsqu'ils apparaissent à l'écran. Cela garantit des temps de chargement plus rapides et économise de la bande passante, surtout sur les pages avec beaucoup d'images.

Qu'est-ce que le lazy loading ?

Sur un site web normal, toutes les images sont chargées directement quand quelqu'un ouvre la page, même les images tout en bas. Avec le lazy loading, seules les images visibles sont chargées. Le reste suit quand le visiteur fait défiler vers le bas.

Avantages du lazy loading :

  • Temps de chargement initial plus rapide - La page est prête plus vite
  • Moins de bande passante - Les images non vues ne sont pas chargées
  • Meilleurs Core Web Vitals - Effet positif sur LCP et FID
  • Charge serveur réduite - Moins de requêtes simultanées

Lazy loading natif dans les navigateurs

Les navigateurs modernes supportent le lazy loading nativement via l'attribut loading. Cela fonctionne sans plugins supplémentaires ni JavaScript :

<img src="image.jpg" loading="lazy" alt="Description">

La valeur "lazy" indique au navigateur de ne charger l'image que lorsqu'elle entre dans le viewport. C'est supporté par Chrome, Firefox, Edge et Safari.

Lazy loading dans WordPress

Depuis WordPress 5.5, le lazy loading est automatiquement ajouté à toutes les images. Vous n'avez rien à configurer. WordPress ajoute automatiquement loading="lazy" aux images dans votre contenu.

Voulez-vous vérifier que ça fonctionne ? Ouvrez votre site WordPress, faites un clic droit sur une image et choisissez "Inspecter l'élément". Vous devriez voir loading="lazy" dans la balise img.

Désactiver le lazy loading pour des images spécifiques

Certaines images, comme votre logo ou image hero, vous voudrez peut-être les charger directement. Vous pouvez le faire en ajoutant loading="eager" ou en utilisant un plugin qui gère cela.

Plugins de lazy loading pour WordPress

Bien que WordPress supporte le lazy loading nativement, les plugins offrent des fonctionnalités supplémentaires :

Smush

Le plugin Smush combine le lazy loading avec la compression d'images. Idéal si vous voulez les deux fonctionnalités.

LiteSpeed Cache

Vous utilisez l'hébergement Theory7 avec LiteSpeed ? Le plugin LiteSpeed Cache a un lazy loading intégré pour les images et iframes.

WP Rocket

Le plugin WP Rocket offre des options avancées de lazy loading, y compris pour les vidéos et iframes.

Lazy loading pour les vidéos et iframes

En plus des images, vous pouvez aussi mettre les vidéos et iframes en lazy loading. C'est particulièrement utile pour les vidéos YouTube embarquées qui autrement chargent beaucoup de ressources :

<iframe src="https://youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>

Tester le lazy loading

Pour vérifier si le lazy loading fonctionne correctement :

  1. Ouvrez votre site dans Chrome
  2. Ouvrez les Developer Tools (F12)
  3. Allez dans l'onglet Network
  4. Filtrez sur "Img"
  5. Rechargez la page
  6. Faites défiler lentement vers le bas

Vous devriez voir que les images ne se chargent que lorsque vous faites défiler vers le bas. Si toutes les images se chargent directement, le lazy loading ne fonctionne pas correctement.

Problèmes courants

Les images n'apparaissent pas

Parfois les images ne se chargent pas correctement avec des paramètres de lazy loading agressifs. Augmentez la valeur "threshold" pour que les images se chargent plus tôt, avant d'apparaître à l'écran.

Décalage de mise en page à cause du lazy loading

Si les images n'ont pas de hauteur et largeur fixes, la page peut "sauter" quand elles se chargent. Ajoutez toujours les attributs width et height à vos images.

Conflit avec d'autres plugins

Plusieurs plugins avec lazy loading peuvent entrer en conflit. Utilisez une seule solution de lazy loading et désactivez les fonctions en double.

Questions fréquentes

Le lazy loading affecte-t-il le SEO ?

Non, Google comprend le lazy loading et indexe les images normalement. Assurez-vous d'utiliser des textes alt pour l'accessibilité et le SEO.

Dois-je utiliser le lazy loading pour toutes les images ?

Pas pour les images "above the fold" (directement visibles sans défilement). Celles-ci se chargent mieux directement pour une bonne expérience utilisateur.

Le lazy loading fonctionne-t-il sur mobile ?

Oui, le lazy loading fonctionne sur tous les navigateurs mobiles modernes. Il est même particulièrement précieux sur mobile à cause de la bande passante et des données limitées.

En savoir plus sur l'optimisation de site ? Avec l'hébergement Theory7, vous accédez à des serveurs LiteSpeed qui fonctionnent parfaitement avec le lazy loading pour une vitesse maximale.