Lazy loading des images et vidéos

Lazy Loading

Principe

Le lazy loading retarde le chargement des images et vidéos jusqu'à ce qu'elles soient visibles dans la fenêtre du navigateur. Cela réduit le temps de chargement initial de la page.

Natif HTML

<img src="photo.webp" loading="lazy" alt="Description">\n<iframe src="video.html" loading="lazy"></iframe>

WordPress

WordPress 5.5+ ajoute loading="lazy" automatiquement sur les images. Pour plus de contrôle, utilisez LiteSpeed Cache → Optimisation de page → Lazy Load.

Bonnes pratiques

• Ne pas lazy-load les images au-dessus de la ligne de flottaison (hero image, logo)
• Définissez toujours width et height sur les images (évite le CLS)
• Utilisez des placeholders (couleur ou blur) pendant le chargement