How and why should you minify your code?

Code minification consists of taking a file X and reducing its size as much as possible while preserving all the information contained within it.

Minification can make a file relatively unreadable for a human being, but a machine must be able to read it in the same way as the original file.

This mechanism mainly makes sense in the web world where not all instructions sent to the browser are compiled but interpreted; in the case of a lower-level language, it's the compiler that takes care of "minifying" the code.

But what exactly does this mechanism consist of on html, css, and javascript files? Here are the transformations applied:

• Removal of comments
• Removal of "empty" characters (spaces, tabs, line breaks)
• Shortening of variable and function names (for Javascript)
• Grouping of several files into one (by file type)

Be careful, minification is neither compression (see gzip) nor real obfuscation (making the code as difficult to understand as possible to prevent reverse engineering).

The advantages

Lighter files

I don't know if I really need to explain this point in detail because logically, when you remove characters from a file, it gets lighter, quite simply!

To be more precise, the percentage of file size reduced by minification will vary depending on the rate of comments and empty spaces present in the file, but reduction rates of more than 60% can be achieved, which is not negligible!

Fewer requests

For the same total weight (let's say 100KB of code), a single file will load much faster than if it is split into 10 files each weighing 10KB, the reason lies in the optimization of the number of requests.

For each file, an http(s) request will be sent to the server, the server will have to find the file, build the response, send it, and the browser will have to download the resource.

Apart from the download time which will vary depending on the file size, all other waiting times are incompressible, meaning they are necessary for the proper functioning of the system.

Combining these 10 files into one will allow you to divide these mandatory waiting times by 10, and thus improve your site's performance.

Keeping your code readable

More than an advantage, this is mainly a side effect. Because yes, it is possible to develop entirely without comments and by already grouping your code into as few files as possible, but this leads to a codebase that is very hard to read, maintain, and likely to cause numerous errors during the development phase.

With minification at your site's build time, you will be able to keep separating your CSS and Javascript into as many files as necessary to keep them readable, and add comments to document the code as much as possible, all while preserving its final performance!

Tutorial

If you want to learn how to minify a project, I invite you to read my introductory tutorial on Parcel, a very easy-to-use application bundler that will also minify your files!