Lazy loading is a web performance technique that delays loading non-critical resources — images, videos, iframes — until they are about to enter the user's viewport. Instead of downloading everything on page load, the browser fetches below-the-fold media only when needed. This reduces initial page weight, lowers bandwidth usage, and improves Largest Contentful Paint and overall page speed scores.
Lazy loading is one of the easiest performance wins available — a single HTML attribute can cut initial page weight by 40–60% on image-heavy pages. The catch: apply it to the wrong element and you'll tank your LCP score.
What is lazy loading?
When a browser loads a page, it normally downloads every resource referenced in the HTML — images, videos, iframes — regardless of whether the user ever scrolls to them. On a blog post with 20 images, that means downloading 19 images the user may never see.
Lazy loading changes that default. The browser places a lightweight placeholder where each below-the-fold element will appear. As the user scrolls, the Intersection Observer API detects when the element is about to enter the viewport and triggers the actual download.
Modern browsers support lazy loading natively through the loading attribute — no JavaScript library required.
The loading="lazy" attribute is supported in Chrome, Firefox, Edge, Safari, and Opera — covering 96%+ of global browser share. You rarely need a JavaScript library for basic image lazy loading in 2026.
How lazy loading works
Three values control the loading attribute on img and iframe elements:
loading="lazy"— defers loading until the element approaches the viewportloading="eager"— loads immediately, regardless of position (use for above-the-fold content)loading="auto"— lets the browser decide; behaviour varies by implementation
<img src="photo.webp" alt="Description"
loading="lazy"
width="800" height="600">
<img src="hero.webp" alt="Hero"
loading="eager"
width="1200" height="600">
What should be lazy loaded?
| Resource type | Lazy load? | Notes |
|---|---|---|
| Below-the-fold images | Yes | Default candidate — biggest wins here |
| Above-the-fold images | No | Load immediately to protect LCP |
| Below-the-fold videos | Yes | Heavy files; biggest bandwidth savings |
| Embedded iframes (maps, widgets) | Yes | Third-party iframes often block rendering |
| Hero images | Never | This is almost always your LCP element |
| Comments sections | Often | Load when user scrolls to comments |
| Logo / navigation images | No | Above the fold; must be immediate |
How lazy loading affects SEO
When implemented correctly, lazy loading has a net positive effect on SEO. Here is how it interacts with each major signal:
Largest Contentful Paint (LCP)
Lazy loading reduces initial page weight, which helps LCP — but only if you are not lazy loading the LCP element itself. Lazy loading the hero image is one of the most common LCP killers. Always use loading="eager" or no attribute on above-the-fold images.
Cumulative Layout Shift (CLS)
Lazy-loaded images without explicit dimensions cause layout shifts when they load. The placeholder collapses and then expands, pushing content below it. Always set width and height attributes, or use CSS aspect-ratio to reserve space.
Interaction to Next Paint (INP)
By reducing main-thread work during initial load, lazy loading can improve page interactivity. However, heavy JavaScript-based lazy loading libraries can themselves block the main thread — another reason to prefer the native loading attribute.
Lazy loading vs. eager loading — when to use each
Use lazy loading when
- Images start below the initial viewport
- You have 5+ images on a page
- Serving content to mobile users on metered connections
- Long-form articles with images throughout
- Image gallery or portfolio pages
Use eager loading when
- The image is the LCP element (hero, banner)
- The image is above the fold on all devices
- Logo, navigation icons, or header images
- Critical brand images on landing pages
- Images in the top 20% of the page
7 best practices for lazy loading
- Use the native loading attribute. Add
loading="lazy"toimgandiframeelements below the fold. No library needed for modern browsers. - Always include width and height. Without explicit dimensions, the browser doesn't reserve space for the placeholder, causing layout shifts that hurt CLS.
- Never lazy load the LCP element. Your hero image, product photo, or large headline is almost certainly your LCP element. Lazy loading it will tank your Core Web Vitals score.
- Use eager loading explicitly on critical images. Don't rely on omitting the loading attribute — use
loading="eager"on above-the-fold images to make intent explicit. - Reserve space with CSS aspect-ratio. For images where exact dimensions aren't fixed, use
aspect-ratio: 16/9in CSS to prevent layout shifts. - Test with PageSpeed Insights and Chrome DevTools. After implementing, verify LCP is not delayed and CLS has not increased.
- Ensure content is in the HTML source. Critical content that must be discoverable by Googlebot should not depend on user interaction to load.
Applying loading="lazy" to your hero image or banner is one of the fastest ways to create a "Poor" LCP score. The browser deliberately delays fetching the image, which can push LCP out by 500ms to 2 seconds. Audit every instance of loading="lazy" on your page and confirm none of them apply to the first visible image.
Common lazy loading mistakes to avoid
- Lazy loading the hero image — directly delays LCP by design; this is the most common mistake.
- Missing image dimensions — images without
widthandheightcause layout shifts that hurt CLS. - Heavy JavaScript lazy loading libraries — libraries like Lazysizes add unnecessary JS weight. The native attribute is simpler and faster in 2026.
- Hiding content from Googlebot — some JavaScript-based implementations load content only on user interaction; Googlebot may not trigger those interactions. Use native lazy loading to ensure crawlability.
- Not testing on slow mobile connections — lazy loading interacts differently on 3G versus WiFi. Test in Chrome DevTools with network throttling enabled.
Frequently asked questions
Yes. Googlebot processes lazy-loaded content, especially when using native browser lazy loading. For JavaScript-based solutions, ensure image URLs are present in the HTML source or accessible via the rendered DOM.
No. Only below-the-fold images should be lazy loaded. Above-the-fold images — especially the LCP element — must load immediately to support LCP and user experience.
Yes, when implemented correctly. It improves page speed and Core Web Vitals scores. Poor implementation — such as lazy loading above-the-fold images — can harm LCP and CLS.
Eager loading is the opposite of lazy loading. It loads resources immediately when the page loads, regardless of whether they are currently visible. Use loading="eager" for above-the-fold and LCP images.
Add loading="lazy" to img and iframe elements. All modern browsers support this natively with no JavaScript required. Always include explicit width and height attributes to prevent layout shifts.
Related glossary terms
Sources
