Published in Programming and Scripts on Tuesday, May 30th, 2006
The idea of reducing HTTP requests to optimize page download speed is something that I have discussed a few times on Fiftyfoureleven. Recenlty a couple of articles have been published on the topic, and I thought I'd revisit some of the ideas presented here.
First, a quick look at just what we are talking about. Most of this is taken from CSS Sprites, Background Images and Website Optimization.
The basic performance principle is therefore to make fewer requests and transmit fewer packets. From this principle, we can derive two basic design rules for well performing Web pages. First, reduce the overall size of the page, thereby reducing the number of bytes (and packets) to be transferred over the Internet. Second, limit the number of embedded objects on the page, such as images, each of which must be requested and transferred separately from server to browser.
They also found that it was the number of packets and not necessarily the overall size of the page that was important. If a packet could hold 1460 bytes (the figure given in the article) and your object was 1600 bytes, it would require two packets. They found that this object would transfer at the same speed as another object that was greater in size but still fit in two packets.
What this means is that the fewer requests that you make for a given page, and the more effectively they fit in a data packet, the faster your page would be.
Now, data packet size depends (correct me if I'm wrong) on the connection type - adsl, t1 etc - and even if it were consistent for every user, optimizing to fit packets perfectly might be just a bit too, umm, obsessive. So reducing http requests should be good enough.
For more info on these ideas, I thought I'd hilite some old posts here on Fiftyfoureleven that deal with the topic.
With respect to putting files together and reducing several requests into one request, check out Stitch'em together over on CSS + PHP: Organized and Optimized? and Suturing your stylesheets over on Applied CSS Management and Optimization. Both of these discuss the idea based on putting multiple CSS files together into one file.
Another idea that I have not been applying myself of late, is the idea presented in CSS Sprites, Background Images and Website Optimization. The short of it from that article is that if you combine images that are used on a website into one image file, you reduce the number of HTTP requests and speed up page rendering time.
This same idea is visited in Responsible CSS - Recycle your background images, which looks at reusing background images (or any image in use on your site) to pretty up other portions of your website. The example presented in that article (which is embarrassingly out of date) is to use a background tile to pretty up a blockquote. In that manner, you are recycling a background image, and prettying up your site without adding another file request.
Both of those ideas do require a bit of strategizing to get it right, but if you are building a site that will be around for awhile, it may pay in the end to do this. I suppose that the gains in bandwidth will add up on high traffic sites as well.
Note: Worth checking out The State of Browser Caching if you plan on playing with all of this!
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..