Minification: How to Win at the Website Speed Race

Published Date

Minification is a vital process to win the website speed race

If your webpage loads slowly, every second of delay increases the chance of the visitor to your site just not waiting. Page load times are essential criteria, particularly on mobile browsers,  for ranking your website by Google. This is not breaking news, everyone knows this but there are some lesser known insights that can help you fix it. Page speed is also dependent on your page resources – that backend code that impacts file size. There is a process called minification that must be performed after the code for the web application is completed but before it is deployed. Most websites don’t do this.

What is minification? 

Minification is a process of analyzing the text-based back-end code and reducing its overall size. It is important to know that in this process there is no change in functionality at all. What it will do is strip the code of all data that is not required for the page to execute. This happens from the web server side before a response is sent to the client browser. After minification is completed, the minimized version is sent resulting in faster response time and lower bandwidth usage.

Minification will be applied to scripts, stylesheets as well as other components that are needed to render the site on the web browser. 

Minification differs from the traditional compression process though some websites might use both. In decompression techniques, the code has to be decompressed before it can be read, modified and executed, not so in minification.

Minification takes a file and removes unnecessary characters so that it only includes the data it needs. Compression takes this file and makes it even smaller by using GZip or the newer Brotli.

Here is an example to understand the steps involved in minification:

1. A web developer in the development phase creates a JavaScript and CSS file for the application. This will almost always have whitespaces,comments, lengthy variable names, etc. to make the code understandable to others who are also working on the application.

2. Once development is completed,the developers will use minification tools to convert the file into one that’s more optimized, but harder to read.

3. The web server will use this minified file when responding to web requests, enabling faster response time and lower bandwidth usage.Functionality remains unchanged.

Minification of CSS Effect

Smaller resource files equal faster website-a real example

The importance of minification as a factor in improved page load times cannot be over-emphasized. A real-life example can drive this point home.

An example of a website with small file size is  and on the other hand is a website that still has comparatively large files. Everyone knows BBC or British Broadcasting Corporation that produces world-class content in their programs and news broadcast. Gizmodo Media Group is an online media company and blog network.