Explore Posterous

Performance tools / Stoyan's phpied.com

Loading mentions Retweet

Comment (0) »

JS and CSS optimisation with ruby-yui and Merb

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.

Loading mentions Retweet

Comment (0) »

Tips to Speedup your website easily

If you use YSlow Firefox toolbar,  by now you should have a decent idea about why your website is slow or what you can do to get it up to speed. Here is a quick list of how to solve some of the problem that YSlow points out and others that I find useful.
1. Add Expires Headers
You need to set the expires headers in your .htaccess file in your web root or htdocs directory. For the beginners here is what I would suggest you to use:

2. Disable FileETag is you don't use it
ETag (entity tag) is an HTTP response header returned by an HTTP/1.1 compliant web server used to determine change in content at a given URL. ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date but If you’re not taking advantage of the flexible validation model that ETags provide, it’s better to just remove the ETag altogether. Removing the ETag reduces the size of the HTTP headers in the response and subsequent requests thus improving site performance.
Add the following to your .htaccess file to remove ETags:

3. Compress components with GZip
Compressing the content (html, js and css), is an important step in optimizing the performance of your site. Depending on the amount of content you have on your site, at a minimum it should give at least 10% improvement in speed.
The code below needs to be added to the .htaccess file in your docroot.

Loading mentions Retweet

Comment (0) »