I'm not one for spending time applying micro-optimisation to code, but when it's relatively simple and potentially improves the user-experience I'm willing to give it a try.
I recently worked on a complex Merb site with a large amount of CSS and JS. With the client complaining of sluggish page load times I invested some time in exploring the results of Yahoo's YSlow plugin for Firebug. I started with optimising the filesize of the Javascript and CSS.
Merb's asset helpers already has built in bundling, which is a step in the right direction (reducing the number of HTTP requests):
This takes the three specified CSS files and bundles them all into one file called "app_bundle.css". This syntax can also be used for bundling JS. Note, by default assets are not bundled in development, meaning all three files will be included when testing. If you want to enable bundling in any environment set :bundle_assets in the Merb config to true:
However, this simply concatenates all the files together - maintaining the file structure and whitespace. To further optimise we can minify the contents of the files. For this I use Cory ODaniel's ruby-yui gem, which wraps Yahoo's YUI Java command line compressor. To apply this to our bundled files we add callback to the asset bundler. Add the following code to your init.rb file:
This overwrites the bundled file with the compressed format, saving bandwidth and reducing HTTP requests! Good, right?
Caveats:
Be careful with your bundled CSS. I've found that bundling invalid CSS can cause rendering problems in Safari that don't appear unbundled in Safari but still render fine in Firefox. The solution is obviously ensuring all your CSS is valid, but I think it's worth noting.
Remeber, ruby-yui is just a wrapper for the Java command line YUI compressor. Deploying to a live server without Java installed means no compression! (now, who would make that kind of mistake?)
Enabling Gzip on static files achieves a similar goal for the CSS files, but the minification reduces the size of the JS by replacing variable and function names with shorter names (amongst other things), something Gzip can't do.
