Presentation is loading. Please wait.

Presentation is loading. Please wait.

CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript Steve Souders Google

Similar presentations

Presentation on theme: "CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript Steve Souders Google"— Presentation transcript:

1 CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript Steve Souders Google

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 –

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 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) 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 204K173K156K 44K40K 98K79K74K 88K65K64K 42K28K26K 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 204K48K41K42K 44K16K15K 98K29K23K 88K23K19K 42K13K8K 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.ebay.comyes www.msn.comyes www.myspace.comsome

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?

Download ppt "CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript Steve Souders Google"

Similar presentations

Ads by Google