Lazy Load Your Images To Significantly Speed Up Page Load Times

I’d seen the effect on other pages while surfing the web for some time now. Where you are scrolling down and the images load into view as the page is scrolling down. I immediately knew when seeing the effect in action just how beneficial this is. For one thing all images on a page don’t get loaded; if the user scrolls down only then is bandwidth consumed, otherwise it does not. And another giant bonus is that WITHOUT those images loading down the page that the user can’t even see right away the top of the page loads much faster.

The effect is called “lazy loading” your images. It’s a piece of jquery written by Mika Tuupola called the Lazy Load Plugin for jQuery which he offers up on his blog here. In its most basic form it loads images as they come into your viewport window. You can read further about installation and options at his blog.

Usage is as easy as linking to jquery and the lazy load library (probably just before your closing </body> tag):

<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" ></script>
<script src="jquery.lazyload.js" type="text/javascript" ></script>

In the HTML you’ll need to modify your existing <img> tag code. You’ll add the class lazy, and instead of putting src=”path/example.jpg” put data-original=“path/example.jpg”. Your final img tag should look like this (note that without stated img width and heights the lazy load code may mess up):

So that’s it. You just have to call the function on the page and include and modifiers you’d like to use with the script. In my case for loading images with a Fade In effect, and 400 pixels before the viewport threshold, my code looks like this:

<script>
  $(document).ready(function(){
    $("img.lazy").lazyload({
      effect : "fadeIn",
      threshold : 400
    });
  });
</script>

If you’d really like to grade your success do a page speed test before implementing the code, and then again after. Here’s a link for a good page speed tester: tools.pingdom.com/fpt/. It’s the one I used to create the graphic at the top of this post.

On my Portfolio Page where there are a lot of graphics in use, my page speed load time went from ~3 seconds to ~1.5 seconds.