QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Lazy Loading Images And Its SEO Impact

Lazy Loading Images And Its SEO Impact

lazy-loading

In this post I will provide the best lazy loading solution that maximizes page speed and also removes all SEO negative impact. Lazy loading has always been a discussion among the web designers but no one has got a proper solution to it. I will present the best solution to lazy loading in this post.


What is Lazy Loading?

Lazy loading boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won’t be loaded until the user scrolls to them.

How does lazy loading works?

Lazy loading works by populating the src attribute of img tags when the image area enters the viewport. This is basically done using JavaScript. The src attribute by default is left empty or else populated with a loading image.

A simple lazy loaded HTML page example

<!doctype html>
<html>
<head>
    <!-- lazyload.js can be any lazy loading library -->
    <script src="lazyload.js"></script>
</head>
<body>
    <img src="blank.gif" data-img-src="http://qnimate.com/1.png">
    <img src="blank.gif" data-img-src="http://qnimate.com/2.png">
    <img src="blank.gif" data-img-src="http://qnimate.com/3.png">
    <img src="blank.gif" data-img-src="http://qnimate.com/4.png">
</body>
</html>

Here lazyload.js detects when image enters viewport and then assigns the data-img-src to the img src attribute.

SEO Impact of Lazy Loading

Lazy loading has a negative SEO impact. Lazily loaded images are not crawled by search engines. Search engines look for image URLs in the src attribute, but here the src attribute is not assigned with the original image url therefore they are not crawled.

Therefore your images will never found on any search engines.

Solution To Lazy Loading SEO Impact

The only solution is to assign the src attribute with the original image URL. I didn’t find any lazy loading library that would lazily load images with src attribute assigned to the original image URL. Therefore I wrote my own JavaScript library called as Qazy.

How does Qazy Works?

Qazy stops browser from fetching images until the images enters the viewport. Qazy script needs to be loaded as soon as possible in the webpage so that it can start tracking the images and load them lazily.

Here is example code on how to use Qazy
View Demo

<!doctype html>
<html>
    <head>
        <title>Qazy</title>
        <script> var qazy_image = "http://qnimate.com/blank.gif"; //custom placeholder  </script>
        <script src="https://cdn.rawgit.com/qnimate/Qazy/master/qazy.min.js"></script>
    </head>
    <body>
        <img src="lazy-loading.jpg" data-qazy="true">
        <br>
        <img src="offline-web-apps.jpg" data-qazy="true">
        <br>
        <img src="random-color.jpg" data-qazy="true">
        <br>
        <img src="revel-scroll.jpg" data-qazy="true">
        <br>
        <img src="wordpress-fields-metaboxes.jpg" data-qazy="true">
    </body>
</html>

Conclusion

Its always better to make your websites SEO friendly. I always design websites in such a way that they are SEO friends and provide a awesome user experience in multi devices. For me Qazy is very helpful. Thanks for reading. Please Like and Share.

Jun 18, 2014Narayan Prusty
Generating Random Color's In JavaScriptChanging Text Selection Color Using CSS
Comments: 42
  1. Mazhar Iqbal
    5 years ago

    thanks for sharing very informative stuff amazing keep it up.

    ReplyCancel
  2. henrik
    5 years ago

    How do I get rid of the spinner? It’s 99.9% pointless and hinders UX, no-one would even notice that the image wasn’t loaded if it wasn’t for the spinner.

    ReplyCancel
  3. Asad
    5 years ago

    Perfect writing style, perfect research and attention to detail, not only to events but to emotions felt. Thank you so much sir for your great post on the great blog.

    ReplyCancel
  4. Telugu Movies
    5 years ago

    nice posts

    ReplyCancel
  5. dubaichamadi.com
    5 years ago

    Can this script be usable in isotope also ?

    ReplyCancel
  6. Raaj
    5 years ago

    Thank you for your post .. very use full for us…….
    http://tamilrockers.org.in
    http://tamilgun.org.in
    http://filmywapi.net

    ReplyCancel
  7. Annamae Sofia
    5 years ago

    You should take part in a contest for one of the better websites on the web. I actually will recommend this web site!

    ReplyCancel
  8. Heath Krows
    5 years ago

    An interesting discussion may be worth review. I feel that you should write more with this theme, it might not certainly be a taboo subject but generally people are not enough to speak on such topics. To the next. Regards

    ReplyCancel
  9. Michele
    5 years ago

    Hi, How to add this script in Wordpress?

    ReplyCancel
  10. Fady Soliman
    5 years ago

    Hi,

    Thanks Narayan for Qazy. I also used my own approach in lazy loading images without setting the src attribute of the image on this website instead I pass data-original=”the image url” and replace it using jquery – Indexing images on my site isn’t really a concern. Though, do you think there would be a need for me to use Qazy instead of this classic approach?

    Thanks

    ReplyCancel
  11. mohamd osama
    6 years ago

    Thanks man

    ReplyCancel
  12. Stefan
    6 years ago

    Thanks for your post.
    There is another way to solve this issue.
    I recommend using an extension called Lazy Load for Magento 2 which delays loading of images on your Magento site only when customers scroll down the page.
    You can try its demo here: http://bsscommerce.com/magento-2-lazy-load-extension.html

    ReplyCancel
  13. yudha
    6 years ago

    will try it on my site…

    i’m using one of lazy load plugin, but recently i deactivated…

    ReplyCancel
  14. Ferri Sutanto
    6 years ago

    I’m prefer to add noscript with original img tag..so google or search engine would still my image

    ReplyCancel
  15. Jack
    7 years ago

    This doesn’t work – obviously. Browser has already already queued image src for downloading BEFORE qazy.js has finished downloading.

    ReplyCancel
  16. Philip Short
    7 years ago

    Hi Narayan, is it possible to include a time-out function so that after say 5 seconds all images are loaded regardless of scolling down? The reason for this is that my current use of lazy-load seen here: http://www.yorkfineartsonline.co.uk/gallery-artists requires that the images in the tabs are also loaded. Many thanks in advance, Philip

    ReplyCancel
  17. Ron
    7 years ago

    Wouldnt adding a noscript with the image src get crawled by google?

    ReplyCancel
  18. Bill
    7 years ago

    Qazy doesn’t work in Safari 8 on Mac. Can you check it please?

    ReplyCancel
  19. Mohamed
    7 years ago

    Nice plugin.
    but How show image slowly with fade animation or other animation to be more attractive ?
    Can we use it or advise our friends to use it in a commercial product ?

    Thanks

    ReplyCancel
  20. Erik
    7 years ago

    Hey there,

    great plugin it really helps.
    I just have one question. With lazy loading I had the option to fade the images in once they were loaded. Is it possible to get this effect with qazy?

    Thanks a bunch

    ReplyCancel
  21. Petro
    7 years ago

    Thanks for the great contribution!

    However, I noticed that this wont work with CDNs. It just simply doesnt cut the CDN connection and images are loaded succesfully. Is it even possible to fix this compatibility issue?

    ReplyCancel
  22. Mihaly Koles
    7 years ago

    Thanks a lot for this small tool.

    If I want to use it on my site what type of licence would I think of?

    ReplyCancel
  23. Robin
    7 years ago

    First of, Thanks a lot Narayan for the effort and sharing your work. It’s a dilemma between a faster website and negative SEO impact. And your work will help me tremendously.

    I do have a quick question, your js file seems big (over 100k). And it has a embedded image, which is the default one displayed while image is loading, I guess. Can I delete this to use my own gif? It seems we can setup that up in the code. This way, the js file will be much smaller.

    Thanks a million!

    ReplyCancel
    • Narayan Prusty
      7 years ago

      Yeah you can do that.

      ReplyCancel
  24. Jeevan
    8 years ago

    Nice plugin.

    ReplyCancel
  25. Azi
    8 years ago

    Hi, if you check the network tab in chrome developers tool you’ll see that it loads all the image on page..

    ReplyCancel
    • Narayan Prusty
      8 years ago

      Obviously browser starts downloading the images. But this script stops them after 50ms of script load which cancels the downloads. Chrome developer tools show the start of download not the end of it.

      ReplyCancel
  26. Tan Khay Ong
    8 years ago

    I think we can just place the image url into for SEO to crawl the image link? For example

    just my two cents.

    ReplyCancel
    • Narayan Prusty
      8 years ago

      Search engines don’t like tags because of lot of spam stuff in there. Specially when its images. So I wouldn’t be confident enough to use noscript tag.

      ReplyCancel
  27. Lucian
    8 years ago

    Hi, cool script, but it seems that it doesn’t work for images in iframes. Probably the update doesn’t fire on iframe’s scroll. Can I do something about it?

    ReplyCancel
    • Narayan Prusty
      8 years ago

      If you embedded the script in the parent page and expecting it to lazily load image inside iframes that are embedded to the page then it will not work due to same origin policy restriction.

      ReplyCancel
      • Lucian
        8 years ago

        I try with a fixed size div that has scrollbar. It works only for the visible images, but when I scroll, the update doesn’t fire, so the images that became visible aren’t loaded. Can I hook the update to fire when the user scrolls the div?

        ReplyCancel
        • Narayan Prusty
          8 years ago

          Can you create a jsfiddle for this scenario and send me. It will be helpful for me to check the problem.

          ReplyCancel
          • Lucian
            8 years ago

            Please take a look at the photo/video list
            http://www.omnilexica.com/?q=math#photo

            The Qazy is removed now, but I think you’ll understand the problem.

            ReplyCancel
            • Narayan Prusty
              8 years ago

              Can you please be clear what you are trying to achieve using Qazy? Accordingly I can provide solution to it.

              ReplyCancel
              • Lucian
                8 years ago

                I want to lazy load thumbnails. Qazy works for the ones that can be seen scrolling the whole page, but not for the ones that show up when scrolling the divs for photo/video list.

                Should I add something like this?
                document.getElementById(“myDiv”).addEventListener(“resize”,qazy.reveal,false);document.getElementById(“myDiv”).addEventListener(“scroll”,qazy.reveal,false);

                ReplyCancel
                • Narayan Prusty
                  8 years ago

                  Qazy works relative to the browser viewport. If you need it wrt div box then a lot of changes needs to be done to the source to make it work.

                  Even other lazyloading plugins work wrt to browser viewport.

                  ReplyCancel
                  • Lucian
                    8 years ago

                    At least, is it a way to load all images inside a div at first scroll of the div?

                    ReplyCancel
                    • Narayan Prusty
                      8 years ago

                      Yup there is. You can handle scroll event for div and then populate the src attribute of the images.

                      ReplyCancel
                  • Trisha
                    6 years ago

                    Deadly accurate answer. You’ve hit the buslyele!

                    ReplyCancel
  28. Bob
    8 years ago

    Hi, Qazy doesn’t work in IE11. IE11 downloads all the images when you load the page and then downloads them again when you scroll down to them. You can see this with IE11’s network inspector.

    ReplyCancel
    • Narayan Prusty
      8 years ago

      I just tried it again it did work,

      All the image might be loading because this script runs after 50ms, therefore images would have been loaded within 50ms, Try it with some large size images.

      ReplyCancel

Leave a Reply to Jeevan Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 42 Comments SEO, Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is Lazy Loading?
  • How does lazy loading works?
  • SEO Impact of Lazy Loading
  • Solution To Lazy Loading SEO Impact
  • How does Qazy Works?
Related Articles
  • Fade Image On Scroll Effect
  • Create a Crawlable AJAX Website using PHP
  • SEO Pagination Best Practices and Friendly URLs
  • Detecting End Of Scrolling In HTML Element
  • SEO For Multi-language and Multi-Currency Websites
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license