Pinterest Stumbleupon Whatsapp
Advertisement

We’ve all been there, you learned how to build an awesome website How to Make a Website: For Beginners How to Make a Website: For Beginners Today I'll be guiding you through the process of making a complete website from scratch. Don't worry if this sounds difficult. I'll guide you through it every step of the way. Read More , but once you publish it, it’s unbearably slow.

Minifying your javascript is one way to speed up website response times (along with compressing HTML How Compressed HTML Works and Why You May Need It How Compressed HTML Works and Why You May Need It In this article, we'll go over the two main methods for compressed HTML, why HTML files should be shrunk, and how to go about it. Read More ), and fortunately for you, it’s an easy process. Today I’ll show you everything you need to know.

What Does Minify Mean?

The process of minification (or minifying) is a simple concept. When you write code in JavaScript or any other language, there are many features that are only required to make the code easier for humans to understand — computers don’t care what you call your variables, or how much spacing there is around brackets, for example.

minified code

By minifying code, you can drastically reduce its file size. A smaller file will therefore be quicker for your users to download. If you’re only writing one or two lines of JavaScript, there probably won’t be a noticeable improvement. However, if you’re writing a lot of code, or using large libraries such as jQuery, noticeable performance increases and drastically reduced file sizes are easily achievable!

If you load code from an external CDN What CDNs Are & Why Storage Is No Longer An Issue What CDNs Are & Why Storage Is No Longer An Issue CDNs make the Internet fast and websites affordable even when you scale to millions of users. Firstly, bandwidth costs money; those of us on limited contracts know that all too well. Not only do you... Read More , such as Google Hosted Libraries, you’ve used minified code.

What Does Minified Code Look Like?

Let’s look at some examples. It’s hard to see the impact of minification on small code bases, so I apologize in advance for their long length.

Here’s some unminified JavaScript from our guide to using JSON with Python and JavaScript:

// setup some JSON to use
var cars = [
  { "make":"Porsche", "model":"911S" },
  { "make":"Mercedes-Benz", "model":"220SE" },
  { "make":"Jaguar","model": "Mark VII" }
];

window.onload = function() {
  // setup the button click
  document.getElementById("theButton").onclick = function() {
    doWork()
  };
}

function doWork() {
  // ajax the JSON to the server
  $.post("receiver", cars, function(){

  });
  // stop link reloading the page
  event.preventDefault();
}

Here’s the minified code:

function doWork(){$.post("receiver",cars,function(){}),event.preventDefault()}var cars=[{make:"Porsche",model:"911S"},{make:"Mercedes-Benz",model:"220SE"},{make:"Jaguar",model:"Mark VII"}];window.onload=function(){document.getElementById("theButton").onclick=function(){doWork()}};

This minified version of the code is 39 percent smaller. In this example, the variable names remain the same, but all the whitespace and comments have been removed.

Here’s another example from our guide to jQuery:

// dfd == deferred
var dfd = $.Deferred();

function doThing() {
    $.get('some/slow/url', function() {
        dfd.resolve();
    });
    return dfd.promise();
}

$.when(doThing()).then(function(){
    console.log('YAY, it is finished');
});

Here’s the minified code:

function doThing(){return $.get("some/slow/url",function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log("YAY, it is finished")});

This time there was only a 26 percent reduction — that’s still very good for such a minor block of code.

Here’s one final example from our guide to Javascript and the DOM:

//declare a new variable to hold a new h1 element

var newHeading = document.createElement("h1");

//add the text node to the document

var h1Text = document.createTextNode("Heading Level 1");

//make it a child node of the new heading

newHeading.appendChild(h1Text);

//append this as a child of element defined as "bt"
document.getElementById("bt").appendChild(newHeading);

Notice how there are a lot of comments and whitespace. The minified version reduced the filesize by 52 percent :

var newHeading=document.createElement("h1"),h1Text=document.createTextNode("Heading Level 1");newHeading.appendChild(h1Text),document.getElementById("bt").appendChild(newHeading);

Here are the sizes of some common JavaScript Libraries compared to their minified versions:

  1. Highcharts: 1 MB > 201 KB
  2. jQuery: 270 KB > 90 KB
  3. MooTools: 164 KB > 93 KB

Some of these libraries show a significant size reduction when compressed (~80 percent), while others are not quite so good (~40 percent). That said, any saving will make your website faster for your users, and reduce the strain on your web server.

How Do You Minify?

Now you know how it works and what it looks like, let’s dive into how to do it. Don’t worry, there’s no need to manually modify your code at all! There are a variety of tools freely available which handle the process for you.

These work in several ways. Most online tools allow you to copy and paste code, which they will then process and return to you on the page. These tools will often let you upload multiple files as well.

Here’s a short round up of the online tools. They mostly work the same so you don’t need to worry too much about which one to choose.

JSCompress — I personally use this website the most if it’s just a quick job. It’s fast to run and they even show you the tools they used to build it.

jscompress

JavaScript Minifier — This tool works well, but it really shines as an API. This lets you build your own integration or service on top of their existing website.

javascript minifier

JavaScript Minifier — Another website with the same name, this tool is as simple as they come. No options or menus, just one button.

havascript minifier

Minify — This website looks amazing, and the developers have clearly paid attention to the details here.

minify

This list could go on forever. There are so many online tools to minify websites that it’s hard to go wrong.

Minifying tools also exist as command line tools or plugins for your JavaScript editor Top 5 Javascript Editors That Can Make Coding Much Easier Top 5 Javascript Editors That Can Make Coding Much Easier These days, there are only five editors worth your consideration when writing JavaScript. You can find dozens of alternatives, but none of them hold a candle to these, so don't waste your time. Read More . These tools are often much faster to use, and “just work” with your existing code. There’s no need to copy and paste, and you don’t have to extract your JavaScript from any HTML or CSS which may be in the same file.

If you’re using Microsoft Visual Studio, the Bundler and Minifier extension from the marketplace has over 600,000 installs! Not only that, but it’s regularly updated and available on GitHub.

If you’re a fan of Sublime Text like I am, then the Minify package is the one you want. With over 61,000 installs, it’s a very popular package, and one that is also available on GitHub, should you wish to contribute to an open source project.

sublime minify

Finally, if you’re a PyCharm user, you can configure it to integrate directly with many common compression tools such as YUI compressor. Many of these tools directly power the online tools listed above.

Caveats

There has to be a catch right? Nothing can ever be perfect. Well, yes, there is one problem, but it’s fairly minor and easily worked around:

Minified code cannot be restored to its original state.

When you minify any code, its original form is lost. You need to keep a copy of it if you want to have any hope of easily making major changes — it’s not enough to use version control What Is Git & Why You Should Use Version Control If You’re a Developer What Is Git & Why You Should Use Version Control If You’re a Developer As web developers, a lot of the time we tend to work on local development sites then just upload everything when we’re done. This is fine when it’s just you and the changes are small,... Read More .

While it is possible to unminify your code, it’s never quite the same again. All your valuable comments are lost, for one thing.

This isn’t a huge problem, but you need to keep it in mind when coding. As a basic rule, uncompressed > developing and compressed > production.

Now you know everything there is to know about minifying JavaScript! Minifying code is one of the ways to squeeze performance out of a server, and all the big websites are doing it.

What tools do you use to minify your code? Do you even bother? Let us know in the comments below!

Image Credit: NavinTar via Shutterstock

Leave a Reply

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

  1. Chris
    July 29, 2017 at 9:33 pm

    I wish this article provided a solution to the the caveat of minification. I know it's not an easy problem to solve, but it would be educational for some suggestions on ways to keep a human readable version of your codebase around. I was hoping for some real world professional examples - maybe some tactics your own web developers take.

  2. Doc
    July 29, 2017 at 6:22 pm

    Unfortunately, universal support for gzip compression means that text (like HTML or Javascript) is compressed for transport anyway, making this meaningless (except to obfuscate your code).