Minification

What is minification?

In web development, minification is the process of formatting code by removing whitespaces and unnecessary space. Code that is ran on the browser should be minified, which is javascript, html and css files. There is good reason to minify a file, mainly because it helps increase the speed of the site. While the speed gain is not necessarily substantial, it is a good practice to get into.

Why?

First off, we must understand what is happening when we are on a webpage. If we go to a website – http://www.example.com, the web browser requests files from the web server. Here is a common scenario:

Files	File size
Image1.jpg	400kb
Image2.jpg	860kb
Styles.css	200kb
Elements.js	125kb

The web browser downloads the four files and retains them in storage. If we add up the file sizes there is a total of 1585kb. It doesn’t sound so bad but if we have more files and larger files then it adds up relatively quickly. If the file size is too large, we need to look into optimizing the files to minimize to load on the web browser and server.

How to minify your files?

CSS, HTML or JS files are simply text files, which means they can be opened using a text editor (be careful because some text editors will add encoding to the file which may cause the file to become corrupt and then unreadable).

Sample of a file that is NOT minified:

File that has been minified:

.progress{vertical-align: baseline;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;}[type=search]{outline-offset: -2px;-webkit-appearance: none;}

What we are doing here is simply removing whitespaces from the file.

Conclusion

The minification process helps reduce the size of files. Depending on the size of the file, this can be effective. If we reduce our 200kb css file to 30kb, we decrease our webpage load time, which makes people happy. Although the actual impact of minifying just one file probably won’t make a difference that you can see, its best to minify all the files. If you don’t minify your html, css or js code, start doing it and put the process into your workflow. One day you will be happy you did!

For help on minifying your css, js or html files, look into to our very own Minifier Tool.