Combine and minimize JavaScript and CSS files for faster loading
Posted onReduce HTTP requests
On most sites, the major component of download time is not the base HTML file itself, but the number of subsequent HTTP requests to load the page’s supporting files - CSS, JavaScript, images, etc.
Each of those are extra HTTP requests, and each unique request takes a relatively long time. The fewer requests to the server that the browser has to make, the faster the page will load.
There is an inherent overhead in each HTTP request. It takes substantially less time to serve one 60K file than it does three 20K files and a lot less than it does six 10K files.
Combine and minimize files
This post will explain how to combine and minimize CSS and JavaScript files using YUI Compressor and Ant.
This can be done by just concatenating all files into two combined files (one for CSS and one for JavaScript) and minimize them. You can quickly go from 10 or more files down to 2, and their size can be greatly reduced.
To keep the modularity that comes with splitting these files out by section (or business unit), keep them split in your development process, and combine them in your build process. A first Ant task will combine them and a second task will generate their minimized versions.
This technique has been successfully used in libraries such as jQuery, MooTools, Dojo, ExtJS, YUI, etc, allowing developers to better organize their code.
…
Read more »