Saturday, 24 March 2012

Compressing JSS and CSS: results on our new web app

Our new app cardsinthepost.com (not yet released) relies heavily on modern techniques such as AJAX. Specifically it does a lot of Javascript and requires a lot of libraries. We're in the process of reducing the number and size of those, but today we wanted to see what could be done using automated techniques.

Using separate, uncompressed files

In debug mode, our app brings in each JS and CSS file seperately, uncompressed.

This is not a scientific test because in 'debug' mode the back-end is (much) slower as well as the front-end. But note the grey bars: those are 'blocked requests' i.e. the browser has opened its max sockets to our webserver (usually 6, browser dependent) and until one of those is freed up, it can't get the next file.

Also unscientific because this was also using 'jquery-ui' already minimised, meaning the filesize difference would be more significant otherwise.

Javascript

Before: JS
13 requests, 171kb, taking 13 seconds.

CSS

Before: CSS
4 requests, 10kb, taking 12 seconds (concurrent).

Note how the CSS is being blocked by the Javascript. That's a good reason to move the JS down out of the HTML head to the bottom of <body>.

Using unified, compressed files

When switched to production mode, our app combines all the Javascripts into one file and all the CSS into one file, then runs Google Closure to compress the Javascript and Yahoo's YUI Compressor to compress the CSS. It does this once during deployment and the result is normal files on the file system.

Javascript 

After: JS
3 requests, 115kb, taking 1.2 seconds.

CSS

After: CSS
2 requests, 9kb, taking 0.1 seconds (concurrent).

Results

A reduction from 17 requests to 5, from 181kb to 124kb and from 13 seconds to under 1.5 seconds.

Notes

Results exported with the wonderful NetExport plugin for Firebug.

The technologies doing the magic that haven't been mentioned are Assetic and Symfony2.

No comments:

Post a Comment