Firebug, YSlow, asset_packager and why your website is “slow”

When tasked to improve a web app’s performance, the first thing that developers often do is tweak the backend – web server, database, for example. But according to the Yahoo! Exceptional Performance Group, most optimization opportunities exist after the requested page has been given to the browser. For example, when a URL is entered into the
browser, 62% to 95% of the time is spent fetching the images, CSS, JavaScript contained in the page.

As a result of their study and experiment, the Yahoo! team has identified 13 rules to improve website performance. To know which of these rules you have violated, you can use YSlow, a Firefox add-on that works with Firebug. If you’re not using Firebug, you’re missing a lot🙂

One of the rules is Minify JavaScript (rule #10). Minification removes unnecessary whitespace to reduce file size thereby reducing download time. In your Rails app, you can use the asset_packager plugin to minify your JS and CSS files. You can also combine your several JS into a single file to avoid multiple file requests. During the development, the plugin uses the unminified JS and CSS so you could still edit and test them. In production, the plugin uses the minifed versions. You can also add a capistrano task to automate the minification.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s