What is minification and why you need it?

Introduction

In an era where the internet is at its summit with thriving speeds it is important, in fact a MUST, for developers to get their sites load faster across various devices and thus take advantage of these techonological advances. Equally it is also important for us to know that not all users of our sites have devices falling in the subset of modern techonology and hence might've to wait a whole lot of time before being able to see the first paint of our sites.

Load times have a direct impact on a website's traffic and thus its revenue - having a bad one can adversely effect your business and dramatically increase bounce rates; both of which you don't want. Therefore paying particular attention to what blocks loading, what can make it better and what to correct is the spotlight of this article teaching all the necessary things you want. Let's begin!

What is minification?

In simple terms:

Minification, or uglification, is the process of reducing a file's size by removing the unnecessary bytes from within it

And the files that we are talking about here are mainly CSS and JavaScript files, although these concepts can be applied to HTML and XML documents as well.

So the definition is quite understandable, right? Minification is to reduce a file's size by chopping off things that really don't affect how that file works.

Can you think of anything in a JavaScript or CSS file that is unnecessary, for a computer, and doesn't really affect the file's execution?

Did you think comments? Well if you did then you are a good thinker!

Yes! Comments are just one thing that don't affect how CSS or JavaScript gets executed - and we have much more such unnecessary things that we can chop off in the minification process; sometimes quite obvious while sometimes not.

How minification works?

Minification isn't just about removing comments from CSS or JavaScript - there are various things in both these languages that can be done the long way of the short way. We are concerned with the short cuts only.

Now we can't dive into all the details on how minification algorithms really implement thier functionality, but yes, we can go into some details only on how uglification works.

In a simple algorithm to minify a script or stylesheet we remove comments, newline characters and whitespaces - all of which are pretty obvious to be totally useless for an interpreter.

In a more complex algorithm, for a script, we might even do one of the following:

Replace boolean true or false values with !0 or 0 respectively.
Rename variable names like counter with one or two letter names such as c.

And for CSS, we might do one of the following:

Replace color values like rgba(0,0,0,0) with transparent
Group selectors that have exactly the same or many common style properties.

Since these aspects of minification like variable renaming in scripts, as we saw above, aren't quite obvious, they fall in complex algorithms only.

Talking about file-naming some ugly code, usually most sites on the web request minified resources denoted using a filename such as script.min.js or style.min.css, by convention. The word min in the filename here isn't a requirement - it is just a convention followed to indicate that the underlying code is minified.

Why even consider minification?

This is perhaps a good question of why shall we even consider minifying our CSS and JS resources. It all sounds good about how uglifying algorithms work, but it sounds even better to know their significance which we are about to see next.

So to answer this question let's consider a very basic example:

You have a website with 10,000 daily pageviews and a JavaScript file worth 80KB, loaded on each of its pages. The file has comments in it summing up to 20KB, which can be removed since they don't affect its execution.
So the actual file's size is 80KB and of that with comments removed, which we will refer to by the minified file, is 60KB (= 80 - 20). With these statistics given can you calculate the total amount of bytes spent in loading the actual and minified files over a month? (A month = 30 days)

Actual file: 80 x 10000 x 30 = 24000000KB ≈ 22.9 GB
Minified file: 60 x 10000 x 30 = 18000000KB ≈ 17.2 GB

So you can clearly see the effect of the minified file, even though we just removed comments in the case. The difference between these can go way beyond limits when the daily traffic on a site is at high tides! Furthermore here, we only considered the case for one JavaScript file - we usually have more than one script for a page; and don't forget CSS too. Adding up all this can answer the importance of minification!

So now you surely understand why shall we even consider minifying our resources. It reduces file sizes which in turn:

Decreases loading times of a webpage and
Saves bandwidth usages

For heavy traffic and intensive requirements of resources, minification is a MUST.

However if for sites with a relatively small traffic base and a few bytes of JavaScript and CSS, we don't need to do minification. Although we can do it, it would have no significant effect on the loading of the page or the bandwidth consumption on our server so we would be all OK even if we ignore it.

Tools to minify

So now that we know the concept of minification, we can see what tools are available at our dispense to perform it on our CSS and JavaScript files.

Following are a couple of tools:

'Minify' Plugins to minify HTML, CSS and JavaScript.
Note that to use these you need to have Visual Studio Code installed.
Google's Closure Complier to minify JavaScript.
Minifier.org for CSS and JavaScript.

And there are even more of these out there, which you can check out for more details.