High Performance Web Sites: Rule 10 – Minify JavaScript (Yahoo! Developer Network Blog)

Welcome, guest Sign Out

My Projects
APIs & Web Services
APIs and Web Services
- BOSS
- Flickr
- Mail
- Maps
- My Yahoo!
- SearchMonkey
- Social
- Updates
- YAP
- YOS
- YQL
- All APIs »
RSS Feeds
Developer Kits
Resources
Updates
- Blog
- YDN Theater
- Hack U
Code & Design
Best Practices
- Exceptional Performance
Support
Help

YDN YDN Blog High Performance Web Sites: Rule 10 – Minify JavaScript

Yahoo! Developer Network Blog

July 23, 2007

High Performance Web Sites: Rule 10 – Minify JavaScript

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor.

Obfuscation is an alternative optimization that can be applied to source code. Like minification, it removes comments and white space, but it also munges the code. As part of munging, function and variable names are converted into smaller strings making the code more compact as well as harder to read. This is typically done to make it more difficult to reverse engineer the code. But munging can help performance because it reduces the code size beyond what is achieved by minification. The tool-of-choice is less clear in the area of JavaScript obfuscation. Dojo Compressor (ShrinkSafe) is the one I’ve seen used the most.

Minification is a safe, fairly straightforward process. Obfuscation, on the other hand, is more complex and thus more likely to generate bugs as a result of the obfuscation step itself. Obfuscation also requires modifying your code to indicate API functions and other symbols that should not be munged. It also makes it harder to debug your code in production. Although I’ve never seen problems introduced from minification, I have seen bugs caused by obfuscation. In a survey of ten top U.S. web sites, minification achieved a 21% size reduction versus 25% for obfuscation. Although obfuscation has a higher size reduction, I recommend minifying JavaScript code because of the reduced risks and maintenance costs.

In addition to minifying external scripts, inlined script blocks can and should also be minified. Even if you gzip your scripts, as described in Rule 4, minifying them will still reduce the size by 5% or more. As the use and size of JavaScript increases, so will the savings gained by minifying your JavaScript code.

Steve Souders

[Steve Souders is Yahoo!'s Chief Performance Yahoo!. This is one in a series of Best Practices for Speeding Up Your Web Site. This article is based on Steve's book High Performance Web Sites, published by O'Reilly.]

Posted at July 23, 2007 2:32 PM

Comments

Bad guideline IMHO. Better to gzip or deflate application/x-javascript and leave your source (and your workflow) alone.

Posted by: Eliot at July 26, 2007 8:49 AM

For irregularly changed scripts, minifying and gzipping is worth it, especially if it's a large JS file to begin with (say one of the many Javascript toolkits like jQuery or Mootools), but if a script is changing on a regular basis, or on an unpredictable schedule (various advertiser scripts would fit this, as well as anything under active development), it's better to just gzip - you get a size benefit, but preserve the sanity of your JS coders if a bug occurs!

Posted by: Matthew at August 2, 2007 3:17 AM

Good guideline, IMHO.
I use it every day, but I do the minify using RegExp and PHP. Sure I cache them, but if can do the minify dynamically and work it the cache.

This way you preserve the original Javascript files but you optimize it for the frontend.

Posted by: Jorge Laranjo at August 6, 2007 12:54 PM

This is a good guideline: you should use a build script to reduce the size of JavaScript and CSS before every deployment stripping comments and whitespace. This will further reduce the number of bytes you have to transfer on top of what gzip has to offer. You can do it using PHP (or any language) at runtime but this is a needless operation on a file that can otherwise be delivered as a static asset or from a CDN. You can use non-gzipped source files so developers can debug the code easily.

Posted by: Marcin Depinski at August 30, 2007 3:40 PM

The Yahoo! User Interface library now comes with its own minifcation tool, the YUI Compressor, which can minify JavaScript and CSS files. More information at http://developer.yahoo.com/yui/compressor/.

Posted by: Julien Lecomte at October 10, 2007 1:47 PM

The Yahoo! User Interface library now comes with its own minification tool, the YUI Compressor, which can minify JavaScript and CSS files. More information at http://developer.yahoo.com/yui/compressor/.

Posted by: Julien Lecomte at October 10, 2007 1:48 PM

Indeed, using a build script really simplifies this process. Symfony includes a tool called pake, which makes this easy.

Posted by: Thierry at October 26, 2007 6:38 AM

Max Kiesler just wrote up a summary of techniques and tools for minifying JavaScript and CSS: http://www.maxkiesler.com/index.php/weblog/comments/how_to_minimize_your_javascript_and_css_files_for_faster_page_loads/

Posted by: Steve Souders at November 5, 2007 9:36 AM

Recently, I upgraded the prototype.js to version 1.6.0.2, and I tried those 2 compressors you recommended, but my prototype not working anymore, any ideas?
http://bizroof.com

Posted by: Jason at February 29, 2008 11:27 AM

I tried JSmin and i found it very complicated ... After searching a little I found another JS minifier that is doing great job (no errors so far) ... Check it out on http://fmarcia.info/jsmin/test.html

Posted by: overklokan at May 13, 2008 4:16 PM

The only question I have, once decompressed from GZIP in the browser, does it make difference whether JS and CSS is optimized or not?

Posted by: Bohdan at June 18, 2008 10:18 AM

I have minified all my javascript files using JSMin (C# version) but still YSlow is saying that the files "do not appear to be obfuscated nor minified".
Do anyone have the same problem or a solution?

Posted by: Esben at July 7, 2008 2:41 AM

How about minifying the actual HTML via some tool for static files at design-time (if not serve-time), prior to using HTTP compression? I've read that eliminating whitespace and comments can generally reduce a page's size by about 10-15%.

Posted by: Jason Salas at August 3, 2008 1:23 AM

A simple javascript minifier based on dojo can be found here:
http://netspurt.com

Posted by: Magnolia at November 20, 2008 5:15 PM