Thread by @noelcetaSEO

Added lazy loading to all images.

PageSpeed score went from 65 to 92.
Should be great for SEO, right?

Wrong.

Traffic dropped 20%.

LCP (Largest Contentful Paint) went from 1.8s to 4.2s.

The problem? Lazy loaded the hero image.

Here's how to lazy load without killing SEO: 🧵👇

1/ What lazy loading actually does

Lazy loading delays image loading until needed.

Normal loading:

- Browser loads all images immediately
- Slow page load
- Wastes bandwidth

Lazy loading:

- Browser loads visible images only
- Fast initial load
- Loads more as user scrolls

The trap:

- Lazy load EVERYTHING = breaks Core Web Vitals
- LCP image must load immediately

2/ The LCP image rule

LCP = Largest Contentful Paint (biggest visible element).

Usually:

- Hero image
- Header image
- Featured product image
- Banner

Critical rule:
NEVER lazy load the LCP image.

Client's mistake:

html

`
`

Should be:

html

`
`

3/ The correct implementation

Lazy load images below the fold:

html

`




`

Rule of thumb:

- First 1-2 images: eager (or default)
- Everything else: lazy

Client fix:

- Hero image: eager
- First 3 product images: eager
- Remaining 47 images: lazy

LCP: 1.1s
Traffic recovered within 3 weeks.

4/ The hidden content problem

Lazy loading hidden content = SEO disaster.

Bad pattern:

- Accordion/tabs with lazy loaded content
- Content not in initial HTML
- Google may not see it

Example (wrong):

javascript

`// Load content when tab clicked
$('.tab').click(function() {
$.ajax({url: 'content.html', success: function(data) {
$('.content').html(data);
}});
});`

Google sees empty container.

Fix:
Put content in HTML, hide with CSS.

5/ The JavaScript library pitfall

Many lazy loading libraries are too aggressive.

Common libraries:

- lazysizes
- vanilla-lazyload
- loading="lazy" (native)

Native is best:

html

``

Browser-level support.
No JavaScript needed.
Smart loading strategy.

But remember: Not for LCP images.

Client switched from lazysizes to native.
Simpler. Faster. Better.

6/ Testing lazy loading

Chrome DevTools:

- Performance tab
- Record page load
- Check LCP timing
- Should be <2.5s

PageSpeed Insights:

- Test mobile and desktop
- Check LCP specifically
- Should be green

Real device testing:

- Test on slow 3G
- First image must appear quickly

Client test results:

- Before fix: LCP 4.2s (red)
- After fix: LCP 1.1s (green)

Lazy loading checklist:

✅ DO lazy load images below the fold
✅ DO use native loading="lazy"
✅ DO test LCP after implementation
✅ DO keep content in HTML (not lazy loaded)

❌ DON'T lazy load hero images
❌ DON'T lazy load above-the-fold content
❌ DON'T lazy load critical images
❌ DON'T use aggressive JavaScript libraries

Lazy loading = good for SEO.
Bad implementation = disaster.