When I was at DrupalCon Denver I suggested that all production JavaScript should be minified. This seemed like something simple that I wouldn’t get any push back on. After all, the major JavaScript packages do it and the performance recommendation tools all recommend it. I was wrong. Over the past couple weeks I’ve received push back from numerous people who’ve told that me if you use gzip (or deflate) compression there’s no need to minify JavaScript. So, here is a case for minifying JavaScript.

A good place to start is with size examples for different files. The table below has a breakdown for discussion. The three files used in the example here were chosen because they are used on ever page in Drupal where JavaScript is used.

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.

With JavaScript files in the head of a page this can be extra important. JavaScript files can block the rest of the assets in a page from being downloaded. Drupal puts these assets in the head of a page. Saving time on these files means the rest of the assets in a page start downloading sooner.

To download the original uncompressed set of files would take 10 round trip requests. To downloaded the gzipped version would take 6 round trip requests. By minifying the JavaScript in addition to gzip compression we save 2 more round trip requests to get the same functionality.

Extending This To All The JavaScript

Here I’ve only touched on the base JavaScript included in Drupal. Now lets extend this to ajax.js, form.js, jQuery UI, and all the other JavaScript in Drupal. By minifying files we can reduce the bandwidth and save on round trip requests giving our users a performance improvement without sacrificing functionality.

To do one last test I took an aggregated from from drupal.org. This file already includes a minified version of jquery.js so the improvements we will see are from JavaScript files bundled with Drupal and contributed modules. The sizes were:

• 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.

Minifying files can have a real world performance difference. There is a reason jQuery calls the minified version the production version and the original source the development version. If you want to start using minified Drupal core JavaScript files now checkout the Speedy module.

Update: I wanted to note that I used UglifyJS to minify the files. This is the tool jQuery uses.