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 |
CSS
 |
| Before: CSS |
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 |
CSS
 |
| After: CSS |
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