How to Minify Your JavaScript?

If you haven’t explored the idea of minification yet, don’t worry it’s a piece of cake. In fact it will probably take you less time to implement than it will to read this tutorial and it will give you instant gains on your website’s performance. It is very easy and smooth way to boost your website speed time and bandwidth with minify JavaScript. Since it reduces file size without actually changing any of the valuable content. Less file size equals less bandwidth. Page load time effect when web user requests any content from server. As we all know page load times have a significant impact on user experience and therefore your overall SEO and search engine results.

What Minification is not?

What Minification is not?

It is not encryption for more advanced security features which takes plane everyone can read it data and translates it into top secret only those with the encryption key can read it data. Since JavaScript has to be downloaded and run on the end client’s browser in order to render your site properly, JavaScript encryption isn’t really a thing in today’s world. It needs to stay in a readable format in order for it to be interpreted and executed by JavaScript runtime which is not designed for decryption.

If you are really worried about security in this area for instance if you’ve got some proprietary code that you’d like to hide or you just want to make a super duper aggressive move against a handful of spam bots that you suspect are looking for JavaScript vulnerabilities. Then the best you can probably do is to obfuscate your JavaScript. This gives you general protection against casual observation of your JavaScript code but you should know that it doesn’t prevent anyone from stealing it if they really want to and it indicates obfuscation and even encryption if it were possible.

Reduce the file size

Reduce the file size

Does nothing to reduce file size which is really our main goal here? Now we are also not talking about compression which similar to encryption is a process that translates the data. So to speak with a singular goal of reducing the number of bits required to represent it. We all know compression from programs like WinZip, 7-zip, WinRAR and so on which can take any file be it text, code, audio or video and scrunch it down to use a highly technical term into a smaller file size to reduce its impact on storage and bandwidth.

What is Uglification?

You also might have heard the term uglification? That’s exactly what we are talking about. That is just another way of minifying your JavaScript. Let’s now talk about what minification actually is. All it is taking any JavaScript file which is formatted for the developer to be able to read clearly and to more easily navigate through it and reducing it into just the content itself without all the comments and the formatting, the spaces and line breaks etc. Taking it from this, which is formatted to be read easily by humans they can navigate through the various functions and sections. They can edit it or review it if they need to and rendering it out harder for the human to decipher but making no difference whatsoever, to a computer.

Same script, same functionality but the difference is reducing the file size. It is like taking 300 page book designed for the human eye and reducing it to 140 page books that a robot could read. It really depends on how big your JavaScript file is to begin with, but usually this can save up to 50% of your file size.

Reduce Scripts and Functions in your Website

If you have a large website with lots of scripts and functions and lots of traffic, what seems like a pretty trivial issue here could stack up to lots of savings in terms of bandwidth. Not to mention all those saved milliseconds in page load times which could add up to real significant time and increased user experience.

If I have got 19 JavaScript files in an uncompressed format which is quite normal. This could take six requests to fetch it all but if I have got it compressed then maybe it takes just two requests. Traffic jam in the wild west of internet is the main point in the world.

These things are a game of inches and every little thing you can do to optimize your site may be just what it takes to improve your SEO and bump you up a notch in the SERPs.

On this note assuming that you go through these steps and minify your JavaScript, go ahead and check out our very similar tutorial on CSS minification as well as our article on enabling gzip compression which will essentially do the same thing for your HTML itself.

The stage is set. Now let us look at how quick and simple this is to implement. Open up your JavaScript file and start deleting all the spaces manually. Depending on the size of your file this should take okay. Just kidding please don’t take it serious. If you Google minify JavaScript, you will find lots of websites that let you translate your code for free. Just copy your JavaScript code paste and minify it. In my case, I have got three JavaScript files for my site and I’ll minify all three of them. However in my case I’m not going to replace my old JavaScript files since maybe sometime later this year.

I’m going to hire web developer to do some work on my site. I certainly do not want to dump this minified JavaScript on his or her desk to work with. I’ll still want to have that nicely formatted JavaScript on hand for them. In each of these cases I’ll save the minified JavaScript files under a new name I’ll call them ninh. I’ll upload these to my JavaScript folder on my server and in my HTML. I’ll be sure to point to those new minified JavaScript files in my code and that’s it.

One Comment on “How to Minify Your JavaScript?”

Leave a Reply

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