July 12, 2011 18:28

Irecently needed to fix my CSS and JS (asset) distribution for a project at work. It was my first time doing this but had some great success with Jammit.

Jammit will help with minifying JS/CSS and package them all up as one file. This does a couple things. It first allows you to have smaller files to download, which take less time for the user to download them. Second it packages them into one file so there are less HTTP request to download different files. These two changes will really help page loads.

On top of using Jammit, you will want to setup mod_deflate for Apache. This was partially setup for me by default. You will need to tweak the httpd.conf file a bit. Here is mine:

ExpiresActive On
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript application/javascript
<Directory "/var/www/fitness/public">
  ExpiresDefault "access plus 1 year"
Header unset ETag
FileETag none

This actually sets up future expiration dates on files, so they are cached for a longer period of time. This also disables ETags.

I recommend install YSlow for FireFox and testing out your sites. I started with a C grade and moved to and A grade with about a days worth of work. The descriptions for fixes all link to the YUI performance guidelines. These are all pretty helpful, but can be a bit confusing the first time through. Just set your Rails environment to production mode and test it out. You can easily see which items are caching and which are being download from the Net tab in FireBug.

Overall Jammit really made to process easy and had decent documentation. It took a bit of playing around with, but overall was very worth it.