Code minification - the archaism?

Minification is a process of minimizing a size of application. Twenty, thirty or more years ago the internet connection was generally slow. We used modems and paid for every minute of using it instead of a monthly constant fee like now. Then minification of websites was crucial for user experience. The smaller code size meant the less bytes sent over the network and the faster page loading. Minification was a necessary element of the web application building process for many years. Currently, not everybody is even familiar with it. Does it mean it might not be needed anymore? Is it one of those practices that should have been forgotten nowadays when a fast internet connection is a standard?

How does minification work?

HTML/JS web page size reduction is usually achieved by removing unnecessary elements from the code. For example comments, white characters that do not influence the look of the page like line breakers or white spaces between HTML tags. Minification can go further, a lot further. Long variable and function names in Java Script can be shortened. Images can be compress or even scaled down if big ones are not required. Short links would also help reducing a page size.

For example this is an original piece of code in JavaScript:

$scope.getTotalDuration = function() {
    var total = 0;
    angular.forEach($scope.agendaItems, function(filterObj , filterKey) {
        total += filterObj.duration;
    });
    return total;
};

After minification it looks as follows:

n.getTotalDuration=function(){var t=0;return angular.forEach(n.agendaItems,function(n,e){t+=n.duration}),t}

Minification benefits

Let's think about benefits for a minute. What does minification give to the web application? As I stated in the preface, there are at least two benefits. Firstly, the network traffic is lower as the web page has less bytes. Secondly, it loads and renders faster. Those are the primary reasons of minification but that is not the end of the list. Removing white characters that are parts of code formatting, renaming variables and functions make the code also harder to understand. Is it a benefit? Oh, yes. We have the original code of the website and our users do not have to read the code at all. If someone would like to steel some parts of it then the minified version would not make his life easier. So the third benefit is code obfuscation.

I think they are the main ones. They were important 20 years ago. Now it is time to check their validity again. I can do it pretty quick because I have two versions of Agenda Timer - minified and original. Both are uploaded to the same remote server for this test.

Before each test I cleared the browser's cache. Then I opened the website with Developer Tools enabled in Chrome to measure network traffic, page load time and count a number of requests. I did it for both versions of Agenda Timer.

The below table contains average results.

 The minified application achieved better results in all three aspects.

Network traffic is twice lower which is quite significant.

Page load time is only a little shorter. The difference is rather insignificant. I think it is that small because of my fast internet connection.

The number of requests is somehow in the middle of the two above factors. The difference is noticeable but not huge.

Conclusion

My little test showed that the biggest difference was in the page size. The minified version was twice smaller than the original one. Does it make a difference? I would take a risk to say not for the end user. I believe I would not notice if the main page of my favorite website grew twice. It would load to my browser fast enough anyway to not care about its size.

On the other hand, the size may be important for the site or the server owner. A lot of users and a twice higher network traffic could require further investment in the infrastructure. Minification makes sense from this perspective.

We should not forgot about the obfuscation role of minification. I know it does not prevent analyzing the HTML/JS code by others but it does make their life harder.

I believe web applications still benefit from minification. I am going to use as long as it is easy to do.

Read more

Code minification with Gulp

Code minification and cache busting