Reducing the number of js or css files downloaded? [duplicate]

Question

Possible Duplicate:
Optimizing for load time VS staying organized

I would like to speed up my website, and one of the ways YSlow! talks about is to reduce the number of files being downloaded during a request.

How does one solve this problem, when having multiple javascript (or css) files (jquery.js, jquery.cycle.js, own js file)? I would prefer not to merge them myself.

Answer 1

I would recommend minify if you don't want to manually combine files, this will do it for you on the fly and create one combined/minified file.

Answer 2

It would theoretically be possible for a filter (implemented as an Apache module for instance, or in a reverse proxy that content from the web server passes through) to:

1. Scan output for calls to scripts or css files
2. Get those files, and replace the or tags with their content
3. Cache the result for a while so it can just output it next time with less effort

This would have performance problems of its own though, as the user would end up downloading the script file on every dynamic page request instead of it being able to be cached separately on their machine. This could be worked around by having the filter instead replace a calls for "script1.js", "script2.js" and "script3.js" with "combined_script1_script2_script3.js and then responding to that request with the combined script files (and the same process for styles).

Unfortunately I am not aware of any filter/proxy readily available that works this way, though you might want to scan the documentation for content shrinking proxies (those that recompress images, minify html/script/style, and so on) and to see if they can do something like this.