Optimizing web page loading is not a new subject, but it remains one that doesn’t get as much attention as it deserves. Web/UI developers often assume that site performance is mostly attributed to back-end operations (database interactions, processing, etc.), servers themselves (hardware and software) and other variants such as bandwidth, traffic, etc. But there are many ways to optimize client-side code in a way that will result in a noticeable improvement in site loading and performance.
Fortunately, some of these techniques are becoming more common. For example, CSS Sprites are frequently seen now days and are heavily used by Google (sample) and Yahoo (sample). The reason CSS Sprites are a good idea is because reducing the number of requests means that servers have less to process and deliver, while the browsers have fewer components to download. This point is one particularly worth noting since before Firefox version 3 and Internet Explorer version 8, most browsers supported only 2 concurrent requests per domain. (With new browsers, that number goes up to 6, but the concept is no less important.)
So, loading fewer files is good for both the server and the client. CSS Sprites allow us to cut down the number of images which need to be downloaded (and also prevent having to preload images which are initially hidden, such as rollovers), but how can this technique be applied to other page components?
Here’s just an section of what this ends up looking like in the source. (I’ve excluded many additional script includes, and obviously all CSS files):
Much of this also applies to CSS files as well. And even though we’re more limited when it comes to code compression, we can deliver all CSS declarations in a single file once again improving page performance and reducing server requests.
Some features of the FileBundler object:
- Source files are untouched and remain just that – source files. When updating the source, all you need to do is delete the outdated bundles and new changes will be re-bundled when FileBundler doesn’t find an existing appropriate bundle. (Personally, I clear out my /bundles directory whenever I roll out new changes. I also like the idea of source files existing in all environments, even if they’re not directly requested. This allows me to ensure that the correct file versions are where they should be and address any inconsistencies or code problems.)
- File list can be included at the top of the bundle. This helps identify problems caused by missing or mis-ordered files.
Download the source code here: FileBundler
Here’s an example of it in use. The writeBundle() call should be made in your HEAD tag.
This produces code that looks something like this:
A single, compressed file is included making your visitors and your systems guy happy. And also making your HTML lighter and neater.
As you’ve probably guessed the bundle name is a generated (encrypted) string which corresponds to the specific sequence of files which are contained in the bundle. This way, no two bundles are the same, and a single bundle never exists more than once.