Lazy Loading
A technique that delays loading non-critical resources until they're needed.
Definition
Lazy loading defers the loading of images, videos, or other content until they enter or approach the viewport. This reduces initial page load time and bandwidth consumption, loading resources only when users scroll to them.
Native browser lazy loading via the loading="lazy" attribute simplifies implementation.
Why It Matters
Lazy loading dramatically improves perceived performance, especially on image-heavy pages. Users see content faster, and you save bandwidth for resources they never scroll to.
Core Web Vitals benefit from lazy loading through improved Largest Contentful Paint scores.
Examples in Practice
A blog with many images implements lazy loading, reducing initial page weight from 5MB to 500KB.
A product gallery lazy loads high-resolution images as users scroll through the carousel.
An infinite scroll implementation uses lazy loading to manage memory when thousands of items could appear.