Saturday, 24 March 2012

Compressing JSS and CSS: results on our new web app

Our new app (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.


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


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.


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


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


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


Results exported with the wonderful NetExport plugin for Firebug.

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

1 comment:

  1. Harrah's Casino in Harrisburg, PA - TheJTA
    The casino 수원 출장샵 in Harrisburg is owned and 과천 출장샵 operated by Harrah's 전주 출장안마 Gaming & Entertainment and was 광양 출장샵 previously sold to 광양 출장샵 Penn National Gaming.