Lazy Loading

Q: Does lazy loading hurt SEO?

Not when it is done properly. Search engines handle native loading="lazy" images well; problems arise when content appears only after clicks or custom scroll events that crawlers don't perform.

Updated September 30, 20262 min read

In short

Lazy loading is a technique that delays loading images, videos, scripts or other resources until they are actually needed, usually when they scroll into view.

What is lazy loading?

Lazy loading means not loading something until the moment it is needed. On a web page, images and embedded videos far below the fold, the part visible without scrolling, are fetched only when the user scrolls near them instead of all at once when the page opens. The initial load becomes smaller and faster, and visitors who never scroll that far never download those files.

For images and iframes, browsers support lazy loading natively: add loading="lazy" to an <img> or <iframe>, and the browser decides when to fetch it based on its distance from the viewport. For custom behavior, the IntersectionObserver API tells your script when an element enters or approaches the viewport. For JavaScript, lazy loading uses dynamic import(), so a module is fetched only when a feature is first used. Lazy images should have width and height set, so the browser reserves space and the layout doesn't jump when they arrive.

Lazy loading is like a restaurant that cooks each course when you're ready for it, instead of putting the whole meal on the table the moment you sit down. It is widely used for image galleries, long feeds, product listings, embedded maps and videos, comment sections, and rarely used app features. The same idea appears in ORMs, which can load related database records only when code first accesses them.

A common mistake is lazy loading the main image at the top of the page, which is often the Largest Contentful Paint element; that delays the most important content, so above-the-fold images should load right away, sometimes with fetchpriority="high". Lazy loading is also different from code splitting: code splitting divides JavaScript into separate files at build time, while lazy loading is the runtime decision of when to fetch a file.

Key takeaways

Lazy loading defers fetching a resource until it is needed.
loading="lazy" on images and iframes enables native browser lazy loading.
IntersectionObserver and dynamic import() cover custom and JavaScript cases.
Never lazy load above-the-fold content such as the main hero image.
Set image dimensions to prevent layout shifts when lazy images appear.

Example

Native lazy loading for images and iframeshtml

<!-- Main image at the top: load it right away, with high priority -->
<img src="hero.jpg" alt="Product photo" width="1200" height="600" fetchpriority="high">

<!-- Below the fold: fetched only when the user scrolls near them -->
<img src="gallery-1.jpg" alt="Side view" width="600" height="400" loading="lazy">
<img src="gallery-2.jpg" alt="Back view" width="600" height="400" loading="lazy">
<iframe src="https://maps.example.com/embed?place=store" title="Store location map"
        width="600" height="400" loading="lazy"></iframe>

Readers ask

Does lazy loading hurt SEO?

Not when it is done properly. Search engines handle native loading="lazy" images well; problems arise when content appears only after clicks or custom scroll events that crawlers don't perform.

Should I lazy load all images?

No. Lazy load images below the fold, but load the ones visible on first screen immediately, especially the largest one, or the page will appear to load more slowly.

What is the difference between lazy loading and eager loading?

Eager loading fetches a resource right away, which is the browser's default, while lazy loading waits until it is needed. In ORMs, eager loading fetches related records up front, which avoids the N+1 query problem that lazy loading can cause.