1. CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript Steve Souders Google souders@cs.stanford.edu

2. Announcements grades 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"

3. Minification minification: removing unnecessary characters from code (comments, white space, etc.) obfuscation: minify as well as reduce length of symbol names (munge)

4. original code YAHOO.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/

5. minified code YAHOO.util.CustomEvent=function(type,oScope,silent,signatur e){this.type=type;this.scope=oScope||window;this.silent=sil ent;this.signature=signature||YAHOO.util.CustomEvent.LIST;t his.subscribers=[];if(!this.silent){} var_onsubscribeType="_YUICEOnSubscribe";if(type!==onsubscri beType){this.subscribeEvent=new_YAHOO.util.CustomEvent(onsu bscribeType,this,true);}}; JSMin http://crockford.com/javascript/jsmin YUI Compressor http://developer.yahoo.com/yui/compressor/ also munges and minifies CSS

6. obfuscated code YAHOO.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/

7. obfuscation costs obfuscation 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

8. minification vs. obfuscation Web Site Original Size After JSMin After ShrinkSafe amazon.com 204K173K156K aol.com 44K40K cnn.com 98K79K74K myspace.com 88K65K64K wikipedia.org 42K28K26K youtube.com 34K26K24K Average85K68K (-21%) 64K (-25%) minify – extra savings not worth the risk

9. gzip and minification Web Site Original Size After Gzip JSMIN & Gzip Shrink-Safe & Gzip amazon.com 204K48K41K42K aol.com 44K16K15K cnn.com 98K29K23K myspace.com 88K23K19K wikipedia.org 42K13K8K youtube.com 34K10K8K Average85K23K (-73%) 19K (-78%) 19K (-78%) minify – obfuscation benefits decline with gzip

10. Top 10 minification Minify External?Minify Inline? Apr 07Oct 08Apr 07Oct 08 www.amazon.comyes www.aol.comsomemost www.cnn.com www.ebay.comyes froogle.google.comyes www.msn.comyes www.myspace.comsome www.wikipedia.org www.yahoo.comyes www.youtube.comyes

11. Minifying CSS savings 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:"

12. Homework read Chapter 11 of HPWS 10/29 3:15pm – check five Web 100 Performance Profile sites 10/31 3:15pm – midterm 11/7 11:59pm – rules 4-10 applied to your "Improving a Top Site" class project

13. Questions What'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?