SEO indexing fails with lazy load images using Intersection Observer API

Question

To improve my site performance I'm trying to lazy load images only when they are available to viewport and to make sure google bot index them.

I'm doing lazy loading as per below steps:

1. Created a component using Intersection Observer to lazy load images based on view port.
2. Added following Intersection observer polyfill to support lazy loading in all browsers
3. I've used <noscript> to load images in non lazy way in order for google bot to index images in a non supported JavaScript browsers.

So now I want to test this lazy load images to make sure SEO is not impacted. As Google recommended, I tested this change with Google's Puppeteer script to verify whether the lazy loaded images are properly indexed by GoogleBot. But when I run the script I get this failed response:

Lazy images loaded correctly: Failed
Found 160557 pixels differences.
Dimension image A: 300x719
Dimension image B: 300x719

I'm doing this exercise for the first time but I'm unable to find a way to fix why the script is failing.

Here are the things I am stuck on in particular:

1. Do I still need to worry about SEO indexing even after using Intersection observer API with polyfill?
2. Do we really need to load images inside <noscript> tag for google bot to index images in non supported JavaScript browsers?
3. I'm only lazy loading images but I don't have any place holder yet to display while the image is in loading state. Could this be a reason for Puppeteer script failure?
4. Is there anything else that I'm missing here and that's why the script is failing?

Edit

I also saw that Puppeteer script is waiting for certain amount of time let’s say 2000 to capture screenshots one without page scrolling and one after page scrolling. So if this is the case, then how can I load images within that time?

Answer 1

2. Do we really need to load images inside <noscript> tag for google bot to index images in non support javascript browsers?

I don't think it makes sense to support non-JS browsers in any circumstance, even with SEO. A lot of webpages need JavaScript to load and still don't use noscript.

3. I'm only lazy loading images but I don't have any place holder yet to display while the image is in loading state. Could this be a reason for pupeteer script failure?

It is hard to tell.

4. Is there anything else that i'm missing here and thats why the script is failing?

The best way to debug this is to take a screenshot using page.screenshot and see what is different.

Tips

• You generally shouldn't have to do this unless your images are huge. Try to keep the images in a proper format and not too large so they load quick.
• Maybe check these out: Images lazy loading with Intersection Observer API issue, Lazy load images not indexing in google