Skip to main content

The lazy loading SEO problem, SOLVED!

The SEO problem

TL;DR: – short story: Lazy loaded images won’t be indexed by search bots like googlebot!

Long story: The purpose of lazy loading images is to speed up a website’s performance without pushing extra HTTP requests through a full page refresh. The goal is to save bandwidth on visitors who may never scroll down far enough to see the freshly-loaded image or visitors who never slide through your image slider etc.

The way lazy loading works is that you with scripting first loads and serves the correct image source when an image is visible in the visitors viewport but googlebot won’t index these images because the correct image source isn’t rendered serversite!

The solution

TL;DR: – short answer: Since google started to execute scripting there isn’t any problem anymore. You don’t have to do anything 🙂

Long answer: The first big site I implemented lazy load on was the LEGO Starwars site. The new site had a lot of high-res images and a lot of sliders containing call-to-actions with images. So by lazy loading the images we saved tons of kilobytes and server requests and made the page load much faster. The only downside was that the images wasn’t indexed by any search bot! I tried different approaches:

  • Solution #1, Image sitemaps (no good)

    Create a image sitemap per page with your lazy loaded images:

    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
            xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
      <url>
        <loc>http://dinbror.dk/blazy</loc>
        <image:image>
          <image:loc>http://dinbror.dk/lazy-load-images-with-bLazyJS.jpg</image:loc>
        </image:image>
        <image:image>
          <image:loc>http://dinbror.dk/lazy-loaded-image.jpg</image:loc>
        </image:image>
      </url> 
    </urlset>

    At that time I couldn’t make it to work. My sitemap images wasn’t indexed so I assume that the images in the image sitemap has to be present in the markup before they will be crawled. So image sitemaps are only good for providing extra meta data to an image.

  • Solution #2, noscript (no good)

    Add a noscript tag containing the image for every lazy loaded image:

    <img class="b-lazy" 
         src="placeholder-image.jpg"
         data-src="image.jpg"
         alt="alt-text"
     />
     <noscript><img src="image.jpg" alt="alt-text" /></noscript>

    The HTML <noscript> Element defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

    So back then I came up with the brilliant theory (as 1000 of others) that because the search bots couldn’t render JavaScript they would crawl stuff inside the noscript tag, but the only thing I got out of it was extra markup. And of course, that one guy with JavaScript disabled could see the images.

  • Solution #3, escaped fragments (works but deprecated)

    Some months after the site went live the escaped fragments princip was introduced by Google. They proposed a set of practices that webmasters could follow in order to ensure that their AJAX-based applications and lazy loaded images was indexed by search engines. I won’t go in-deep with how it works since it was marked as deprecated October this year (2015). You can read more about it here: https://developers.google.com/webmasters/ajax-crawling/docs/learn-more

  • Solution #4, do nothing (works)

    Since search bots like googlebot started to render JavaScript it can now see and index your lazy loaded content. This is a relatively new thing. I tested it on the LEGO Starwars site and without doing anything images are now indexed at google images as your can see at the image below:
    indexed-by-google

    So now you don’t have any excuse for not lazy loading your images, iframes, games and videos whenever it makes sense.

Related articles

19 thoughts on “The lazy loading SEO problem, SOLVED!

  1. Do you have an idea why the current Lego Star Wars site, still using lazyloading, has a very fast loading speed from a user perspective but a very poor score on Google PageSpeed Insight?
    https://developers.google.com/speed/pagespeed/insights/?hl=fr&url=https%3A%2F%2Fwww.lego.com%2Ffr-fr%2Fstarwars&tab=mobile

    I don’t see the same issue with your example page, (good point for you I say!) 🙂
    https://developers.google.com/speed/pagespeed/insights/?hl=fr&url=http%3A%2F%2Fdinbror.dk%2Fblazy%2Fexamples%2F%3Fref%3Dblog

    Any idea what would be the big difference here? If google considers the website as very slow, it will be penalized for its ranking so there might be a good and a bad way to implement this lazyloading concept…

    1. Hi Fred.

      A new design and codebase has launched since I worked for them 😉 but the main issues here are that they didn’t optimize images and missing compression. They have some really heavy images which google punishes a lot.

  2. Do you see any particular challenge with using your library for a “photo viewer / gallery”? I scrolled through your example page and all the demos are based on the “scrolling” event. So I wonder if there is a best practice or a recommended way to use your library to code a classic photo viewer with thumbnails and lazyloaded large images…

    Can you reference an exemple working so I can use it as a demo for your solution? Thanks!

  3. Googlebot fails to load images that are not in the initial viewport of the page. I just verified this yesterday for a page of my own. That is a long page, and images are loaded only when scrolled into view.

    When viewed through Google’s webmaster tools (“view page as seen by Googlebot” or words to that effect), only the image at the top of the page was shown. Google doesn’t bother to scroll down the page. (Can’t really blame it either, the web is a big place.)

    So, depending on your page layout, you may still have to deal with this problem.

  4. Hey Bjørn,

    thanks for the nice article and of course for bLazy!!

    One thing that I don’t understand is how this should work if the images are loaded depending on different conditions (e.g. element width rather than screen width) or only after user interaction e.g. scrolling. Or take the slideshow example: The images on slides other than the first one are only loaded after the slideshow changes. Does google also scroll and flip through slideshows? I don’t think so.

    Cheers
    Wolfgang

  5. Very good post, i was looking for a solution to make my website faster but I was afraid that googlebot won’t index the images anymore. But as I can read here, this is not a problem anymore. So, thank you!

  6. TL;DR: should i remove from my lazy load image tag?

    Long question: Yesterday i applied (https://wordpress.org/plugins/unveil-lazy-load/) for my site, i need to use lazy load because i have very long web pages with a lot of images (ex: http://www.freshdesignpedia.com/interior-design-ideas/66-folding-room-divider-the-favored-trend-for-2016.html), it has 66 images.

    I noticed from view-source that now my content has tag, after reading your post, then i really afraid that my site will seen as spam for google. should i worry about that? or just leave it?

  7. When searching your Blazy example page on google with: “site:dinbror.dk/blazy/examples” Google only indexes the low-res image. Because this is the only image not loaded through Javascript. Why aren’t the other images indexed?

  8. Are you still using lazy load on the majority of your sites? I’ve found that a large amount of my visitors actually prefer the site without lazy load, as it feels like they’re waiting longer for images to load, when it is switched on.

    1. Hey Sam.

      Yes whenever it makes sense. On the starwars site which had a lot of image sliders and therefore hidden images it maked perfecly sense. The site felt a lot faster and we saved a ton of kb’s.
      It’s of course important like always that you optimize your images as much as possible, and there are different patterns you can use to lazy load. Some provides a low res image as default so you can see something right away, others add css effects. You could also only lazy load the images outside the view or start to preload images after pageload.

      /Bjørn

  9. Solved… For Google, yes. But Bing (and therefore Yahoo) and other engines can’t see the data. What do you propose for them?

    1. Hey John.

      Correct, Bing, Yahoo, Baido etc won’t index your lazy loaded images at the moment. I believe that they have to follow in Googles footsteps soon.
      For my and my customers sites, Google image search has always been the only player at the table. The amount of traffic coming from other image searches has been zero or very tiny why I haven’t looked into optimizing for them.
      However if they are important for you I believe solution 3 would work.

      /Bjørn

Leave a Reply

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