Lazy Loading SEO: Do It Without Hiding Content
Lazy loading speeds pages up, but a faulty setup can keep content hidden from Google. This guide explains Google’s rule that everything must load when it enters the viewport, which techniques are safe, what not to lazy-load, how to handle infinite scroll, and how to test it.
- Viewport loading rule
- Safe techniques
- Infinite scroll URLs
- Test with URL Inspection
enters viewport -> content loads needs click or scroll -> Google may never see it
Make sure all relevant content loads once it becomes visible in the viewport, using browser-native lazy loading, IntersectionObserver (with a polyfill) or a viewport-based library. Loading must not depend on user actions, because Google Search does not interact with your page. Do not lazy-load content users see on arrival. For infinite scroll, give each chunk a unique persistent URL, link them sequentially and update the address bar with the History API.
The risk
Lazy loading is a common performance and user experience practice, but a faulty setup can hide content from Google. Because Google Search does not scroll or click through your page, content gated behind a scroll or click event may never be seen.
Safe techniques named by Google
| Technique | Notes |
|---|---|
| Built-in browser lazy loading | For images and iframes |
| IntersectionObserver API | Use a polyfill for older browsers |
| JavaScript library | One that loads content when it enters the viewport |
<img src="photo.jpg" loading="lazy" width="800" height="600" alt="...">
The snippet is my own illustration of browser-native lazy loading. Setting width and height also helps avoid layout shift (my own note; see CLS).
What not to lazy-load
- Do not lazy-load content users see immediately on arrival; it delays display and is noticeable (Google).
- The main hero image that is often the LCP element is a likely case (my own application of that rule). See LCP.
- Do not make loading depend on a user action such as scroll or click.
Infinite scroll and pagination
See pagination SEO and JavaScript SEO basics.
How to test
- Use the URL Inspection tool to confirm all content loads.
- Check the rendered HTML for your content.
- Confirm image and video URLs appear in the
srcattributes of img and video elements in the rendered HTML.
Set up lazy loading step by step
List below-the-fold images
Only those not visible on arrival.
Exclude the hero image
Load it normally.
Apply native lazy loading
loading=lazy on images and iframes.
Set dimensions
Width and height to avoid shifts.
Inspect rendered HTML
All image src values present.
Check Core Web Vitals
Confirm no regressions.
Performance notes
Google’s page frames lazy loading as a performance practice. Over-lazy loading can hurt LCP, so keep above-the-fold images eager (my own note). See image SEO and Core Web Vitals for WordPress.
Notes for WordPress sites
- WordPress adds loading=lazy by default to many images (my own note); check that the hero image is not affected.
- Optimisation plugins may replace src with data attributes; verify the rendered HTML still has real src values.
- Sliders and tabs that load content only on interaction need review.
Troubleshooting
| Symptom | Likely cause (my own diagnosis) | Action |
|---|---|---|
| Images missing in Google Images | src not in rendered HTML | Fix loader or use native lazy loading |
| Content below fold not indexed | Loads only on scroll event | Load on viewport entry |
| Slow LCP | Hero image lazy-loaded | Load it eagerly |
| Infinite scroll items unreachable | No chunk URLs | Add paginated URLs |
Checklist
Rules
- Loads on viewport entry
- No click gating
- No scroll-event gating
- Hero loads eagerly
Images
- Real src in rendered HTML
- Width and height set
- Alt text present
- Native lazy loading
Infinite scroll
- Unique chunk URLs
- Sequential links
- Stable content
- History API updates
Test
- URL Inspection
- Rendered HTML
- CWV after change
- Recheck after plugins
What Google’s page does not say
It does not give a scripted test, noscript fallbacks, structured data or image sitemap guidance, viewport sizes or timing thresholds, specific library recommendations, or lazy-loading advice for content other than images, iframes and video.
Key terms
- Lazy loading
- Loading content only when needed.
- Viewport
- The visible part of the page.
- IntersectionObserver
- Browser API detecting visibility.
- History API
- Updates the URL without reload.
Common mistakes
Click-gated content
Google does not click.
Lazy-loading the hero
Delays display.
Missing src in HTML
Images not seen.
Infinite scroll without URLs
Content unreachable.
Relative page filters
Unstable content.
Not testing
Hidden issues.
Related guides
Lazy loading questions
Does lazy loading hurt SEO?
Only when set up so content does not load without user action.
Which methods are fine?
Browser built-in lazy loading, IntersectionObserver with a polyfill, or a viewport-based library.
Does Google scroll?
Google Search does not interact with your page.
What should I not lazy-load?
Content users see immediately on arrival.
How do I do infinite scroll safely?
Use unique chunk URLs, link them sequentially and update the address bar with the History API.
How do I test?
URL Inspection and rendered HTML; confirm image URLs are in src attributes.
Can I use page filters like yesterday?
No. Use absolute page numbers.
Does Google cover noscript?
Not on the page I used.
The viewport rule, techniques, infinite scroll guidance and tests come from Google’s page. The hero-image application, code sample, WordPress notes, troubleshooting and checklists are my own.