compressmycodes

3 Ways to Compress JavaScript

Tools for compression can help web designers by reducing bandwidth, decreasing bounce rate, and facilitating greater user engagement. The following list includes tools that can help improve loading speeds for mobile and desktop users.

JavaScript Compression:

1) https://closure-compiler.appspot.com/home

Google’s Closure Compiler tool is useful for making JavaScript run more quickly. This free tool is an easy way to remove comments, white space, and minify variable names; all of which are essentially a developer’s convenience. A computer doesn’t need white space in order to comprehed the JavaScript, so compressing everything down is a way to reduce the overall size of the JS file.

One of the best parts of this tool, is the ability to choose how much you’d like to optimize your code. Typically the option ‘Simple’ is the most effective; sometimes the ‘Advanced’ option can display warning messages that certain properties no longer exist. See below:

‘icon: { path: google.maps.SymbolPath.CIRCLE, scale: 2},’ -Original code for the icon marker in a Google Map
‘icon:{path:google.maps.SymbolPath.CIRCLE,scale:2},’ -Simple, notice that the white space has been removed :)
‘icon:{path:google.a.s.f,scale:2},’ -Advanced, in this case the tool is minimizing too much and the code would not work any more

Possible downsides of minification:

-Code compression is a very useful tool; however some trouble arises when you use a service that changes variable names or if object paths are minimized to something that doesn’t make sense. As shown in the example above, the Google.Maps.SymbolPath.Circle makes sense, whereas the Google.a.s.f is illegal JavaScript and does not run properly.

-One drawback to JavaScript compression is that fact that condensed code is much more difficult to edit; since white space helps for easy navigation of code. Usually, JS compression is a desirable final touch to a project after the code is tested out. Editing compressed code is simply frustrating, so why bother.

ClosureCompiler

2) http://compressorrater.thruhere.net/

This web tool takes advantage of multiple JavaScript compressors to compare which ones minimize raw JavaScript the most. A handy chart is displayed, and of course the compiled output, to help you figure out what service works most efficiently with your code. When a client computer loads a web page, smaller JavaScript files are necessary to help reduce the amount bandwidth used. This service helps you compare which tools may be effective depending on the code.

compressorrater

3) http://compressmycode.com/#

Another free tool that is easy to use is CompressMyCode.com, it uses a simple menu to allow you to drag and drop your JavaScript text. The compressed code can be copied and reinserted into your file, it’s a quick service that is able to get the job done. This web service is the easiest to use on the list; but with ease of use comes less customization options. While this site is free, it lacks the more advanced minifying options Google’s Closure Compiler has.

compressmycode

If you’re wanting to increase a web page’s loading speed, compressing JavaScript is one way to help bring down the size of the web page. Anyone of these free tools will help you condense JavaScript.

If you have a tool you’d like to share please send an email: will[at]mindbodymetrics.com

Leave a Reply

Your email address will not be published.