Minification

What is Minification

Minification is the process of minimizing code and markup in your web pages and script files. It’s one of the main methods to reduce website load times and bandwidth usage. Minification dramatically improves site speed and accessibility, directly translating into a better user experience. It’s also beneficial to users accessing your website through a limited data plan who want to save on their bandwidth usage while surfing the web.

Why minify HTML, CSS, and JavaScript (JS)

When creating HTML, CSS, and JavaScript (JS) files, developers use spacing, comments, and well-named variables to make code and markup readable. It also helps others who might later work on the assets. While this is a plus in the development phase, it becomes a negative when serving your pages. Web servers and browsers can parse file content without comments and well-structured code, creating additional network traffic without providing any functional benefit.

To minify JS, CSS, and HTML files, comments, extra spaces need to be removed, and crunch variable names to minimize code and reduce file size. The minified file version provides the same functionality while reducing the bandwidth of network requests.

Here’s how a developer would write a JavaScript file for usage on a website:

    // return random number between 1 and 6
function dieToss() {
  return Math.floor(Math.random() * 6) + 1;  
}
// function returns a promise that succeeds if a 6 is tossed
function tossASix() {
  return new RSVP.Promise(function(fulfill, reject) {
    var number = Math.floor(Math.random() * 6) + 1;
    if (number === 6) {
      fulfill(number);
    } else {
      reject(number);
    }
  });
}
// display toss result and launch another toss
function logAndTossAgain(toss) {
  console.log("Tossed a " + toss + ", need to try again.");
  return tossASix();
}

function logSuccess(toss) {
  console.log("Yay, managed to toss a " + toss + ".");
}

function logFailure(toss) {
  console.log("Tossed a " + toss + ". Too bad, couldn't roll a six");
}
// use promise paradigm to try three times to toss a 6
tossASix()
  .then(null, logAndTossAgain)   //Roll first time
  .then(null, logAndTossAgain)   //Roll second time
  .then(logSuccess, logFailure); //Roll third and last time

White space is used generously, and long, coherent names are used to declare variables.

When minified, the same code looks like this:

function dieToss(){return Math.floor(6*Math.random())+1}function tossASix(){return new RSVP.Promise(function(a,b){var c=Math.floor(6*Math.random())+1;6===c?a(c):b(c)})}function logAndTossAgain(a){return console.log("Tossed a "+a+", need to try again."),tossASix()}function logSuccess(a){console.log("Yay, managed to toss a "+a+".")}function logFailure(a){console.log("Tossed a "+a+". Too bad, couldn't roll a six")}tossASix().then(null,logAndTossAgain).then(null,logAndTossAgain).then(logSuccess,logFailure);

The minified version of this sample code is 48% smaller. In some cases, minification can reduce the file size by as much as 60%. For instance, there’s a 176 kb difference between the original and minified version of the JQuery JavaScript library.

Minification has become standard practice for page optimization. All major JavaScript library developers (bootstrap, JQuery, AngularJS, etc.) provide minified versions of their files for production deployments, usually denoted with a min.js name extension.

The CDN Perspective

Minification is a significant component of front-end optimization (FEO), a set of tools and techniques that reduce file sizes and the number of associated web page requests.

However, performing and managing minification can be cumbersome. Manual minification is a bad practice and becomes virtually impossible where large files are concerned. Even automated tools (of which there are many) can prove to be challenging, as you’ll be forced to keep separate development and production file versions. Keeping them in sync is often burdensome.