Combine, minify, compress and cache css and js files... useful? feasible?

I was reading yesterday an article about web site performance @ yahoo developer network and wondered if this could be useful and/or feasible for MODx.

What if all the calls to regClientCSS() for a document were merged into a single <link type="text/css"> output. The href of this <link> tag would be a new file with all the original CSS files combined, posibly minified and/or gzipped (in case the host doesn’t have mod_gzip or mod_deflate). The combined CSS file could be cached for further use.

This way the HTTP requests are minimized (by combining the files) and the size of the HTTP response is reduced (by minifing and gzipping them).

AFAIK, the same could be done for javascript files with regClientScript() and regClientStartupScript().

Hi Cassiel,

If it’s at all relevant, I’m running my main layout CSS through the API, rather than using real files. It’s allowed me to split the CSS into several files (for fonts, layout, furniture and so on) but only have one http call. It also makes use of MODx’s caching.

I created a series of chunks to hold the actual CSS rules, then a document in the file tree (CSS file type) to call them all.

So far as I know, most regClientCss calls are optional, so you could easily include the relevant CSS in the main CSS file.

You can also remove extra http calls for IE-specific CSS files by using a conditional comments div per http://modxcms.com/forums/index.php/topic,16377.0.html.

I’m afraid I can’t help on the compression front

Astronut,

Yours is definitely a great idea for CSS files not inserted by snippets using the regClientCSS() call. My usual approach to the matter was to copy & paste all CSS files into just one.

But I was more thinking about the case when several snippets insert CSS and javascript files using the regClientXXX calls, and if there would be feasible / useful to combine them (also with the CSS or JS files "manually" placed in the template), minify them... and the rest.

Now I’m thinking about a plugin that could do all that stuff before the page is rendered.