Faster loading website : minimize HTTP requests

As we started the series about how to create a faster loading website; we will discuss few of the points in details in few articles. Here is one important point to make your website load faster : minimize the HTTP requests.

It is estimated that 80% of the response time of a website is lost in loading the interface. The vast majority of that time is wasted downloading the required components: images, css style sheets, Java scripts, flash, applets etc.

By reducing the number of components in turn reduces the HTTP requests to display the page and thus you can reduce the page loading time. Simply, one component means one HTTP request, which may be internal (on your server) or external (from others’ server). Any server has a limiting factor in the number of parallel downloads. That means, simultaneously a fixed number of components can be downloaded; while other components will have to wait still at least one from that maximum number (take it n, n is generally 5) is completed. Here is an graphical example of a poorly cared website analyzed in webpagetest, keep in mind this website is the official website of a multi-billionaire company’s website:

You can see clearly, only a number of http requests can be handled in packets. The next set waits still that packet is completed. Other limiting factors are the computer as well as browser’s capability, the connection speed etc.

Ways to reduce this http requests:

• One way to reduce the number of components on the page is by simplifying the design. We have 7 images that is making the page to load within 4 seconds. If we can reduce it more, page speed will increase. We have combined our banner logo with the background that alone saving one extra request.
• Use CSS sprites for buttons and small images. We have used only one image for all the buttons (except download button) in this website. Yahoo and Google extensively uses CSS sprites.
• We have used CSS gradient instead of image gradients.
• Try to use CSS colors instead of images.
• Optimize browser caching for these background image elements.
• Combine the CSS, this is why you need a specially designed custom theme. Other wise the work would be too much to combine them.
• Try to avoid the social widgets. Among 4 second loading time of this website, over 2 seconds are spent for loading the social connection stuffs, but they are unavoidable.
• Do not use translation widgets.
• Do not put thousands of badges. Combine them with background if not avoidable. Anyway, personally I think except the business websites, who needs to show several badges to make the site is legitimate, showing badges is a bad idea.
• Avoid Flash components. Using Silverlight is a punishment.
• Avoid using Advertisements from several companies. Reduce them in number.

We gave the screenshot, now see the grade of that website including the name:

You or me are not Microsoft. So, we need to speed up our websites like Google, Yahoo!, Amazon etc.

There are several reasons why Microsoft’s that page rank higher in search engine result page. Do not think that page speed actually does not matter.