Do not make your webpage to load all images at once. Tip to speed up website

User experience is very important aspect in making a web application. One of the important factors is improving your website page load time. Where do many applications fail to make good user experience ?

•  Trying to load lot of content at once.
•  Loading higher dimension ed images than required by your styles
•  Loading images before even they actually require on the screen.

In this small post, I am addressing to the 3rd point (lazy loading images)

Lets say you have 10 good quality images for a post on a web page, each image size is of 1MB, if you try to load all images at once, it is 10MB.

Browsers will keep showing the PROCESSING/LOADING symbol on their tab which will make user to think "WHY IS IT TAKING SO LONG TIME TO LOAD ?"

To avoid such situations, you can use lazy loading for the images, with this, the web page loads first one or two images and the browser does not showing any PROCESSING symbol on the tab.

And now users expression "WOW.. IT IS SUPER FAST..!! ". As they scroll down, images will be loaded as required.

There are many plugins available for lazy loading, but I use the below one for my projects.


http://www.appelsiini.net/projects/lazyload

How to use it to speed up your page load time

1. Load it along with Jquery

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

2. Give a class name to the images

<img class="lazy-load" src="/path/to/image.jpg">

3. Call jquery plugin function

$(function() {

    $("img.lazy-load").lazyload();

});

Checkout

 Creating twitter desktop style menu

 Google Apps style left Navigation

 Controlling elements visibility with bootstrap css classes