loading="lazy" + Intersection Observer pour les navigateurs anciens.Lazy loading — charge ce qui est visible, ignore le reste.
Lazy load natif des images, iframes (YouTube/Vimeo) et vidéos via Intersection Observer. Placeholder blur élégant, prefetch on hover. LCP réduit de 40-60%, page interactive plus tôt.
Comment ça marche
Intersection Observer = API navigateur native, sans script externe.
Activation
Toggle dans le dashboard. Le module détecte automatiquement images, iframes et vidéos.
Placeholder LQIP
Une mini-version floutée 16×16px (Low Quality Image Placeholder) affichée pendant le chargement.
Détection viewport
Intersection Observer surveille quand l'image arrive à 200px de l'écran → déclenche le chargement.
Transition douce
Fade-in CSS 300ms quand l'image full est chargée. Aucun "saut" visuel (CLS = 0).
Fonctionnalités clés
Six raisons de tout lazy-loader proprement.
🖼️
Images lazyToutes les images avec attribut
📺
Iframes (YouTube, Vimeo)Remplacement par thumbnail léger jusqu'au click. -2 MB par iframe non chargée.
🎬
VidéosPoster image chargée d'abord. La vidéo se charge uniquement quand on appuie sur play.
🌫️
Placeholder blur LQIPMini-version base64 de 16×16px, agrandie + flouté. Effet "polaroid qui se développe". Élégant.
🪞
Prefetch on hoverQuand le visiteur survole un lien interne, la page suivante est préchargée. Navigation instantanée.
🛡️
Anti-CLSAttributs
width + height ajoutés automatiquement pour réserver la place. CLS = 0.Avant / Après
Sur un article de blog avec 8 images et 1 vidéo YouTube.
● Sans lazy
Tout chargé d'un coup
8 images + iframe YouTube chargées dès l'ouverture. 9 MB de données. LCP catastrophique, CPU à 100%.
✓ Avec lazy
Charge à la demande
Seules les 2 images "above the fold" chargées initialement. Le reste arrive au scroll.
Spécifications techniques
Implémentation moderne et accessible.
APIIntersection Observer v2
FallbackEager loading classique
Threshold200px avant viewport (configurable)
PlaceholderLQIP 16×16 base64
Aspect-ratioAuto (anti-CLS)
ExclusionsHero, above-fold (auto)
Prefetch linksOn hover (150ms)
Disponible dansPro · Agency · Founders
Modules Performance connexes
L'enchaînement parfait :
Besoin d'aide ? Notre équipe vous répond.
Une question, un cas d'usage spécifique, un problème technique ? Le support Alesta AI répond sous 24h en jours ouvrés.