SEO indexing fails with lazy load images using Intersection Observer API

0 votes

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?

Puppeteer results screenshot

Mar 5 in Digital Marketing by Kichu
• 16,850 points
31 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Digital Marketing

0 votes
0 answers

Setting a Custom SEO Title Using Yoast Wordpress SEO API

I've just installed this plugin on my ...READ MORE

Mar 10 in Digital Marketing by Kichu
• 16,850 points
50 views
0 votes
1 answer
0 votes
1 answer

How to over-ride meta data in Wordpress, using Squirrly SEO

if (is_archive()){ add_filter('sq_title', 'filter_product_wpseo_metadesc'); function filter_product_wpseo_metadesc($wpseo_metadesc){ ...READ MORE

answered Mar 1 in Digital Marketing by narikkadan
• 7,860 points
37 views
0 votes
0 answers

nginx clean url with seo friendly file names

I wish to implement the following which ...READ MORE

Mar 2 in Digital Marketing by Kichu
• 16,850 points
40 views
0 votes
0 answers

How to over-ride meta data in Wordpress, using Squirrly SEO

I currently have a Wordpress website using ...READ MORE

Mar 4 in Digital Marketing by Kichu
• 16,850 points
14 views
0 votes
0 answers

Reactjs fetch data from API and google SEO problem

My website create with ReactJS and all ...READ MORE

Mar 4 in Digital Marketing by Kichu
• 16,850 points
24 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,680 points
1,696 views
0 votes
1 answer

Error:setState doesn't update the state immediately

Hello @kartik, The method setState() takes a callback. And ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,680 points
3,774 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,680 points
325 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP