2. 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache

3. Empty CachePrimed Cache www.aol.com97% www.ebay.com95%81% www.facebook.com95%81% www.google.com/search47%0% search.live.com/results67%0% www.msn.com98%94% www.myspace.com98% en.wikipedia.org/wiki94%91% www.yahoo.com97%96% www.youtube.com98%97% April 2008 time spent on the frontend

4. 80-90% of the end-user response time is spent on the frontend. Start there. greater potential for improvement simpler proven to work the performance golden rule

8. Sept 2007

9. June 2009

10. 14 R ULES 1.M AKE FEWER HTTP REQUESTS 2.U SE A CDN 3.A DD AN E XPIRES HEADER 4.G ZIP COMPONENTS 5.P UT STYLESHEETS AT THE TOP 6.P UT SCRIPTS AT THE BOTTOM 7.A VOID CSS EXPRESSIONS 8.M AKE JS AND CSS EXTERNAL 9.R EDUCE DNS LOOKUPS 10.M INIFY JS 11.A VOID REDIRECTS 12.R EMOVE DUPLICATE SCRIPTS 13.C ONFIGURE ET AGS 14.M AKE AJAX CACHEABLE

11. Even Faster Web Sites Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance..........Doug Crockford Creating responsive web apps............Ben Galbraith, Dion Almaer Writing efficient JavaScript.............Nicholas Zakas Scaling with Comet.....................Dylan Schiemann Going beyond gzipping...............Tony Gentilcore Optimizing images...................Stoyan Stefanov, Nicole Sullivan

12. AOL eBay Facebook MySpace Wikipedia Yahoo! Why focus on JavaScript? YouTube

13. scripts block blocks parallel downloads and rendering 7 secs: IE 8, FF 3.5(?), Chr 2, Saf 4 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3

14. JavaScript Functions Executed before onload www.aol.com115K30% www.ebay.com183K44% www.facebook.com1088K 9% www.google.com/search15K45% search.live.com/results17K24% www.msn.com131K31% www.myspace.com297K18% en.wikipedia.org/wiki114K32% www.yahoo.com321K13% www.youtube.com240K18% 26% avg 252K avg initial payload and execution

15. splitting the initial payload split your JavaScript between what's needed to render the page and everything else load "everything else" after the page is rendered separate manually (Page Speed); tools needed to automate this (Doloto) load scripts without blocking – how?

16. MSN Scripts and other resources downloaded in parallel! How? Secret sauce?! var p= g.getElementsByTagName("HEAD")[0]; var c=g.createElement("script"); c.type="text/javascript"; c.onreadystatechange=n; c.onerror=c.onload=k; c.src=e; p.appendChild(c) MSN.com: parallel scripts

17. Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

18. XHR Eval script must have same domain as main page must refactor script var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send('');

19. XHR Injection var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; var se=document.createElement('script'); document.getElementsByTagName('head') [0].appendChild(se); se.text = xhrObj.responseText; }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script must have same domain as main page

20. Script in Iframe <iframe src='A.html' width=0 height=0 frameborder=0 id=frame1> iframe must have same domain as main page must refactor script: // access iframe from main page window.frames[0].createNewDiv(); // access main page from iframe parent.document.createElement('div');

21. Script DOM Element var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se); script and main page domains can differ no need to refactor JavaScript

22. only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript Script Defer

23. document.write(" "); parallelization only works in IE parallel downloads for scripts, nothing else all document.write s must be in same script block document.write Script Tag

24. browser busy indicators

25. status bar progress bar logocursor block render block onload normal Script Src FFIE,FF FFIE,FF XHR Eval no XHR Injection no Script in Iframe IE,FFFFIE,FFFFnoIE,FF Script DOM Element FF noFF Script Defer FF IE,FF document.write Script Tag FFIE,FF FFIE,FF good to show busy indicators when the user needs feedback bad when downloading in the background browser busy indicators

26. Ensure scripts execute in order: necessary when scripts have dependencies IE: http://stevesouders.com/cuzillion/?ex=10017 http://stevesouders.com/cuzillion/?ex=10017 FF: http://stevesouders.com/cuzillion/?ex=10018 http://stevesouders.com/cuzillion/?ex=10018 Avoid scripts executing in order: faster – first script back is executed immediately http://stevesouders.com/cuzillion/?ex=10019 ensure/avoid ordered execution

27. || down- loads domains can differ existing scripts browser busy ensures order size (bytes) normal Script Src noyes IE,FF ~50 XHR Eval IE,FFno ~500 XHR Injection IE,FFnoyesno ~500 Script in Iframe IE,FFno IE,FFno~50 Script DOM Element IE,FFyes FF ~200 Script Defer IEyes IE,FFIE~50 document.write Script Tag IE * yes IE,FFIE~100 * Only other document.write scripts are downloaded in parallel (in the same script block). Load Scripts Without Blocking

28. XHR Eval XHR Injection Script in iframe Script DOM Element Script Defer Script DOM Element Script Defer Script DOM Element Script DOM Element (FF) Script Defer (IE) XHR Eval XHR Injection Script in iframe Script DOM Element (IE) XHR Injection XHR Eval Script DOM Element (IE) Managed XHR Injection Managed XHR Eval Script DOM Element Managed XHR Injection Managed XHR Eval Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection different domains same domains no order preserve orderno order no busy show busy no busy preserve order and the winner is...

29. Loading Scripts Without Blocking don't let scripts block other downloads you can still control execution order, busy indicators, and onload event What about inline scripts?

30. browsers download stylesheets in parallel with other resources that follow......unless the stylesheet is followed by an inline script http://stevesouders.com/cuzillion/?ex=10021 best to move inline scripts above stylesheets or below other resources use Link, not @import bad: stylesheet followed by inline script

31. eBay MSN MySpace Wikipedia mispositioned inline scripts

32. Positioning Inline Scripts remember inline scripts carry a cost avoid long-executing inline scripts don't put inline scripts between stylesheets and other resources

33. going beyond gzipping Tony Gentilcore, Chapter 9, Even Faster Web Sites Rule 4: Gzip Components from HPWS HTTP/1.1 request: Accept-Encoding: gzip,deflate response: Content-Encoding: gzip Apache 2.x: AddOutputFilterByType DEFLATE text/html text/css application/x- javascript

34. benefits of gzipping 70% reduction in transfer size not just for HTML!! all text: JavaScript, CSS, XML, JSON not binary: images, PDF, Flash

35. so what's the issue? 15% of users get uncompressed responses surprize! why? old browsers? no Netscape Navigator 3 – 0.0% Netscape Communicator 4 – 0.1% Opera 3.5 – 0.0% IE <3 – 0.01% clue: most prevalent in the Middle East

36. who's stripping? proxy, A-V softwareAccept-Encoding header Ad Muncherstripped CA Internet Security Suite Accept-EncodXng: gzip, deflate CEQURUXstripped Citrix Application Firewallstripped ISA 2006stripped McAfee Internet Security 6.0 XXXXXXXXXXXXXXX: +++++++++++++ Norton Internet Security 6.0 ---------------: ------------- Novell iChain 2.3stripped Novell Client Firewallstripped WebWasherstripped ZoneAlarm Pro 5.5 XXXXXXXXXXXXXXX: XXXXXXXXXXXXX proxies and anti-virus software disable compression for easier response filtering

37. what to do don't assume compression go the extra mile to reduce response size event delegation (-5%)* relative URLs (-3%) minify HTML, JavaScript, and CSS (-4%) use CSS rules over inline styles (-1%) alias long JavaScript symbol names (??) Thanks, Tony! see Tony's chapter in Even Faster Web Sites * Results of applying each technique to the Alexa top ten

38. JS after CSS (p 77) HTTP/1.0 (p 78) sprite on home page (hpws p 130) Expires header (p 131) FIXED on en.wiki gzip stylesheets – FIXED png optimization – FIXED querystring in static resources main.css?233xz vs. main.css?233yz ??? http://en.wikipedia.org/wiki/White_dwarf combine 6 scripts, 9 stylesheets sprite – 8 bg images no Expires on upload.wikimedia.org move 6 scripts lower minify JS – 36K out of 100K (36%) 50% CSS unused (40K out of 80K) flushing! http/1.0! PNGs optimized! put script block above stylesheets load scripts in parallel 81% of JS unused by onload http://en.wikipedia.org/wiki/Ancient_Egypt c ombine 6 scripts, 9 stylesheets sprite – 7 bg images no Expires on upload.wikimedia.org move 6 scripts lower minify JS – 36K out of 100K (36%) 50% CSS unused (40K out of 80K) flushing! http/1.0! optimize some images (8%, 48K/624K), put script block above stylesheets load scripts in parallel 81% of JS unused by onload http://en.wikipedia.org/w/index.php?title=Major_depressive_disorder&action=edit addButton – loads images after onload ?!?! asldjf

39. JS after CSS (p 77) HTTP/1.0 (p 78) sprite on home page (hpws p 130) Expires header (p 131) FIXED on en.wiki gzip stylesheets – FIXED png optimization – FIXED querystring in static resources main.css?233xz vs. main.css?233yz ??? http://en.wikipedia.org/wiki/White_dwarf http://en.wikipedia.org/wiki/Ancient_Egypt http://en.wikipedia.org/w/index.php?title=Major_depressive_disorder&action=edit addButton – loads images after onload ?!?! combine 9 scripts, 9 stylesheets no Expires on upload.wikimedia.org move 9 scripts lower minify JS – 44K out of 126K (35%) 50% CSS unused (40K out of 80K) flushing! http/1.0! PNGs optimized! put script block above stylesheets load scripts in parallel 76% of JS unused by onload asldjf

40. White Dwarf http://en.wikipedia.org/wiki/White_dwarf

41. White Dwarf http://en.wikipedia.org/wiki/White_dwarf add Expires to upload.w.o don't use querystring: ?233yz add Expires to upload.w.o don't use querystring: ?233yz move inline script combine scripts minify (36K, 36%) move lower load async 81% deferrable combine scripts minify (36K, 36%) move lower load async 81% deferrable combine stylesheets remove unused CSS (50%) sprite 8 bg images combine stylesheets remove unused CSS (50%) sprite 8 bg images

43. add Expires to upload.w.o don't use querystring: ?233yz don't change URL: 233yz v 233zz add Expires to upload.w.o don't use querystring: ?233yz don't change URL: 233yz v 233zz move inline script combine scripts minify (44K, 35%) move lower load async 76% deferrable combine scripts minify (44K, 35%) move lower load async 76% deferrable combine stylesheets remove unused CSS (50%) combine stylesheets remove unused CSS (50%)

44. focus on the frontend run YSlow ( http://developer.yahoo.com/yslow) and Page Speed! ( http://code.google.com/speed/page-speed/ ) speed matters takeaways

45. Bing: Yahoo: Google: AOL: Shopzilla: 1 http://en.oreilly.com/velocity2009/public/schedule/detail/8523 2 http://www.slideshare.net/stoyan/yslow-20-presentation 3 http://en.oreilly.com/velocity2009/public/schedule/detail/7579 4 http://en.oreilly.com/velocity2009/public/schedule/detail/7709 +2000 ms -4.3% revenue/user 1 +400 ms -5-9% full-page traffic 2 +400 ms -0.59% searches/user 1 fastest users +50% page views 3 -5000 ms +7-12% revenue 4 impact on revenue

46. hardware – reduced load Shopzilla – 50% fewer servers bandwidth – reduced response size http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf cost savings

47. if you want better user experience more revenue reduced operating expenses the strategy is clear Even Faster Web Sites

48. Steve Souders souders@google.com http://stevesouders.com/docs/wikipedia-20090812.ppt