I am trying to optimize a site performance by consolidating and compressing the CSS and JS files. My question is more about the (concrete) steps on how to achieve this, given a real situation I was facing (should be typical among other developers too, though).

My page references several CSS and JS files like the following:

<!--

  It's easier to work on smaller files during development.

  Hence, the multiple CSS and JS files.

-->

<link type=text/css rel=stylesheet href=/css/main.css />

<link type=text/css rel=stylesheet href=/css/secondary-1.css />

<link type=text/css rel=stylesheet href=/css/secondary-2.css />



<script type=text/javascript src=/scripts/js/main.js></script>

<script type=text/javascript src=/scripts/js/adapter/adapter.js></script>

<script type=text/javascript src=/scripts/js/adapter/title-adapter.js></script>

For the production release, I'd like to combine the 3 CSS files into one and minify it using e.g. YUI Compressor. But then, I'd need to update all pages that needs these 3 files to reference to the newly-minified CSS. This seems error-prone (e.g. you're removing and adding some lines in many files). Any other less-risky approach? The same issue for the JS files.