What is Lazy Loading? SEO Guide for Beginners

Learn what lazy loading means in SEO, why it matters, and how to use it to improve your site performance.

Lazy loading is a technique that defers the loading of non-critical resources, like images and iframes, until they are about to enter the user's viewport. MDN defines it as "a strategy to identify resources as non-blocking (non-critical) and load these only when needed," which shortens the critical rendering path and reduces page load times. Instead of downloading every image on a page the moment someone lands on it, lazy loading waits until the user scrolls near that content before fetching it. This reduces initial page load time, saves bandwidth, and delivers a faster experience to your visitors.

The simplest way to do this in modern browsers is the native loading attribute, which MDN documents on <img> and <iframe> elements. It accepts lazy (defer the resource until it is near the viewport) and eager (load it immediately, which is the default behavior). No JavaScript is required.

Why Lazy Loading Matters for SEO

Page speed is a confirmed Google ranking factor, and lazy loading is one of the most effective ways to improve it. When a page loads 30 images upfront but the user only sees the first 3 without scrolling, you are wasting bandwidth and slowing down the experience for nothing.

Lazy loading directly impacts your Core Web Vitals scores. The three Core Web Vitals each have a "good" threshold measured at the 75th percentile of page loads, per web.dev: Largest Contentful Paint (LCP) at 2.5 seconds or less, Interaction to Next Paint (INP) at 200 milliseconds or less, and Cumulative Layout Shift (CLS) at 0.1 or less. By reducing the amount of data the browser downloads during initial page load, lazy loading helps protect LCP and reduces strain on the main thread that affects INP.

I have seen blogs with image-heavy posts drop their page load time substantially just by adding native lazy loading to below-the-fold images. That kind of speed improvement can make the difference between ranking on page one and page two, especially on mobile where connections are slower.

The catch is discoverability. Google Search Central is explicit that lazy-loaded content can be hidden from Google if it is implemented wrong, so your implementation must "load all relevant content whenever it is visible in the viewport." Google recommends the browser built-in lazy loading, the IntersectionObserver API with a polyfill, or a JavaScript library that loads data when it enters the viewport. The reason matters: "Google Search does not interact with your page," so any approach that waits on a user scroll or click event can leave content unseen by Googlebot.

How Lazy Loading Works

Modern browsers support native lazy loading through the loading="lazy" attribute on <img> and <iframe> elements. When the browser encounters this attribute, it skips downloading that resource during the initial page load. Instead, it monitors the user's scroll position and triggers the download when the element is about to enter the viewport.

The browser uses an internal distance threshold to determine "about to enter the viewport." MDN does not publish a fixed pixel value for this distance, and it varies by browser and network conditions, but it is set far enough ahead that the resource typically finishes loading by the time the user scrolls to it. The result is that images start loading slightly before they become visible, so there is no blank gap where an image should be.

For more complex implementations, developers use the Intersection Observer API with JavaScript to control exactly when elements load. This approach gives you fine-grained control over thresholds, animations, and placeholder content. But for most sites, native lazy loading handles the job perfectly.

The key distinction is between above-the-fold and below-the-fold content. Above-the-fold content, the stuff visible without scrolling, should never be lazy loaded. You want that content to appear as fast as possible. Lazy loading only makes sense for content further down the page.

How to Improve Lazy Loading on Your Site

Add native lazy loading to all below-the-fold images - Simply add loading="lazy" to your <img> tags for any image that is not visible in the initial viewport. This is the quickest win with zero JavaScript required.
Never lazy load your LCP element - Your hero image or the largest visible element above the fold should load immediately. Adding lazy loading to this element will actually hurt your LCP score. Use loading="eager" or simply omit the loading attribute for hero images.
Set explicit width and height on images - Without defined dimensions, the browser cannot reserve space for lazy-loaded images before they load. This causes Cumulative Layout Shift (CLS) as content jumps around when images finally appear. Always specify width and height attributes.

Use placeholder content while images load - Show a low-quality image placeholder (LQIP), a solid color block, or a blurred thumbnail in place of the full image. This gives users a visual cue that content is coming and prevents empty gaps on the page.

Lazy load iframes and embedded videos - YouTube embeds, maps, and third-party widgets are often heavier than images. Adding loading="lazy" to iframes prevents them from consuming bandwidth until the user actually scrolls to them.

Common Mistakes to Avoid

Lazy loading above-the-fold images: This is the most common mistake and it directly hurts your LCP score. The hero image, logo, and any images visible without scrolling should always load eagerly. Only defer images that are below the fold.
Not providing image dimensions: When you lazy load without width and height attributes, the browser does not know how much space to reserve. As images load in, they push content around, causing layout shifts that hurt your CLS score and frustrate users.
Using JavaScript-only lazy loading without a fallback: If you rely purely on JavaScript-based lazy loading and the script fails to load or is blocked, users see nothing. Native lazy loading with loading="lazy" works without JavaScript and should be your default approach.

Key Takeaways

Lazy loading defers non-critical resources until the user scrolls near them, significantly improving page load speed.
Use native loading="lazy" on below-the-fold images and iframes for the simplest implementation.
Never lazy load your hero image or any above-the-fold content, as this hurts LCP scores.
Always pair lazy loading with explicit image dimensions to prevent layout shifts and protect your CLS score.

In Practice

Consider a long blog post with one hero image and a gallery of photos further down. The hero is your LCP element and must load immediately, while the gallery is below the fold and can wait. Setting explicit width and height lets the browser reserve space, so deferred images do not push content around and inflate CLS.

<!-- Above the fold: the LCP hero, loaded eagerly -->
<img
  src="/images/hero.webp"
  alt="Field of lavender at sunrise"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high"
/>

<!-- Below the fold: gallery images and a video embed, deferred -->
<img
  src="/images/gallery-01.webp"
  alt="Close-up of a single lavender stem"
  width="800"
  height="600"
  loading="lazy"
/>

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="How lavender is harvested"
  width="560"
  height="315"
  loading="lazy"
></iframe>

To confirm the deferred content is still discoverable, run the page through the URL Inspection Tool in Search Console and check that each image and video URL appears in the src attribute of the rendered HTML, as Google Search Central recommends. If a deferred image is missing from the rendered output, your trigger relies on a scroll or click event that Googlebot never fires, and you should switch to native loading="lazy" or an IntersectionObserver implementation instead.

What Are Core Web Vitals? - The page experience metrics that lazy loading helps you protect.
What is LCP? - Largest Contentful Paint, the metric most easily broken by lazy loading the wrong element.
What is CLS? - Cumulative Layout Shift, which explicit image dimensions keep in check.
What is Page Speed? - The broader performance picture lazy loading contributes to.
What is Image SEO? - How images earn search visibility while still loading fast.