Yesterday, I started to dig deeper into YSlow and decided to pick an application that we recently launched for a client. The performance grade that I saw at first was an F, which wasn’t surprising to me because we knew that there was going to be some fine tuning in the near future.
There is a lot of JavaScript in this application and we have several files to break up stuff to make it more maintainable. However, in production, we really don’t need to send the client (browser) 19 different JS files. We’ve been using mod_deflate to compress these files, but it doesn’t solve the problem of having several connections opening to download all the necessary JavaScript. The same is true for our CSS files.
At RailsConf, DHH announced that an upcoming version of Rails would bundle all the stylesheet and javascript files into one file and compress it. We’re running on 1.2.x for this application and decided to look at the AssetPackager plugin as a good solution to this problem.
I installed the plugin via piston and ran the following task, which is provided by AssetPackager.
```rake asset:packager:create_yml```text
This went ahead and created config/assets_packager.yml. I then went
ahead and updated our capistrano configuration to call the rake task
after updating the code on the server when deploying.
```ruby
desc "all of our other tasks/commands to run after updating the code"
task :after_update_code do
#
# all of our other tasks/commands
#
run "cd #{release_path} && rake RAILS_ENV=production asset:packager:build_all"
end
The first thing that I noticed was that the yml file that gets generated
will not make any assumption as to what order the javascript libraries
should be loaded. So, immediately, line 1 of our compressed javascript
file was causing an error as the code was trying to reference a library
that hadn't been defined yet (showed up later in the file). So, when you
do this, you'll need to organize the yml file to load things in order
that they are needed. This was also a good opportunity for us to say,
"oh, we're not using that one anymore. Let's remove it."
```yaml
```ruby
---
javascripts:
- base:
- prototype
- effects
- scriptaculous
- controls
- dragdrop
- application
- slider
- pngfix
- nav
- lowpro
- lightbox
- folder
- builder
Great, so we re-dployed and everything at first glance seemed fine...
*or so we thought!*
We used the [unobtrusive javascript plugin](http://www.ujs4rails.com/)
for this project and it seems that we couldn't just compress every
single file. Each page has a behaviors javascript file and since
everything was being compressed into one file (and cached), RJS calls
quickly broke throughout the site. **OH NO!**
So, I opted to merge all of the other javascript files and use the
standard way of including unobtrusive javascript in the application
layout.
```erb
```ruby
<%= javascript_include_merged :base %>
<%= javascript_include_tag :unobtrusive %>
We also removed `lowpro` from the list of javascript files to compress
since the ujs plugin is currently including this when we call
`<%= javascript_include_tag :unobtrusive %>`. I plan to look into
modifying this so we it'll only include the page-specific behaviors and
not load the lowpro javascript file (so we can compress that as well).
Once this was re-deployed, we saw that the RJS issues were resolved and
everything felt to be loading quicker. But, let's look at YSlow again
for step 1 in improving the performance of the application.
**side note:** the following grading was also after making some other
adjustments that were suggested by YSlow, which I'll discuss in another
blog post soon.
So, where we once had a grade F, we now have an D... which is due to the
client having us add several (four) external javascript files for mint,
google analytics, etc. We're only loading 3 javascript files for the
application, when we were originally loading many more.
Obviously, there is some more tuning to be done, but we went from a
grading of 43 to 74 in about three hours of time spent reading the YSlow
documentation, adding asset_packager, and making various tweaks to our
web servers (as suggested by YSlow).
Until next time...
Related Posts:
- [Every Second Counts with a Piston in your
```text
Trunk](http://www.robbyonrails.com/articles/2007/01/16/every-second-counts-with-a-piston-in-your-trunk)
