Lazy Loading
A performance technique that defers loading of non-critical resources — images, iframes, and components below the fold — until they're actually needed as the user scrolls toward them.
Simple Explanation
Lazy loading means 'don't download this until the user actually needs it.' When a page has 20 images, lazy loading tells the browser: only download the images the user can currently see — wait to download the rest until the user scrolls down to them. This dramatically reduces the initial page load time because the browser doesn't have to download all 20 images at once. For SEO, lazy loading helps improve Core Web Vitals by reducing the work needed to render the visible portion of your page. The catch: never lazy load the image Google sees first (your LCP element) — that makes things slower, not faster.
Advanced SEO Explanation
Native lazy loading is implemented with loading='lazy' on <img> and <iframe> elements — natively supported in all modern browsers since 2020. The browser uses Intersection Observer API internally to detect when elements approach the viewport and then fetches the resource. For SEO, lazy loading has two critical considerations: (1) Never apply loading='lazy' to the LCP element — this is the most common lazy loading mistake and directly causes poor LCP scores. (2) Ensure lazy-loaded images have src and srcset in the HTML source, not just dynamically injected — Googlebot must be able to discover and index images in the initial HTML. Lazy loading iframes (especially YouTube embeds) provides significant page weight savings. Facade patterns replace heavy third-party iframes (chat widgets, video players) with a lightweight placeholder that only loads the full embed when the user interacts with it.
Why Lazy Loading Matters for Rankings
Reduces initial page weight dramatically
Pages with many below-fold images can be 60–80% lighter on initial load with lazy loading. This directly improves LCP for the visible content.
Improves Core Web Vitals and perceived speed
Fewer resources competing for bandwidth during initial load means critical resources (LCP image, critical CSS) load faster.
Reduces bandwidth costs for users
Mobile users on limited data plans don't download images they never scroll to. This improves user experience and reduces abandonment on slow connections.
Required for Googlebot image discovery
Googlebot discovers lazy-loaded images if they're in the HTML source. JavaScript-injected images that replace empty src attributes may not be indexed.
Real-World SEO Examples
Native lazy loading implementation
The simplest implementation — one HTML attribute.
Code Example
<!-- LCP element: NEVER lazy load -->
<img
src="hero.webp"
alt="Hero image"
width="1200"
height="630"
fetchpriority="high"
>
<!-- No loading attribute = eager loading (correct for LCP) -->
<!-- Below-fold images: ALWAYS lazy load -->
<img
src="product-1.webp"
alt="Product photo"
width="400"
height="400"
loading="lazy"
>
<!-- Lazy load iframes (YouTube, maps) -->
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
loading="lazy"
width="560"
height="315"
></iframe>Common Lazy Loading Mistakes
✗ Mistake
Applying loading='lazy' to the LCP image
✓ The Fix
The LCP element must load eagerly (no loading attribute). Add loading='lazy' only to below-fold images. Use fetchpriority='high' on the LCP image to prioritize it.
✗ Mistake
Using JavaScript lazy loading that replaces src with data-src
✓ The Fix
Googlebot may not execute JavaScript that injects the real src attribute. Always use native loading='lazy' with real src/srcset values in HTML.
✗ Mistake
Lazy loading images just below the fold
✓ The Fix
Lazy loading triggers too late for images near the bottom of the viewport, causing visible loading delay as users scroll. Set a generous rootMargin (200–400px) to pre-load images before they enter the viewport.
Free Tools for Lazy Loading
Related Articles
Lazy Loading FAQs
Frequently Asked Questions
People Also Search For
Continue Learning: Next Terms
Largest Contentful Paint
A Core Web Vital measuring how long it takes for the largest visible content element — typically a hero image or main heading — to render in the viewport after page load begins.
Intermediate⚙️Core Web Vitals
Google's standardized page experience metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — used as ranking signals and user experience benchmarks.
Intermediate⚙️Render-Blocking Resources
CSS and JavaScript files that prevent the browser from rendering visible page content until they are fully downloaded and processed — a primary cause of poor LCP and slow perceived page speed.
Advanced⚙️Page Speed
A broad measure of how quickly a web page loads and becomes interactive, encompassing multiple metrics including Core Web Vitals, Time to First Byte, and First Contentful Paint — a confirmed Google ranking factor.
Beginner