Why Minify js (JavaScript)?
Minify js: When I was at Global Coding Community, I suggested that all JavaScript production should be minimized. This seemed like something simple about what would not push me again. After all, the main JavaScript packages do it and all the recommended performance tools recommend it. I was wrong. During the last two weeks, I received a rejection from many people who have told me that if you use gzip compression (or deflate), it is not necessary to reduce JavaScript. Therefore, here is a case to minimize JavaScript.
Do not know much about coding?
Go to minify js tool to reduce site size without any coding headache.
A good place to start is with sample sizes 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 in all Drupal pages where JavaScript is used.
The JavaScript files and their sizes when they are reduced and gzip. The file sizes are in bytes.
| File | Original | Minified | Gzip | Min + Gzip |
|---|---|---|---|---|
| jquery.js | 252881 | 94840 | 73775 | 33656 |
| drupal.js | 13852 | 3338 | 4708 | 1457 |
| jquery.once.js | 2974 | 568 | 1081 | 384 |
| Total | 269707 | 98746 | 79564 | 35497 |
Why are drupal.js and jquery.once.js smaller when they are reduced?
One thing that surprised me immediately was that drupal.js and jquery.once.js are smaller than tablets with gzip. These two files have a lot of fantastic documentation on them. When a file is minimized, it is deleted because it is not necessary for the functionality. When the file is compressed with gzip, all this text is compressed and sent. Well documented files like these can really benefit from being minified.
Minify js: Total savings files
The savings between gzip compression and gzip plus reduction is 44067 bytes. If you think you have 10,000 downloads of this file package per month, that will save you 420 Megs of bandwidth savings in a month. There is no small amount. Although drupal.js and jquery.once.js are small, we have a bandwidth savings of more than 3 Meg for these two files at 10,000 downloads per month.
Minify js: Round trips saved
The real fun begins to appear when we look at the round trip requests. To understand why this is important, I would first suggest reading TCP and the lower limit of Steve Souders’ web performance, where he talks about the connections, the slow start of TCP and its importance. In short, when a browser obtains a file from a server, it does so in several round-trip requests. Each of these round trips has a delay in communication between a browser and a server. In mobile networks, this delay can be several times greater than that of a cable connection for each of the round trip requests. Therefore, to speed up the performance of an individual user, it can be useful to eliminate unnecessary requests.
With JavaScript files in the header of a page, this can be very important. JavaScript files can block the rest of the assets on a page so they do not get downloaded. Drupal puts these assets at the head of a page. Saving time on these files means that the rest of the assets on a page start downloading first.
Downloading the original uncompressed file set would take 10 round-trip requests. Downloading the gzipped version would take 6 round-trip requests. By minimizing JavaScript and gzip compression, we save 2 more round trip requests to get the same functionality.
Minify js: Extending this to all JavaScript
Here I have only played in the base JavaScript included in Drupal. Now we extend this to ajax.js, form.js, jQuery UI and all the rest of JavaScript in Drupal. By minimizing files, we can reduce bandwidth and save on round trip requests, which gives our users an improvement in performance without sacrificing functionality.
To make a final test I took an aggregated form of drupal.org. This file already includes a reduced version of jquery.js, so the improvements that we will see are from the JavaScript files included in Drupal and the 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.
File reduction can have a real performance difference. There is a reason why jQuery calls the reduced version of the production version and the original source of the development version. If you want to start using minified Drupal core JavaScript files now checkout the Speedy module.
Read More: PHOTO CROP ONLINE: WHY SHOULD YOU USE IT?
