Lazy loading and SEO: what to defer and what not to
Lazy loading speeds up pages, but used in the wrong place it hurts LCP and hides content from crawlers. Here is where to use it and where to avoid it.
Lazy loading is one of the easiest speed wins on the web. It is also one of the easiest ways to slow down your most important image and hide content from crawlers. The technique is fine. The mistakes come from applying it everywhere.
What lazy loading actually does
Lazy loading delays a resource until it is likely to be needed. For images and iframes, the browser skips the download until the element is near the viewport. This saves bandwidth and lets the browser spend its early effort on what the visitor sees first.
Modern browsers support this natively with the loading attribute set to lazy. You do not need a JavaScript library for basic cases. Native support is simpler, easier to audit, and less likely to break when a script fails.
The mistake that hurts LCP
The most common problem is lazy loading the largest image on the page. That image is usually your Largest Contentful Paint element. If you mark it lazy, the browser waits to discover it is in view before fetching it. The result is a slower LCP, often by a noticeable margin.
Many themes and plugins add lazy loading to every image by default. That includes the hero image. Check your own templates rather than assuming the default is safe.
- Do not lazy load the hero image, the main product photo, or any image above the fold.
- Add fetchpriority set to high on your LCP image so the browser fetches it early.
- Lazy load images that start below the first screen, such as galleries, related items, and footer logos.
- Test on mobile. The fold sits much higher on a phone, so fewer images count as above it.
How crawlers handle lazy loaded content
Googlebot does not scroll like a person. It renders pages with a very tall viewport, so content that loads when it enters the viewport generally loads for the crawler too. Native lazy loading and a correctly built IntersectionObserver both work with this.
Problems start when content only loads after a user action, such as a scroll event handler, a click, or a swipe. A crawler will not trigger those. If a product list or a block of text depends on one, it may never be seen.
Other crawlers are less certain. Several AI crawlers have been reported to fetch raw HTML without running scripts, and their behavior is not well documented. Treat anything that needs JavaScript to appear as at risk for AI engines. Our guide on AI crawlers and JavaScript rendering covers this in more depth.
Keep the real image URL in the markup
Some older lazy loading scripts put the real URL in a data attribute and leave a placeholder in src. Crawlers may not pick up the image from there, and it may not show in image search. Use a real src or srcset on the img element and let the browser handle the delay.
Do not trade speed for layout shift
A lazy loaded image with no reserved space pushes content down when it arrives. That hurts Cumulative Layout Shift. Always set width and height attributes, or use a CSS aspect ratio, so the browser holds the space before the file loads.
The same goes for embedded videos and maps. A lazy loaded iframe needs a fixed size. A common pattern for video is to show a static preview image and load the player only on click. That works well for speed, but make sure the page still has a text description and a transcript that crawlers can read.
How to audit your pages
- Open a key template in Chrome DevTools and find the LCP element in the Performance panel.
- Check whether that element has loading set to lazy. Remove it if so.
- View the page source. Confirm that images and text you want indexed appear in the HTML or in the rendered DOM without any user action.
- Use the URL Inspection tool in Search Console and look at the rendered HTML to confirm below-the-fold images are present.
- Run a field data check after the change. Lab tests can look fine while real users on slow phones still struggle.
The takeaway
Lazy load what sits below the first screen. Load the top of the page eagerly and mark your LCP image as high priority. Keep real image URLs in the markup, reserve space for everything, and never hide content behind a scroll or click handler. This week, check one template and see whether its hero image is marked lazy. It is a five minute fix with a measurable effect.