What is Lazy Loading?
Lazy loading defers loading of resources that aren't immediately needed. Images below the fold load only when the user scrolls near them, reducing initial page weight.
Implementation Methods
1
Native Lazy Loading
Add loading='lazy' to <img> and <iframe> elements. Supported in all modern browsers.
2
Intersection Observer API
For more control, use Intersection Observer to detect when elements enter the viewport.
3
Loading Priority
Don't lazy load above-the-fold images or your LCP element. Use fetchpriority='high' for critical images.