SEO Impact of Lazy Loading Images


May 28, 2018




Edit (Oct 2018) : If all that you are interested in is a working solution for SEO friendly lazy loading - head to this how-to instead.



Google and Website Speed

Google has been evangelizing website speed for years. One way it does so is by releasing tools and articles that help website owners improve their website. A common optimization Google suggests is to delay loading of off-screen images. This is an easy-to-perform change with notable gains since images are commonly biggest chunk of a web page’s size.


Chrome Lighthouse Audit frequently recommends lazy-loading offscreen images
Chrome Lighthouse Audit recommends lazy-loading offscreen images


Infact, here’s a Google Developers article explaining everything about lazy loading (including it’s benefits).


Website Speed and SEO

SEO, as we all know, is a critical piece of Internet marketing. Search engine rankings can make or break companies. This causes Internet marketers to be cautious of any change to the website that may have a potential negative SEO impact. This applies to website speed related changes as well.


SEO and JavaScript

Google has always been very secretive about anything related to it’s search indexing. This includes any information on how it goes about executing on-page JavaScript when indexing them.


Lazy loading images requires executing JavaScript. And, we cannot be certain that Googlebot will execute our Javascript when crawling our website.

Marketers have tried to reverse engineer things to understand how Googlebot indexes JavaScript driven content. But those experiments leave us with vague pointers rather than actionable evidence:


  • Stephan Boyar tried an experiment in August 2016 to see if Googlebot executes JavaScript while indexing pages on his website. First crawl suggested it didn’t but when he submitted his website to Google Search Console, it started to execute on page JavaScript.
  • Back in 2015, Merkle found that Googlebot indexed dynamically generated images, links and navigation on their web pages.
  • On this HackerNews Thread, a Google employee who worked on getting Googlebot’s JavaScript execution capabilities (between 2006 and 2010) talks about building “lightweight high-performance JavaScript interpretation system” that could be run on “every web page on the index”.

My conclusion is that Googlebot can execute any and every JavaScript it prefers to. But, does it do so for every website it indexes? We cannot be certain. And with Google’s secrecy around all this, we cannot expect to know this with certainty in future. The Googlebot indexing dynamic content on one website doesn’t mean it will do so for another website.


If the bot is indexing dynamic content on Amazon.com, that doesn’t mean it will do so for my website.


What if our lazy loaded images are not indexed?

Let us, for a moment, assume that we setup our images to be lazy loaded and the Googlebot stops indexing them. 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. Lazy loading should be avoided if images stop appearing in image search and if this traffic is significant.
  • Webpages’ search ranking suffers due to image lazy loading:
    This can have a negative business impact. The best way to handle this is to apply lazy loading for a subset of pages and track these pages’ search engine rankings. We can then spread or undo lazy loading based on the observations.

A lot of images on any web pages are not related to the page’s content (blog post header images, backgrounds, etc). These should definitely be lazy loaded without any SEO related apprehensions.


Solution

An ideal solution to this issue would be a method that lazy loads images only for requests when JavaScript execution is supported and use the traditional image loading otherwise. This would mean a win for website speed and no SEO uncertainty. Here’s the kind of image loading that would do the job:



<!--image lazy loading-->
<img class="lazyImg" data-src="myImg.jpg" src="placeholderImg.jpg">
<!--noscript for non-javascript rqeuests -->
<noscript><img src="myImg.jpg" /></noscript>

Conclusion

We can never be certain if Googlebot will index JavaScript driven content for a certain website. For lazy loading images, there is an easy approach to cater to clients that can and cannot execute JavaScript. When feasible, the same approach (using noscript tags) shall be used for other JavaScript driven content.


Blog Post by Punit Sethi




Previous Post

Looking Beyond Page Load Time : 5 Examples

Before starting to track and optimize page load times, it is critical to know if your website's page load timings represent your website's speed experience. If not, you may be tracking and optimizing the wrong thing. In this post, we try to dive deeper into this point by looking at five well-known websites....continue reading



We blog about Site Speed, it's impact on Site Goals and what can be done about it. Join the mailing list to be notified of new posts (about twice a month).