Lesson 10 / 25
Lazy loading and infinite scroll
Load resources and content on-demand as users interact, reducing initial payload and improving perceived performance.
Intersection Observer API
Detect when elements enter viewport: new IntersectionObserver((entries) => { entries.forEach(e => e.isIntersecting && loadImage(e.target)); }). No scroll listeners needed. More efficient than scroll events.
Lazy loading strategies
Native loading="lazy" for images, dynamic imports for JavaScript, <link rel=preload> for critical resources. Use placeholders (blur-up, skeleton screens) to maintain layout and reduce CLS.
Lazy loading performance gains
Typically reduces initial payload by 30-50% on long pages. Improves LCP and FCP. However, can worsen scroll performance if not implemented carefully. Test on real devices.
Quick check
Quick check: What is Intersection Observer used for?
- Detecting when elements enter viewport
- Measuring page load time
- Compressing images