In my previous article 7 Easy-to-Apply Tips to Improve Your Web Site Performance, I described methods to achieve better client-side performance.  The conclusion of the article was: “The most important and effective way to improve web site performance is to make fewer HTTP Requests.”

Since browsers only are able to download two components on parallel per hostname, and every HTTP request has an average round-trip latency of 0.2 seconds, that causes a 2 second latency alone, if the site is loading 20 items, regardless of whether they are style sheets, images or scripts. (On an average broadband connection with a browser capable of downloading two components at a time).

Since browsers spend approximately 80% of the time fetching external components such as scripts, style sheets and images. Reducing the number of HTTP requests has the biggest impact on improving website performance. Moreover, it is the easiest way to make a performance improvement.

This article focuses on ways of minimizing HTTP Requests to maximize web site performance.

1. Image Maps

Image Maps are used to combine multiple images into a single image and specify regions to assign a specific action to each region. The overall size is about the same, but reducing the number of HTTP requests speeds up the page.

There are two types of image maps:

    Client-side: When a user activates a region of a client-side image map with a mouse, the pixel coordinates are interpreted by the user agent. The user agent selects a link that was specified for the activated region and follows it.

    Server-side: When a user activates a region of a server-side image map with a mouse, the pixel coordinates of the click are sent to the server-side agent specified by the href attribute of the A element. The server-side agent interprets the coordinates and performs some action.

Client-side image maps are preferred over server-side image maps for at least two reasons: they are accessible to people browsing with non-graphical user agents and they offer immediate feedback as to whether or not the pointer is over an active region.

For details: Image Maps

The main navigation of bloggingdeveloper.com utilizes image maps. If you examine the source of this page, you will see the following code:

<img src="/themes/BD/images/menuimg.gif" border="0"
        usemap="#Map" id="imgMenu" />
<map name="Map" id="Map">
  <area shape="rect"
        coords="4,31,82,58"
        href="/"
        alt="Blogging Developer Home" />
  <area shape="rect"
        coords="88,25,189,57"
        href="/archive.aspx"
        alt="Archive" />
  <area shape="rect"
        coords="197,26,307,53"
        href="/contact.aspx"
        alt="Contact Blogging Developer" />
  <area shape="rect"
        coords="315,25,379,52"
        href="/syndication.axd?format=rss"
        alt="Blogging Developer RSS Feed" />
</map>

2. CSS Sprites

Another method for reducing the number of image requests is combining images into a single image and using CSS background-image and background-position properties to display the desired image part.

You may find detailed information about CSS sprites in CSS Sprites: Image Slicing’s Kiss of Death.

Bloggingdeveloper.com utilizes CSS Sprites on the rating stars.

3. Combine External Script/StyleSheet Files into a Single File

Number of HTTP requests may be reduced by combining all scripts into a single script and similarly combining all external stylesheets into a single stylesheet.

While combining external files reduces the HTTP requests, it hardens the maintenance of these files. However, combining these files as a part of build process is a good practice. Moreover, if you have variety of pages that use a different set of scripts and stylesheets, you should not combine them into a one big file which is inefficient since the page downloads more JS and CSS than it needs.

Conclusions:

If you want to improve your site’s performance, reducing the number of HTTP requests in your page is the first place to start. This is the most important guideline for improving performance.

Comments

Add comment