You are reading a MIX Online Opinion. In which we speak our minds. Karsten Januszewski Meet Karsten Arrow

Opinions

12Comment Retweet

To Minify or Not To Minify

Oct 30, 2009 In Development By Karsten Januszewski

Back when we were about to ship Oomph2, I found myself ranting about having to minify the oomph.js script. 

Minifying was this annoying, non-automated step in the build process, and it caused me grief—just when we thought we were ready to ship and I’d minified what I thought was the final build, a bug would pop up. I’d have to start all over.

Additionally irksome was the fact that it was impossible to debug or step through bugs that manifested in the minified script (sidenote: I’m a very happy user of the IE 8 Javascript debugging tools, as well as the Visual Studio Javascript debugger). Of course, I’d have to change the script tag back to the un-minified script for debugging.

The 32KB Difference

It was during one of these rants that Joshua, who sits next to me and is often subject to my rants during development, noted that my minification was shrinking a 62KB script into a 30 KB script—a negligible difference. This led to a discussion about whether that 32KB really made any difference.  I did the minification because it seemed like a best practice. I wanted to show that we “got it"—that yes, squeezing every bit of performance out of the download was the way to go.

But was it? And were 32KB’s worth all the trouble? Maybe not.

Minification is Anti View Source

In addition to everything above, there’s another downside to minification that’s worth mentioning.  Let’s say someone comes across a page and wants to view source, to find out how something on said page works. Minified javascripts defeat that purpose because,in doing the minification,the scripts are obfuscated and cannot be “read” by a human. 

Even if there exists somewhere a non-minified version of that same script, it’s likely that, right at that moment when you are browsing a page and think “Oh that’s cool; I wonder how they did that,” you won’t actually go off and find the unminified version of the script. And even if you did manage to find it, you’ll likely be stuck with a script removed from the context of the page in which you discovered the script in the first place.

In other words, minification is anti view source.

But It Does Make Sense

All this said, minification—especially if you have a mondo-huge javascript—does make sense. In the era of smart phones, smaller size increments do matter.  Additionally, one must always remember that not all of the world is on broadband. It ostensibly seems like a best practice.

The Verdict?

I’m not sure where I land on minification.  I haven’t formulated a position quite yet.

I do know this: When I was minifying Oomph, I used a very cool, Microsoft internal-only minification tool. With the most recent release of the Microsoft AJAX toolkit, this tool has been made available to the world.

The Microsoft Ajax Minifier download includes the following components:

ajaxmin.exe – a command-line tool for minifying JavaScript files

ajaxmintask.dll – a MSBuild task for minifying JavaScript files in a Visual Studio project

ajaxmin.dll – a component that you can use in your C# or VB.NET applications to minify JavaScript files

You also have the option of adding the Microsoft Ajax Minifier as a custom MSBuild task to Visual Studio. Adding the Microsoft Ajax Minifier MSBuild task to your Visual Studio project file allows you to automatically minify all of the JavaScript files in your project whenever you perform a build, and enables you to perform minification in an automated way. This is very cool and would have come in handy during Oomph development. I will definitely incorporate this into our build/release process moving forward, if in fact I keep minifying.

To read more about the minifier, check out Scott Guthrie’s excellent blog post, which talks about how the minifier works, and provides comparisons (based on compression rates) with other minifiers out there.

I’m curious about other folks’ thoughts on this topic: to minify or not to minify?

Follow the Conversation

12 comments so far. You should leave one, too.

Matt said on Oct 30, 2009

gzipping my script and css files is usually enough to salve my guilty conscience. I''ll usually only minify a script file if it''s huge or part of a well-tested library, or if I want to obfuscate it for some reason.

I''d probably have a different opinion if I ran a high traffic site, though. 32KB isn''t a big download savings for each individual user, but I definitely wouldn''t want to push out the same 32KB five million times every day for no reason.

Sean Gerety said on Nov 10, 2009

We have an application that uses a lot of javascript files and we''re also using the ASP.net MVC framework. To improve the dev, qa and production environment, we''ve got some controllers to combine the javascript files and then minify them. The minification happens based of some config values that we have. It''s very helpful because in our dev environment we can use Firebug or VS to debug our files, which has the formatting and comments. Then once it goes to qa we get a better idea of performance with the minification and combining of the files. I say, if you can improve things with minify, do it. (plus, I don''t see why more people use css sprites)

Offbeatmammal said on Nov 12, 2009

I really appreciate minified code (eg using Google Closure) but at the same time I hate not being able to test and debug easily.

talking to Joshua and Nishant the other day i suggested we needed some sort of symbols in the minified code and a reference to an unminified source to allow reverse minification and debugging...

Whut. Whut. said on Dec 21, 2009

32KB is more significant than you think if you consider mobile users crawling along at modem-esque speeds.

Google will add file size and/or download time to search engine ranking criteria in 2010. Why? My theory is that with the release of Android, mobile users have become much more relevant to Google.

So, unless you want to see all your sites knocked down a notch in the rankings, you should minify. This is especially true for ASP.NET developers - even before we write a single line of code, we''re already at a disadvantage thanks to the Resource.axd JavaScript files, which are bloated with a ridiculous amount of pointless whitespace.

Also, make sure you set Visual Studio to insert a tab character when you hit the tab key. If it''s inserting four spaces, you''re doing it wrong.

Joe Stevens Joe Stevens said on Jan 8, 2010

I usually only minify Javascript library plugins.

Steve Clay Steve Clay said on Jan 21, 2010

Yes minify, but with a comment URL to the unminified version? I work on the PHP Minify project and it sounds like a good will feature for the next version. Already some minifiers will preserve multiline comments that start with exclamation points.

@Offbeatmammal: We have a "debug" option that just combines and inserts line numbers from the original files, but it''s still a naive implementation that breaks on some XPath expressions.

P.S. You''re comment security is way overboard. I couldn''t even include a URL with "code" in it.

sam philips sam philips said on May 11, 2010

hi Karsten, really good read, i love the detail you go into when your writing, you really share your knowledge with everyone wich is very kind of you. thanks!

http://cateyelenses.com/

John John said on Sep 6, 2010

i always minify my code, i find it best to first combine all the script on the server, then minify them. minifying then does have a huge impact (since all your scripts are now one big script).

there are problems however when you''re using a 3rd party script and the code isn''t completely valid. but these problems are easily fixed.

i try to aim for 1 js file and 1 css file. both minified. of course some 3rd party things (like stats, facebook comments) etc add extra things to your site you can''t do much about, but for most things its achievable.

Dylan James said on Dec 9, 2010

It does seem like quite a lot of effort to minify, and I can see why you would be annoyed at having to re-do the minify process again after updating a bug etc.

I''ve just started looking at this, http://code.google.com/p/minify/

It combines and minifies all of you Javascript and CSS files on demand. Then what you can do is to setup your css/js loading functions to load the separate files for a development environment, or load the generated files for a production environment.

This way = Less HTTP requests, less weight, but you can still debug as before.

Jordan Retro 1 said on Apr 17, 2012

Thank you for your well-thought content. I'm really at perform proper now! So I ought to go off with no reading through all I'd like. But, I place your web site on my RSS feed in order that I can read mor

Tods Outlet said on May 31, 2012

One of the best sites for relevant facts on this niche !?!

Cheap Polo Shirt said on Jun 12, 2012

Me and my friend were arguing about an problem similar to this! Now I realize that I had been correct. lol! Thank you for that information you article.