|File||Original||Minified||Gzip||Min + Gzip|
Why Are drupal.js and jquery.once.js Smaller When Minified?
One thing that surprised me right off the bat was that drupal.js and jquery.once.js are smaller minified than compressed with gzip. These two files have lots of fantastic documentation in them. When a file is minified this is stripped out as it's not needed for functionality. When the file is compressed with gzip all of this text is compressed and shipped. Well documented files like these can really benefit from being minified.
Total File Savings
The savings between gzip compression and gzip plus being minified is 44067 bytes. If you figure you have 10,000 downloads of this bundle of files per month that's a savings of 420 Megs of bandwidth savings in a month. No small amount. Even though drupal.js and jquery.once.js are small we have over a 3 Meg savings in bandwidth for just these two files at 10,000 downloads a month.
Round Trips Saved
The real fun starts to appear when we look round trip requests. To understand why this matters I would first suggest reading TCP and the Lower Bound of Web Performance by Steve Souders where he talks about connections, TCP slow-start, and how it matters. To put it way to simply, when a browser fetches a file from a server it does it in multiple round trip requests. Each of these round trips has a delay as communications travel between a browser and a server. On mobile networks this delay can be several times that of a wired connection for each of the round trip requests. So, to speed up performance for an individual user it can be helpful to remove unneeded requests.
- Original: 156297 bytes
- Minified: 97984 bytes
- Gzipped: 53810 bytes
- Min + Gzip: 37698 bytes
This produces a savings of:
- 15.7 Kb per download.
- 1 round trip per user.
Update: I wanted to note that I used UglifyJS to minify the files. This is the tool jQuery uses.