Thursday, August 21, 2014

Reducing HTTP Requests To Reduce Page Load Time

What would you do with a website which is taking ages to open? Most probably, you will skip it provided it does not contain unique and exceptional content. Page load time is a critical element which defines user experience. Quite naturally, therefore, there is a direct relation of page load time with rankings in SEO since Google considers all those factors important for ranking which have relation with user experience.  One of these elements which impacts page loading time is that of the HTTP requests which are made between the elements of a webpage and the server. Whenever a page loads, each element of the page is fetched from the server by making request. So, more are these elements, more are such requests and hence, more time it takes for page to load.
How to reduce the HTTP requests?
There are basically three elements: images, scripts and CSS which need to be taken care of while developing the site, if the objective is to reduce the HTTP requests.

Images: while reducing the size of images is definitely a viable option, that might still not be sufficient where are many images on the site. So, the best way to deal with these is to make use of CSS Sprites. Using this method, you would be able to make a collage of all the small icons and background images so that there is only one image in the end for which the requests would be send to the server.

How these sprites are created is mentioned in this article: http://www.feedthebot.com/pagespeed/combine-images-css-sprites.html

However, there are some issues associated with the use of CSS Sprites which shall be considered duly. These are not hindering factors. This article brings out these issues in greater detail and explains ways of tackling common problems associated with it: http://www.smashingmagazine.com/2012/04/11/css-sprites-revisited/

How would you locate it? I have taken example of India’s leading online travel agency, Yatra, to demonstrate this here. Simply open Mozilla Firefox and open the website www.yatra.com. Right click on the page and then click View Page Info. On the dialogue box which appears, go to Media. It will show paths of different images. If you click on these, the respective images will appear in the box below. When you see the following three images, these are Sprite images.

 




CSS and JavaScript files: With respect to the CSS and JavaScript files, two points are important to note. First is that all the script which is present in the header section and is blocking the page load time, shall be removed from there and placed in the body part. This becomes important because browser will not start to render the page till the time it has loaded the page and if there is some script which is hindering this process due to its being in the header section, then it needs to be removed.

The second important aspect is that of reducing number of CSS and JavaScript files. This can be done by using the ‘Minify’ function of the W3 Total Cache which removes the unnecessary comments and also combines the files.

Using the CDN: CDN refers to a content delivery network, which is nothing but a group of servers around the world that has the benefit of being closest to the website of your visitor. (Check out the wikipedia on CDN for more information).

No comments:

Post a Comment