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:
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.
Did you think comments? Well if you did then you are a good thinker!
How minification works?
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:
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 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.
Tools to minify
Following is the list:
And there are even more of these out there, which you can check out for more details.
The best deal in our view, is to use Visual Studio Code's plugins since we only need to press one key and we get a new minfied file created instantly. - no need to have a web connection, create new files yourself, copy and paste code; VSCode does it all for you.
But the final choice is always your own! Good luck minifying.