What Is Lazy Loading? Deferring Work Until Needed
Lazy loading defers fetching a resource, such as a code chunk, image, or component, until the moment it is actually needed.
Loading everything up front is wasteful when users only see part of a page. Lazy loading delays work until it matters, so the initial load stays fast and unused resources are never fetched. It applies to JavaScript via code splitting, to images via native browser support, and to data via on-demand fetching. The build sets up the splittable pieces lazy loading relies on.
Lazy loading code
A dynamic import lets a route or component load only when used. The bundler turns it into a separate chunk fetched on demand, so visiting a rarely used page costs nothing until someone goes there.
Lazy loading images
The loading="lazy" attribute lets the browser defer offscreen images until the user scrolls near them. That cuts initial bandwidth and improves load metrics without any JavaScript.
The benefits
- Smaller initial download and faster first paint.
- Resources for unseen content are never fetched.
- Lower bandwidth and CDN cost.
Designing for the wait
Because a lazy resource arrives after a trigger, you must handle the gap with loading placeholders or skeletons. Prefetching likely-needed chunks during idle time hides the delay for common paths.
Lazy loading in CI/CD
Lazy code loading depends on the build producing separate chunks, so the pipeline emits and uploads each lazily loaded chunk content-hashed for caching. A bundle analysis step in CI can confirm heavy features actually landed in their own chunks rather than the main bundle.
Key takeaways
- Lazy loading defers code, images, or data until they are needed.
- It relies on splittable chunks and native browser image lazy loading.
- A CI bundle analysis confirms heavy features stayed out of the initial bundle.