Lazy loading delays loading resources until they're actually needed, typically when they're about to scroll into view. This reduces initial page load time and saves bandwidth.
What to lazy load
- Images: Load when entering viewport
- Videos: Load when user interacts
- Iframes: Load when visible
- JavaScript: Load on demand (code splitting)
Native lazy loading
Modern browsers support native lazy loading for images and iframes:
<img src="image.jpg" loading="lazy" alt="Description">
<iframe src="video.html" loading="lazy"></iframe>
loading attribute values
lazy: Defer loading until near viewporteager: Load immediately (default)
Lazy loading and LCP
Important: Don't lazy load your LCP element! The largest contentful paint should load as quickly as possible. Lazy loading is for below-the-fold content.
Best practices
- Don't lazy load above-the-fold images
- Provide width and height to prevent CLS
- Use a low-quality placeholder (LQIP)
- Consider using
fetchpriority="high"for critical images
Related Terms
Code Splitting
A technique that breaks JavaScript bundles into smaller chunks that can be loaded on demand, improving initial page load performance.
First Contentful Paint (FCP)
A performance metric that measures the time from when the page starts loading to when any part of the page's content is rendered on screen.
Image Optimization
The process of reducing image file sizes and improving delivery to enhance web performance without significantly affecting visual quality.
Largest Contentful Paint (LCP)
A Core Web Vital that measures how long it takes for the largest content element visible in the viewport to render.