Lazy Loading
A technique that defers loading of non-critical resources (images, videos, components) until they are needed, improving initial page load time.
Detailed Explanation
Lazy loading delays the loading of resources until the user scrolls near them or interacts with them. Images below the fold are loaded only when scrolled into view. Components are loaded only when needed. This reduces the initial page weight and speeds up the first meaningful paint.
Implementation: native lazy loading (`loading="lazy"` attribute for images), intersection observer API, dynamic imports (JavaScript), and framework-specific solutions (React.lazy, Next.js Image). Lazy loading is one of the easiest and most impactful performance optimizations.
Why It Matters
Lazy loading dramatically improves initial page load time by deferring non-critical resources. It is one of the simplest and most impactful performance optimizations.
Real-World Example
A news website with 50 images per page uses lazy loading. Only the top 5 images load initially. As the user scrolls, images load just before becoming visible. Initial load time drops from 5 seconds to 1.5 seconds.
When to Use
For images below the fold, heavy components that may not be used, routes that may not be visited, and any resource that is not needed for the initial page render.
Advantages
- Faster initial page load
- Reduced bandwidth usage
- Better Core Web Vitals (LCP, FCP)
- Improved mobile experience
- Simple to implement
Disadvantages
- Images may not load if JavaScript is disabled
- Can cause layout shifts if dimensions are not set
- Scroll jank if loading is not smooth
- SEO considerations for important content
- Complex implementations can be buggy
Related Terms
Frequently Asked Questions
How do I implement lazy loading for images?
Use the native `loading="lazy"` attribute: `<img src="photo.jpg" loading="lazy" width="300" height="200">`. Always set width and height to prevent layout shifts.
Should I lazy load above-the-fold images?
No. Above-the-fold images should load immediately for good LCP. Only lazy load images that are below the fold or not visible on initial load.
How do I lazy load JavaScript components?
Use dynamic imports: `const Component = React.lazy(() => import("./Component"))`. The component code is loaded only when first rendered. Wrap with Suspense for a loading state.
Does lazy loading affect SEO?
Not if implemented correctly. Search engines can index lazy-loaded content. However, if content is critical for indexing (above-the-fold text), don't lazy load it. Googlebot renders pages with JavaScript.
What is the difference between lazy loading and code splitting?
Lazy loading delays resource loading (images, components). Code splitting breaks JavaScript bundles into smaller chunks loaded on demand. Both improve initial load time but address different resource types.