Edit (Jan 2019) : If all that you are interested in is a working code 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.
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.
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:
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.
Want to be alerted when your Lighthouse scores degrade?
Use our Lighthouse monitoring & notification offering. It alerts you the day your Lighthouse scores degrade. This ensures your speed gains made today are not lost in future.
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