Downloading JS and CSS as a single file ( package )

Question

To improve the performance of our website, we have split the code into modules. (Separate JS files and CSS files for every feature.) Now, we will be loading only the core files during the page load and loading the remaining files, only when the user requests for the feature. instead of sending both JS and CSS requests separately - we are thinking of loading the concatenated file ( JS file and CSS file ) to save a request. is there a way ?

Note: we have already tried the following techniques

http://blogs.msdn.com/b/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx

Loading it via Ajax and splitting them via JS.

Answer 1

Consider that a carefully designed site will be able to download JS files and CSS files in parallel. So once you combine all CSS together in a single CSS file, all JS in a single JS file and you make sure the two can be downloaded in parallel (eg using JS defer) you should get better end-to-end performance than downloading a single file with JS+CSS concatenated (and this would also avoid the time spend in the processing of the ajax response).

BTW, all of the above can be done automatically and dynamically by mod_pagespeed (if you're on apache or nginx). Also, the page speed documentation gives some useful information on such issues.

If all of the above is not enough, you may want to look into CDNs ( cloudflare is a good free starting point) and make sure that resource caching is optimally configured (mod_pagespeed partially does it for you).