Web Site Optimization: Minimizing Requests in Your Web Pages
If there is one thing that notoriously gets overlooked in web development, 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 markup in the web page represents your recipe, the browser (client) as the oven, 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 delicious cake of course).
Building your Cake…err, Web Page
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 pinnacle of performance 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 in terms of performance and is fairly straight forward to implement.
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.
Reducing Trips: CSS Sprites
Consider CSS sprites, a technique of using background images and positioning. CSS sprites reduce HTTP requests by needing just one image to download. Once downloaded, you can use CSS to reposition the sprite to display any desired image contained in the sprite. This technique is very useful when you have a lot of small images to display.
Reducing Trips: Hosted JavaScript libraries
On to JavaScript. While combining all of your JavaScript into one file may be a viable solution for small scripts, doing so with large JavaScript-based applications may become a coding nightmare – especially for ones built on top of popular frameworks such as JQuery or Prototype JS.
Fortunately, performance gains are to be had in this arena through the use of hosted libraries. Many of the popular JavaScript libraries are hosted through super fast content delivery providers such as Google, Microsoft and Yahoo. For example, instead of hosting your own jQuery libraries, consider using one of the following instead:
- Google CDN
- Microsoft CDN
- …or even jQuery’s own CDN
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 from a single domain) 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.
