Lazy Loading

Lazy loading is a technique that delays loading images, videos, iframes or other content until a visitor scrolls close to them, instead of downloading everything when the page first opens. Done well, it makes pages faster; done badly, it can hide content from search engines or slow the main image.

Written by Paul Hoda, SEO consultant since 2005. Last updated 8 November 2026.

How lazy loading works

Modern browsers support native lazy loading through a simple attribute: loading="lazy" on an <img> or <iframe> tag. The browser then waits until the element is near the viewport before fetching it. Older approaches use JavaScript, often with the Intersection Observer API, to swap in the real image source as the user scrolls. Native lazy loading is simpler and is the default in WordPress for most images.

Why it matters for SEO

Lazy loading reduces the amount of data a page downloads up front, which can improve page speed and save bandwidth on mobile.

That supports a better user experience and healthier Core Web Vitals.

The risk is that Googlebot does not scroll like a person. Google has said it renders pages with a tall viewport rather than scrolling, so content that only loads after a scroll event or a click may never be seen and therefore never indexed.

How to lazy load safely

  1. Prefer native loading="lazy" or an Intersection Observer approach, which Google supports.
  2. Never lazy load the main image at the top of the page. It is often the Largest Contentful Paint element, and delaying it makes LCP worse.
  3. Set width and height attributes so the browser reserves space, avoiding layout shift when images arrive.
  4. Keep the real image URL in the src or srcset attribute rather than hiding it in a custom data attribute that only JavaScript understands.
  5. Write descriptive alt text as usual, because lazy loading does not change how images are understood.
  6. Test with the URL Inspection tool in Search Console and check the rendered HTML includes your lazy loaded images and text.

Lazy loading beyond images

Video embeds and maps are good candidates, since they pull in heavy third-party code. A common pattern is to show a lightweight preview image and load the full player only when clicked. Be more careful with text content, comments or product listings. If they load only after interaction, search engines may miss them. Lists that grow as you scroll should also offer paginated links, as explained under infinite scroll.

Common mistakes

  • Lazy loading every image, including the logo and hero image.
  • Relying on scroll events that Googlebot never triggers.
  • Using placeholder images without dimensions, causing layout jumps.
  • Stacking a plugin’s lazy loading on top of the browser’s native version.
  • Lazy loading images in the first screen of a slider or gallery, which visitors see straight away.
  • Hiding important text behind a load more button with no crawlable link to the full content.

Further reading: web.dev on browser-level lazy loading.

Key Takeaways

  • Lazy loading delays offscreen media until a visitor scrolls near it.
  • Native loading=lazy is the simplest and most search-friendly method.
  • Never lazy load the main above-the-fold image, as it hurts LCP.
  • Googlebot does not scroll, so content must not depend on scroll events.
  • Check rendered HTML in Search Console to confirm content is visible.

Related Terms

Wondering what to fix first on your site? Get a free check of your site’s SEO, or keep learning in the SEO Encyclopedia.