What are Minification and CDN?

Minification is the process of reducing the size of files to load content faster which results in lower bandwidth, faster results and better user experience.

Step by step minification process:

It is a very simple process:
1. Write the code in development environment.
2. Minify the file.
3. Deploy it on the server and you are ready to go.

When the user opens the web page, a minified file is sent to the client’s browser.

Minified
Minified JS file

______________________________________________________________________________

Normal JS file
Normal JS file

You may have noticed the difference between a normal and a minified file as shown in above images. When you minify a file all the white spaces are removed and long variable names are shortened. The minified file has less size which results in lower bandwidth consumption and loads web page 60% faster. There’s a difference of 150kb+ between the normal and minified version of JQUERY JS library file.

Content delivery network (CDN)

The best practice is to load all assets and JS files through CDN. There are different cloud vendors which offer CDN services like Azure CDN and AWS CDN.

CDN always cache files for better performance and request management. It’s always recommended that you version your files so when you push a new change in JS file, CDN loads a newer version.

For example: There’s a file named login.min.js?v=1.0. When you make changes in this file, update it’s version to login.min.js?v=1.1 so server always sends an updated version with new changes.

Minification Tools

There are a lot of tools available on market but following are the most popular ones.

Leave a comment

Your email address will not be published. Required fields are marked *