# Lazy loading and infinite scroll — Web Performance Optimization

Source: https://www.geekswithgeeks.com/en/web-performance/web-perf-10

> 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

**Quiz:** What is Intersection Observer used for?

- [ ] Detecting when elements enter viewport
- [ ] Measuring page load time
- [ ] Compressing images