Lazy Loading Images SEO Experiment

Winston OngSEO Blog6 Comments

image alt test
Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone
Follow me

Winston Ong

I'm a Sydney based SEO consultant and search marketer. I blog about unique SEO topics the main sites don't talk about, and like fiddling around with real world SEO experiments that shed light on the limits of Googlebot.
Follow me

Looking for my SEO experiment on original content? Check out 45wn343on

Does Lazy Loading Images Hurt SEO?

TLDR: No.

Important Update! Make sure you read my super popular related post on using noscript to add keywords even when there is no associated image – the results were pretty amazing

Lazy loading is a technique to defer the display and resource loading of images on a web page until the time the image appears in the user’s viewport. Under certain circumstances, it can have a significant effect on page load speed and efficiency. In particular, long web pages with many large images.

If the scroll distance between images is large as well, lazy loading is a particularly ideal solution because getting the top content immediately seen by the user to load faster will also improve the perceived load speed as well as the page’s actual efficiency.

Google Comments That Lazy Loading May Cause Crawling Issues

In the below Google Webmasters Central Hangout from 43:40 – John Mueller states that Google bot is unlikely to scroll down to the end of the page to trigger content loads. Therefore, images appearing below the fold and appearing via lazy load will probably not be crawled and indexed.

 

 

About a week ago, I decided to implement lazy loading of all images on my personal blog, which is a single page index page composed of a number of travel photos I’ve taken stacked on top of each other. You can click into each individual post, but there’s no additional content.

 

lazy load seo

Lazy load images appear only after entering the viewport – www.winstonong.com

Before implementing this, I wanted to run a simple SEO test to confirm Google’s ability to crawl and index img alt tag content attached to lazy loaded images.

Firstly, to demonstrate that img alt tag content is indexed and Google recognises its keyword content to match against a user’s search query, I inserted a lengthy, unique phrase as the alt text for an image in my SEO Case Studies post:

lazy load seo

 

 image alt testAs expected, the img alt text content is picked up quickly by Google and the corresponding page is served for a search of this unique query.

Google also chooses to display the alt text in the result preview snippet area instead of the meta description.

But how does Google fair picking this same keyword phrase when inserted into a lazy loaded image?

After implementing lazy loaded images on www.winstonong.com, I inserted the keyword into the img alt text of an image located about 9/10s down from the top of the homepage. It is also the 2nd last image from the bottom for its respective post page.

Therefore, from all pages, this image must always load after the first initial view of the page and wait for the viewport to hit the src tag.

lazyload

I then fetched my homepage in GWT and re-submitted it to the Google index.

Test Results

After 3 days, the category, post and homepage of winstonong.com are all served in SERPs for the unique keyword query.

lazy load experiment

This demonstrates three SEO relevant points about using the img alt tag for keyword optimisation when using lazy loading images:

  1. Google has no issue crawling keywords in lazy loaded image alt tags
  2. Google has no issue indexing keywords in lazy loaded image alt tags
  3. Google uses keywords in lazy loaded image alt tags as on-page relevancy signals

What About John Mu’s Comment?

While Google can execute JavaScript, I also used <noscript> tags to contain the image and HTML attributed like the img alt tag:

<noscript>&lt;img class="alignnone wp-image-307 size-large" src="http://www.winstonong.com/wp-content/uploads/2014/06/seattle-space-needle-1024x682.jpg" alt="parameters appearing larger in size than the mirror would allow with a gorilla" width="1024" height="682" /&gt;</noscript>

From the test results, we can see that this method successfully allows us to get the keyword content indexed and served for a search of the query. Even if Google bot is not scrolling down the page to trigger the image tag via lazy load, it will still crawl and respect the content within a <noscript> tag.

*A note about on-page experiment references: if you follow the listed links to pages used in these experiments, you’ll notice the tags I’ve written about are no longer present. This is because I don’t wish to run experiments counter to the spirit of Google’s guidelines than necessary to demonstrate a point and take the required screenshot.

Related Posts

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

6 Comments on “Lazy Loading Images SEO Experiment”

  1. This is a nice article and timed well. I just installed lazy loader plugin the other day. It really bumped my site speed up too which was exciting to see. I’m glad that it doesn’t create problems for crawling.
    -Nick

  2. Did you test how much impact your experiment had on users who searched for images?
    Do I understand correctly that with your lazy loading setup the actual images are not being indexed and thus should not appear in google’s image search? Which in turn would mean that you lose that traffic?

    1. Hi Andrej,

      That is a good question. No, testing for image indexation within google images was not part of the experiment. However you can very easily see that all images in my blog (which is still set up with lazy loaded images) have been indexed by Google and served within Google image search, by performing a site command search of the winstonong.com domain:
      https://goo.gl/42KNZQ

  3. Ok, I see. Do you have any explanation for this? How could google crawl and index your images without having access to the urls? Do you maybe link to them otherwise? I see that you have a link to every image that references the img in the href. So that’s probably it…

  4. Would your experimental results change change if you used data-uri images (e.g. base64-encoded image strings) instead of links to transparent images?

Leave a Reply

Your email address will not be published. Required fields are marked *