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

39 thoughts to “The lazy loading SEO problem, SOLVED!”

  1. Very good post indeed, i was also looking for a solution to make our implant dentar website faster but I was afraid that google bot will not index our images. Thank you!

  2. Thanks for your post i didn’t know google is ok with lazyloaded images 🙂
    I used like below and it seems fine.

  3. what do you mean do nothing. So basically you are saying it used to be an issue but its not anymore. Yoast SEO says yes it is indexed. to me this article is extremely confusing. You say one thing then say oh its ok now.

    1. Javascript executes by search engine, you can check if your site’s images are indexed by request: site:domain.com on google images tab.

  4. Thank you for the information. I have just installed lazy load on company website and store and after that I started wondering if I did right thing. What is strange is that page speed insight score is a bit worse right now. A bit like 2-3 points.

  5. Did you test if solution #4 works for images further down the page? Did you see a difference or were they picked up the same?

    At Google io18 John Mueller recently said Google may be able to pick up lazy-loaded images, especially above the fold. BUT: if you want to make sure Googlebot can pick up lazy-loaded images, put them in noscript-tags or structured data referring to the image. https://youtu.be/PFwUbgvpdaQ?t=32m59s

  6. Seems like lazy loading based on refer might help with the Bing/Yahoo issue? Or have they caught up now it is 2018?

  7. The difference between the google bot view and what actually gets indexed, is just a difference in priority. Like the article says, the content should be indexed. But, may not rank well if not within the users general view. Its the same reason that content above the fold is considered more valuable than content below the fold.

    Pretend you wrote the google bots instructions. You wouldn’t want to serve content to users that isnt readily available on the page (have to scroll down several sections of lazy loading).

    Taking the perspective of the user, and what would be best for them, is the safest way to protect against changes in Google algorithm while building your position over time.

  8. Thank you very much for your post, it helped me a lot.
    I’m using on my site jquery to load additional divs when the user scrolls down.
    The html is something like this:

    The jquery is something like this:
    if (alreadyloaded == false)
    {
    if(jQuery(window).scrollTop() > 200)
    {
    jQuery( “#hiddenlazy1” ).load( “http://mysite/contents/hiddenlazy1.html” );
    }
    }

    And additional code to populate hiddenlazy2 and hiddenlazy3 divs. So the content is loaded from external files.
    If I test with fetch as google, I cannot see the content of the 3 hidden divs, so my concern..
    Do you think the content (text+images) will be indexed by google?

    Thank you!

    1. Sorry, the html code cannot be posted, so I’m describing it: basically there are 3 empty divs, hiddenlazy1, hiddenlazy2 and hiddenlazy3.

      Thank you

  9. Hello, I think your blog might be having browser compatibility issues. When I look at your blog in Firefox, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, excellent blog!|

  10. 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.

  11. 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!

  12. 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.

  13. 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

  14. 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!

  15. 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?

  16. 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?

  17. 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

  18. 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 to jake Cancel reply

Your email address will not be published.