Concatenate and Optimize Your JavaScript & CSS

Just how important is it to concatenate and optimize your javascript? In reading this article about the healthcare.gov article "Analysis: IT experts question architecture of Obamacare website" it is apparently extremely important.

Among other problems it was found that a large number of JavaScript files were being requested and then parsed by the customer’s web browsers causing an overload of requests from the server and an overtaxing of the web browser.

"Of the 92 he found, 56 were JavaScript files, including plug-ins that make it easier for code to work on multiple browsers (such as Microsoft Corp’s Internet Explorer and Google Inc’s Chrome) and let users upload files to HealthCare.gov."

I bet that the majority of the other 36 files are CSS files.

At a minimum those 56 JavaScript files should have been optimized and concatenated in such a way as there would only be 1 request to the server followed by 1 response.

There are many ways to do this, I really like the idea of doing it during the build process but it could also be more dynamic and done as required by the server. Whichever way you choose it will always be better than serving a huge number of separate files.

Here is a screencast walking you through how to set up a build process for JavaScript and CSS files using Ant.

Another option is to use "minify" instead of optimizing during the build process.

No matter how you do it, if you build web sites you have no excuse not to use some method to optimize your JavaScript and CSS to improve your customer’s experience.