Web Site Optimization: Minimizing HTTP Requests in Your Web Pages
March 27, 2009If there is one thing that notoriously gets overlooked in [web development](http://www.sevenforty.com/services/website_design.shtml), it’s web site optimization. No, we are not talking about search engine optimization – which is another topic all together – but rather building high performance, fast loading web sites.
Back in the early days of the web, where dial up reigned as king and broadband was relegated to universities and government agencies, webmasters were sticklers for fast loading web sites. Today, with the ubiquity of broadband, cheap web hosting and personal web sites – making your average Joe a webmaster – optimization and loading techniques have drowned in the noise of the Web. In light of this, we are outlining in a series of articles, steps that can be taken to keep your web site(s) performing at the maximum with your given hosting setup.
Minimizing HTTP Requests
Minimizing HTTP requests goes a long way in providing a high performance web experience for your users. You can think of the nature of HTTP, web pages and servers as if you were building a cake. The web page represents your recipe, the server as your local grocery store and HTTP as the street used to get to the grocery store (the final, rendered web page is your cake of course). In order to build your cake according to your recipe, you first are going to have to make a few trips to the store for ingredients before your cake can be put together. No big deal you might ask yourself? However, we did not mention one small caveat: that you may only take two ingredients at a time home with you from the store. Now think about all the ingredients in your recipe! The more items in your recipe, the more trips you will need to take to the store. The same concept applies to web pages.
While there is a bit more going on in the request/response sequence happening between the client and server, our cake metaphor makes a point about trips to the server (or store). When your browser receives the requested HTML page, it still is not done with what it has to do. Depending on what is contained in the HTML will determine how many more trips back to the server are needed. Your browser consumes the markup in the page and furthers requests the items needed like images, CSS files, flash, JS files, etc. All these are trips back to the server.
The ultimate would be to make one trip to the server and be done with it; unfortunately this is rarely the case. However, reducing the amount of HTTP requests goes a long way and is straight forward. For starters, think logically about ways to reduce your site’s complexity without losing any of its message when writing markup. Slicing images into a hundred different pieces may mean smaller file sizes on the server; however, it also means more trips back to the server for the client.
CSS Sprites, JavaScript and CSS
Consider CSS Sprites, a technique of using background images and positioning, for things like menus. CSS Sprites reduce HTTP requests by needing just one image to download. Furthermore, JavaScript often can be combined into a single file. The same applies for CSS files.
In the end, the best way to reduce HTTP requests is to be aware of the trips to the server (remember: your browser downloads 2 items at a time) and to think about your site structure and code logically. When your site starts increasing in hits, the more requests your web server is going to be processing and handling. The more you can help it out by reducing HTTP requests, the faster it will be at serving up content to all of your users.
Written by: The Sevenforty Team
