CS193H:High Performance Web Sites

Lecture 13: Rule 10 – Minify JavaScript

Steve SoudersGoogle

souders@cs.stanford.edu

Announcementsgrades for last assignment were emailed out

yesterday; contact Aravind if you didn't get an email

midterm Friday 10/31 – 30-40 short answer questions

11/3 – Doug Crockford from Yahoo! will be guest lecturer talking about "Ajax Performance"

Minificationminification: removing unnecessary characters

from code (comments, white space, etc.)obfuscation: minify as well as reduce length of

symbol names (munge)

original codeYAHOO.util.CustomEvent =

function(type, oScope, silent, signature) {

this.type = type;

this.scope = oScope || window;

this.silent = silent;

this.signature = signature || YAHOO.util.CustomEvent.LIST;

this.subscribers = [];

  if (!this.silent) {

}

  var onsubscribeType = "_YUICEOnSubscribe";

if (type !== onsubscribeType) {

this.subscribeEvent =

new YAHOO.util.CustomEvent(onsubscribeType, this, true);

  }

};

event.js from YUI – http://developer.yahoo.com/yui/

minified codeYAHOO.util.CustomEvent=function(type,oScope,silent,signature){this.type=type;this.scope=oScope||window;this.silent=silent;this.signature=signature||YAHOO.util.CustomEvent.LIST;this.subscribers=[];if(!this.silent){}var_onsubscribeType="_YUICEOnSubscribe";if(type!==onsubscribeType){this.subscribeEvent=new_YAHOO.util.CustomEvent(onsubscribeType,this,true);}};

JSMinhttp://crockford.com/javascript/jsmin

YUI Compressor http://developer.yahoo.com/yui/compressor/also munges and minifies CSS

obfuscated codeYAHOO.util.CustomEvent=function(_1,_2,_3,_4){

this.type=_1;

this.scope=_2||window;

this.silent=_3;

this.signature=_4||YAHOO.util.CustomEvent.LIST;

this.subscribers=[];

if(!this.silent){

}

var _5="_YUICEOnSubscribe";

if(_1!==_5){

this.subscribeEvent=new YAHOO.util.CustomEvent(_5,this,true);

}

};

DoJo Compressor (ShrinkSafe)http://dojotoolkit.org/docs/shrinksafe/

YUI Compressor http://developer.yahoo.com/yui/compressor/

obfuscation costsobfuscation typically reduces size more, but has

some costs• bugs – symbol munged to "aa", namespace conflict• maintenance – tag external symbols (eg, API)• debugging – harder to read in production

minification vs. obfuscationWeb Site Original

Size After JSMin After ShrinkSafe

amazon.com 204K 173K 156K

aol.com 44K 40K 40K

cnn.com 98K 79K 74K

myspace.com 88K 65K 64K

wikipedia.org 42K 28K 26K

youtube.com 34K 26K 24K

Average 85K 68K (-21%)

64K (-25%)

minify – extra savings not worth the risk

gzip and minificationWeb Site Original

Size After Gzip JSMIN & Gzip

Shrink-Safe & Gzip

amazon.com 204K 48K 41K 42K

aol.com 44K 16K 15K 15K

cnn.com 98K 29K 23K 23K

myspace.com 88K 23K 19K 19K

wikipedia.org 42K 13K 8K 8K

youtube.com 34K 10K 8K 8K

Average 85K 23K (-73%)

19K (-78%)

19K (-78%)

minify – obfuscation benefits decline with gzip

Top 10 minification

Minify External? Minify Inline?Apr 07 Oct 08 Apr 07 Oct 08

www.amazon.com yeswww.aol.com some mostwww.cnn.comwww.ebay.com yes yes yesfroogle.google.com yes yes yes yeswww.msn.com yes yes yes yeswww.myspace.com somewww.wikipedia.orgwww.yahoo.com yes yes yes yeswww.youtube.com yes

Minifying CSSsavings are typically less compared to JavaScript• not as much CSS as JavaScript• CSS typically has fewer comments and whitespace

greater savings from CSS optimizations• merging identical rules• abbreviations

"#660066" => "#606""0px" => "0""background-color:" => "background:"

Homeworkread Chapter 11 of HPWS10/29 3:15pm – check five Web 100

Performance Profile sites10/31 3:15pm – midterm11/7 11:59pm – rules 4-10 applied to your

"Improving a Top Site" class project

QuestionsWhat's the difference between minification and

obfuscation?How do they compare wrt reducing JavaScript size?What's the percentage size reduction after applying

minification? What about applying minification and then gzipping?

What are three drawbacks to obfuscation?