Google Search Central Live: Images Lazy Loading Case Study

Last week I presented a live technical SEO case study at Google Search Central Live. It was very exciting and honourable to be invited to join these people I highly respect:

You can watch the recorded video here:

And in this post, I want to break down my case study into steps so that it’s easy to follow.

Debugging Images Lazy Loading Implemented with JavaScript

In this case study, I’m looking into an issue with lazy loaded images. But the steps I’m going to describe are pretty much universal for debugging any other JavaScript issue that can negatively affect your SEO efforts. Let’s go!

Step 1: Check basic on-page optimization

It’s the first step I usually make to quickly scan on-page SEO such as title tag, headings, images, etc. It gives an overview of where a page stands in terms of SEO.

I usually do it using the SEO pro extension.

Click to enlarge

Step 2: Inspect a page in a mobile mode

While the desktop version of the page looks good, all the images are in place, I also need to check the mobile version due to mobile-first indexing.

As I’m using Chrome, I just load the Inspect tool, choose the mobile view of a page and reload it. This helps me see how the page would load on a mobile device.

Ok, I see here that there’s something wrong with the images since they differ from the ones that I saw on the mobile:

And on the desktop:

There’s definitely something going on with the images URLs, so in the next step, I need to look closer at them.

---

JavaScript is one of the 24 Core SEO Skills that a successful SEO professional should have. Want to learn about the other 23? Get your free checklist ???

---

Step 3: Check the image URL in the <src> attribute

The fact that the images on desktop and mobile are different suggests to me that there must be something with their URLs. So I’m checking the image <src> in the mobile view:

Click to enlarge

Step 4: Go back to the desktop mode and check the images there

The next thing I do is checking the images URLs on desktop:

Click to enlarge

At this point, it’s clear that there’s some JavaScript code which swaps the images data-src and src correctly on on desktop but not on mobile.

<data-src> vs <src>

data-src is an attribute that stores additional information about an image. Google doesn’t follow a link stored this way.

src is an HTML attribute that shows the image location that Google follows.

All this means that Google sees only the image URL stored in <src> but not in <data-src>.

Step 5: Check the page source code vs rendered HTML for mobile

As you might know, it’s not enough to look just at the page source code if you want to check the information found on this page. There’s a whole process of how browsers render pages, and this process includes JavaScript code execution.

JS can change a lot on the page, so it’s always a good idea to look at the rendered HTML rather than just the source code.

I also often find it useful to see the changes between the source code and rendered HTML. I use View Rendered Source extension for that.

On the image below, I can see that on mobile, the placeholder image stays in the <src> attribute even after JS execution:

Click to enlarge

Step 6: Check the page source code vs rendered HTML for desktop

On the desktop though the image URLs are swapped to the right ones:

Click to enlarge

Step 7: Compare the results from Step 5 and 6

As far as I see from the screenshots above, the images are switched to the right URLs on the desktop but not on mobile. And it’s not really good since Google uses the mobile version of the website to rank it.

Step 8: Check the images in the Mobile-Friendly Tool

One of the best tools to see the pages the way Google sees them (not literally though) is to check out the Mobile-Friendly Test tool (or Rich Snippets tool or URL Inspection tool if you have access to the Google Search Console of the website you’re checking).

You can look at the screenshot. But it won’t give you much info though since you can’t scroll it:

The tab I need is HTML. When I look up ‘placeholder’ here, I clearly see that Google can access only the placeholder image since it’s in the <src> tag:

What’s Wrong with This JS-based Lazy Loading

JavaScript-based lazy loading works great when it’s done right so that Google can pick up the images.

Clearly, in this example case study, the way lazy loading was implemented prevented Google from indexing the right images. It can be especially critical for websites that depend on visual search.

Better Ways to Implement Lazy Loading for Images

There are 2 main ways that will help you implement images lazy loading properly.

You can use IntersectionObserver if you rely on JavaScript for lazy loading.

Or you can utilize native lazy loading which is supported by many browsers.

Anything else, Kristina?

Yes! If you want to learn more about JavaScript SEO and debugging JS issues? Check out this deck from my SEMrush webinar:

There’s definitely something going on with the images URLs, so in the next step, I need to look closer at them.

---

JavaScript is one of the 24 Core SEO Skills that a successful SEO professional should have. Want to learn about the other 23? Get your free checklist ???

---