Lazy Loading and SEO: 7 Mistakes That Hurt Rankings and Speed

Does lazy loading hurt SEO?

No, lazy loading does not hurt SEO when it is done with standard browser features and applied only to content below the first screen. It hurts when it is applied to everything, when it depends on the user scrolling or clicking, or when images have no reserved space. The technique is sound. The common implementations are the problem.

If you want the basics first, read our explainer on what lazy loading is. This article assumes you know the idea and want to get it right.

The correct baseline

For most sites the right approach is the browser's built-in lazy loading: add loading="lazy" to images and iframes that sit below the first screen, and leave everything in the first screen alone. No script is needed, and every current major browser supports it.

A correct below-the-fold image looks like this:

<img src="team.jpg" alt="Our support team at work" width="800" height="533" loading="lazy">

And the main image at the top of the page looks like this:

<img src="hero.jpg" alt="Product dashboard on a laptop" width="1200" height="675" fetchpriority="high">

The two differences matter. The top image has no loading="lazy", and it carries fetchpriority="high" to tell the browser it is important. Both images have width and height so the browser reserves the right space before the file arrives.

The seven mistakes

Each of these is easy to check and usually quick to fix.

1. Lazy loading the main image. The largest image in the first screen is usually your Largest Contentful Paint element, one of the Core Web Vitals. Lazy loading it tells the browser to wait, which makes that score worse. Many plugins and themes lazy load every image by default, including this one. Fix: exclude the first screen's images, often a setting such as "skip the first N images".
2. No width and height. Without dimensions, the page jumps as each lazy image arrives, which harms Cumulative Layout Shift and annoys readers. Fix: set width and height attributes, or use the CSS aspect-ratio property on the container.
3. Content that loads only on scroll or click. Googlebot does not scroll or click the way a person does. It renders the page with a very tall viewport and looks at what appears. If your script waits for a scroll event, the content may never load for the crawler. Fix: use native lazy loading or the IntersectionObserver API, both of which work when an element enters the viewport without any scrolling event.
4. The real image URL is hidden in a data attribute. Older lazy load scripts put a placeholder in src and the true file in data-src. If the script fails or is not run, there is no image for anyone, including image search. Fix: move to native lazy loading. If you must keep a script, make sure the rendered HTML ends up with a real src.
5. Infinite scroll with no paginated URLs. If older articles or products appear only when a visitor keeps scrolling, a crawler may see only the first batch. Fix: give each batch its own URL (for example ?page=2), link to those pages with normal links, and update the address as the visitor scrolls.
6. Lazy loading text and links. Reviews, FAQs, related products and internal links loaded late by script are content you want indexed. Fix: put text and links in the initial HTML, and lazy load only the heavy media around them.
7. CSS background images treated like content. The loading attribute does not apply to CSS backgrounds, and search engines do not index background images as images. Fix: if an image matters, such as a product photo, use an img element with alt text. Keep backgrounds for decoration.

A related problem is stacking two systems. A content management system adds native lazy loading, a performance plugin adds its own script, and a theme adds a third. They conflict, and images flicker or fail. Pick one method and turn the others off.

What to lazy load and what not to

Use this table as a quick rule for each type of content on a page.

How to test your own pages

You can check all seven mistakes in about fifteen minutes with free tools.

1. View the page source and find your main image. If it has loading="lazy", that is mistake 1. If images lack width and height, that is mistake 2.
2. Run a Lighthouse or PageSpeed Insights test. It names the Largest Contentful Paint element and warns when that element was lazy loaded. It also lists layout shifts and their causes.
3. Use the URL Inspection tool in Google Search Console. Run a live test and open the rendered HTML and screenshot. If images, text or links are missing from what Google rendered, you have mistake 3, 4 or 6.
4. Turn off JavaScript in your browser and reload. Native lazy loading is switched off by browsers when scripting is disabled, so images should all load. If they vanish, the site depends on a script to show them.
5. Open the network panel in developer tools, filter by images, and reload without scrolling. Below-the-fold images should not appear in the list until you scroll toward them.

Lazy loading is one piece of a fast page. Image formats, compression, caching and a content delivery network matter as much. Our guide to website speed optimization covers the rest, and what a CDN is explains the delivery side.

Next step

Run the five tests on your three most important pages: the home page, your top landing page and a typical product or article page. If the results point to theme or plugin defaults you cannot change, or to a front end that renders key content late, that is the sort of problem we fix. See our frontend development service or send us the page addresses through the contact page and we will tell you what we find.