Google's push for Website Speed

Google has been evangelizing website speed for years. Over the years, it has released many tools & articles to help website owners improve their site speed. A common speed improvement Google suggests is to delay loading off-screen images. More commonly, this is referred to as lazy-loading images. This is an easy-to-perform change with notable gains since images are commonly biggest chunk of a web page's size.

Site speed: A ranking factor for mobile SEO

Google is very secretive about the factors affecting search rankings. But, when it comes to site-speed, Google has publicly stated that site speed is a ranking factor for mobile search. This makes it vital for sites to load fast on mobile devices.

Approaches for lazy loading images

As of July, 2020 - there are two possible approaches to lazy-load images:

Native Lazy Loading

Native lazy loading is the most elegant solution to lazy-load images. All it requires is to add loading=lazy attribute to an image that you want to lazy load. So, your lazy-loaded HTML code looks like <img src="url" loading="lazy" />. The only downside to this solution is that (as of July-2020) it works only recent versions of Chrome & Firefox (see here). This means that images on other browsers shall be displayed but not lazy-loaded.

JavaScript based lazy loading

The second approach to lazy-load images is to use JavaScript to load images. Many libraries & plugins are available to do this. These solutions often look like following:

<!--HTML code that avoids loading image right-away-->
<img class="lazyImg" data-src="myImg.jpg" src="SmallPlaceholderImg.jpg">
<script>
	//Some JavaScript code that would load the image at the right time
</script>

In the above (representative) example, we avoid letting HTML load the image. Instead, we control it through JavaScript which can be fired when user scrolls to a section of the page. Benefit of the solution like the one above is that it is cross-browser compatible.

Googlebot indexing & JavaScript driven content

This has been a long-existing worry in the minds of digital marketers: does Googlebot execute on-page JavaScript? Because, if it doesn't - content driven by JavaScript (like our lazy-loaded images) may not be indexed at all.

First up - Google has confirmed that Googlebot uses an evergreen version of Chrome (source). Also - Google has confirmed that the Googlebot does execute on-page JavaScript to render content (source).

However, it is important to consider the following points:

• Execution of on-page JavaScript & rendering often happens later than the first-wave of indexing. How much delayed the rendering wave is from the first wave of indexing is unknown.
• Like crawl-budget, there's rendering budget. This is the amount of processing Google will spend on rendering your JavaScript driven content. While specifics of rendering budget are unknown, it is ideal to keep rendering light weight.
• Googlebot cannot be expected to simulate user-actions (like hovering mouse over an item or scrolling the page). As a result, if lazy-loading is setup with an event-listener (rather than with IntersectionObserver), the JavaScript may never be triggered during the Googlebot page render.

So, while Googlebot will execute JavaScript & render JavaScript driven content, we need to be really careful to follow the good-practices here.

Potential down-sides of image non-indexing

Let us, for a moment, assume that the images on our website aren't indexed (due to any reason). This can negatively affect SEO in two ways:

• Images stop appearing in the image search:
  Whether this should worry anyone depends on the amount of traffic coming from image searches. Here is a custom Google Analytics report to track traffic coming from image search.
• Webpages' search ranking suffers due to image lazy loading:
  If the non-indexed images are central to the page content, it can severly affect pages' search ranking. For example - if a product page on an ecommerce site misses on indexing the product image - search ranking for that product page may be severely impacted.

From the above points - if images are central to your web pages' content - missing on their indexing can dent your search engine rankings notably. This demands care with regard to keeping images SEO friendly.

SEO friendly & cross-browser compatible image lazy-loading

So, is there an ideal solution that lets us lazy-load images and deal with all the limitations we enlisted above? Well, yes. Let's look at representative code snippet below (note - the snippet is representative and not directly usable):

<!--HTML code that avoids loading image right-away-->
<img class="lazyImg" data-src="myImg.jpg" src="placeholderImg.jpg">
<script>
	//Some JavaScript code that would load the image at the right time
</script>
<!--noscript for non-javascript rqeuests -->
<noscript><img src="myImg.jpg" /></noscript>

The key specific in the (representative) snippet above is the use of <noscript>. It ensures that our image is picked for indexing even if on-page JavaScript isn't executed for page-rendering. This makes our solution SEO friendly and gives us complete control to lazy-load images. Our recommended JavaScript library for safe lazy-loading of images is lazysizes - it leverages IntersectionObserver to lazy-load images. This how-to covers how to setup SEO friendly lazy-loading of images using lazysizes.

Conclusion

Image lazy-loading often requires the power of JavaScript to control when you may load an image. As a result, it is critical to keep lazy-loading SEO friendly. This can be best achieved via use of:

• <noscript> - to load images when JavaScript isn't executed.
• A JavaScript library or snippet that lazy-loads images using IntersectionObserver