18
Jul

mod_proxy + Gzip + rails gotcha

posted by vdimos 2 comments

As I was browsing our price aggregator (Skroutz), looking for things we might need to rethink or change completely for the next version, I was trying to determine the way the page loads, and how we could improve the user experience.

A very nice tool, I am sure most webdevelopers are almost familiar with is the firefox Firebug extension. Besides allowing you to actually write to the dom tree as it is rendered by the browser and many other goodies, it shows you the HTTP requests a page load performs in the background.

There are two things you can do to make your page load a bit faster.

  • Since the browser can have only two simultaneous requests open to the server you can lower the number of files your page needs. This includes images css and js files.
  • You can and in most cases should content compression.

Back to our specific example. What I did see with firebug is that our css and the js files ( a whopping ~250k) werent compressed!
As it turns out we are victims of conventions.

In RoR you normally have this kind of code in your application.rhtml

<%= javascript_include_tag “prototype” %>

This has the added benefit that rails appends a timestamp to the file you include. creating something like this

/stylesheets/wowbagger.css?1231234124123

The timestamp is the last updated date of the file. When a dev changes the file on the server the timestamp gets updated, and the client will not use his cached version but will request a new one.
All very nice and it ensures that you distribute always the newest files.

Now lets look at the Apache Mod-proxy setup as it is suggested on the Mongrel website:

  1. Redirect all non-static requests to cluster
    RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
    RewriteRule ^/(.*)$ balancer://mongrel_cluster%{REQUEST_URI} [P,QSA,L]
  1. Deflate
    AddOutputFilterByType DEFLATE text/html text/plain text/css
  2. … text/xml application/xml application/xhtml+xml text/javascript

These two lines combined with the rails timestamp appending practically disable css and js compression. Leaving you serving prototype and scriptaculous (>150kB) uncompressed.
There is one thing that I can’t explain so far though. Even if the file is passed to mongrel, shouldn’t it be gzipped??

Any enlightening comments anyone?

Comments (2)

Pin jiannis@funtasia.gr said on Sep 18, 10:03 PM:

Saying hi with a useful comment :)

We've been using the asset packager plugin http://synthesis.sbecker.net/pages/asset_packager to combine all our javascript and stylesheets into one (which also does some minimal compression by removing comments and whitespace and does not cock up) and then the apache deflate module to
gzip everything on the fly.

In our new application, javascript accounts for 25% of our page size and from a total of 850kb we
got it down 371kb uncompressed, 115kb compressed!

Let's have a cup of coffee one of these days..

P.S HOT For more funky stuff with javascript check out the Dojo toolkit pipeline..

Pin vdimos said on Sep 20, 06:57 PM:

Hey Jianni,
We use mainly gzip compression. I tried the asset packager once in his early stages and well wasn't very excited, but I give it another try for the new Skroutz version. Another thing users of prototype should do, is digg into the code and remove those parts that are not needed. This has the extra sideeffect that it speeds up JS a bit too.

I looked at Dojo last year but it was certainly a 800-pound gorilla back then. As far as I can see they have some selective load workaround and a custom js minimizer added, but still feels like it is hogging to much browser resources. ExtJS is sure another very nice JS framework, but too much magic for me.

Coffee sounds nice. We talk on the phone..

Regards
Vasilis