Souders WPO Web 2.0 Expo
- 1. WebPerformanceOptimizationWPOstevesouders.com/docs/web20expo-20100505.pptxslideshare.net/souders/souders-wpo-web20expoDisclaimer: This content does not necessarily reflect the opinions of my employer.flickr.com/photos/mubashir/2616724942/
- 3. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/1. Speed - First and foremost, we believe that speed is more than a feature. Speed is the most important feature.
- 4. Yahoo! 0.4 sec slower traffic 5-9%slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applicationsslideshare.net/stoyan/yslow-20-presentation
- 7. blog.mozilla.com/metrics/category/website-optimization/…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
- 8. en.oreilly.com/velocity2009/public/schedule/detail/7709blog.mozilla.com/metrics/category/website-optimization/…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
- 10. Site speed in search rankScreen shot of blog post…we've decided to take site speed into account in our search rankings.googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
- 11. WebPerformanceOptimizationWPOdrives trafficimproves UXincreases revenuereduces costsflickr.com/photos/pedromourapinheiro/3123885534/
- 12. top 10 WPO predictions#10: fast-by-defaultCMSs
- 14. cloud – AWS, GAE
- 15. JS libraries
- 17. top 10 WPO predictions#9: visibility into the browserJS, CSS, paint, DOM
- 18. dynaTrace
- 20. top 10 WPO predictions#8: consolidationtools
- 21. metrics
- 23. top 10 WPO predictions#7: TCP, HTTPSPDY
- 24. pipelining
- 26. top 10 WPO predictions#6: standardsterminology
- 27. timing
- 28. benchmarks
- 30. top 10 WPO predictions#5: industry organizationsprofessional groups
- 32. standards bodies
- 34. top 10 WPO predictions#4: dataInternet Performance Archive
- 36. DNS
- 38. top 10 WPO predictions#3: greenShopzilla – half the servers
- 39. Netflix – half the bandwidth
- 42. top 10 WPO predictions#2: mobilemetrics
- 43. long poles
- 44. root causes
- 48. top 10 WPO predictions#1: speed’s a differentiatordevices
- 49. vendor selection
- 50. reviews
- 52. top 10 WPO predictions10. fast-by-default9. visibility into the browser8. consolidation7. TCP, HTTP6. standards5. industry organizations4. data3. green2. mobile1. speed’s a differentiatorflickr.com/photos/eole/380316678/
- 53. P3PCPerformance of 3rd Party ContentAdsWidgetsAnalyticsflickr.com/photos/ntr23/729463293/
- 54. performance badnessopportunitiesmain page200520103rd party content
- 56. document.getElementsByTagName('head‘)[0] .appendChild(domscript); document.documentElement.firstChild .appendChild(ga);s = document.getElementsByTagName ('script')[0]; s.parentNode.insertBefore(ga, s);flickr.com/photos/amodiovalerioverde/425333516/appendChild or insertBefore?- Souders (May 2008)- Google Analytics (Dec 2009)- Google Analytics (Feb 2010)
- 57. if (q.insertBefore) {var s = _get(q.insertBefore, id); if (s) {s.parentNode.insertBefore(n, s); }} else {h.appendChild(n);}- YUI Loader 2.6.0 (2008)flickr.com/photos/amodiovalerioverde/425333516/appendChild or insertBefore?
- 58. b = this.getHardpoint(); f = document.createElement('script');f.src = g;f.type = 'text/javascript';f.async = true;b.appendChild(f);getHardpoint: function() {var c, b = document.getElementsByTagName('head'); if (b.length) { c = b[0]; } else c = document.body;this._hardpoint = c;}- Facebook (April 18, 2010)flickr.com/photos/amodiovalerioverde/425333516/appendChild or insertBefore?
- 59. head = document.getElementsByTagName ("head")[0] || document.documentElement;// Use insertBefore instead of appendChild to circumvent an IE6 bug.// This arises when a base node is used (#2709 and #4378).head.insertBefore(script, head.firstChild);- jQueryflickr.com/photos/amodiovalerioverde/425333516/appendChild or insertBefore?
- 60. var f=document.getElementsByTagName("script");var b=f[f.length-1]; // b is last script tagif(b==null){ return; }vari=document.createElement("script");i.language="javascript"; // i is a script elementi.setAttribute("type","text/javascript");var j=""; // j is a stringj+="document.write('<scr'+'ipt language=\"javascript\" src=\""+c+"\"></scr'+'ipt>');";var g=document.createTextNode(j); // not usedb.parentNode.insertBefore(i,b);appendChild(i,j);function appendChild(a,b){ if(null==a.canHaveChildren||a.canHaveChildren){a.appendChild(document.createTextNode(b)); } else{ a.text=b;}}- Collective Mediaflickr.com/photos/amodiovalerioverde/425333516/appendChild or insertBefore?
- 61. “Frag Tag”Alex Russellsnippet<FRAG><script src=“snippet.js”></script></FRAG>doesn’t block renderingasyncdocument.writeJavaScript sandboxingjust a twinkle in my eyefrag tagflickr.com/photos/bestrated1/2141687384/
- 62. browser wishliststevesouders.com/blog/2010/02/15/browser-performance-wishlist/Frag tagSPDYnon-blocking scriptsSCRIPT attributesresource packagesborder-radiuscache redirectslink prefetchWeb Timing specremote JS debuggingweb socketsHistoryprogressive XHRanchor pingstylesheet, inline jsinline script defer@import@font-facestylesheets,iframespaint eventsmissing schemaflickr.com/photos/eole/380316678/
- 63. browser disk cachedefault size is too smallIE: 8-50M
- 64. Firefox: 50M
- 65. Chrome: < 80M
- 66. Opera: 20Meviction algorithm improvementscontent-type: script > image
- 67. past impact: 1000 ms > 100 ms
- 70. Browserscope
- 74. Site speed in search rankScreen shot of blog post
- 76. Bothcombine scriptscombine stylesheetsadd an Expires headergzip responsesput stylesheets at the topput scripts at the bottomavoid CSS expressionsmake JS and CSS externalreduce DNS lookupsminify JS and CSSavoid redirectsremove duplicate scriptsmake Ajax cacheablereduce cookie sizeuse cookie-free domainsdon't scale imagesYSlowuse CSS spritesuse a CDNconfigure ETagsuse GET for Ajax requestsreduce # of DOM elementsno 404savoid image filtersoptimize faviconPage Speeddefer loading JSremove unused CSSuse efficient CSS selectorsoptimize imagesoptimize order of CSS & JSshard domainsleverage proxy caching
- 79. speed mattersa lot is coming in WPOguard against 3rd party contentstevesouders.com/cache.phptakeawaysflickr.com/photos/34771728@N00/361526991/
Editor's Notes
- #4: Fred Wilson is Managing Partner of two venture capital firms, Flatiron Partners (Yoyodyne, Geocities) and Union Square Ventures (Twitter, delicious,Etsy, Feedburner).SpeedInstant utilitySoftware is mediaLess is moreMake it programmableMake it personalRESTfulDiscoverabilityCleanPlayful
- #8: “if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
- #9: This was a ~5 second speed up.
- #11: Time measurements from real users.
- #18: coops – similar to anti-spam coop, imagine Google Ajax Libraries API also supported on AWS,
- #37: http://stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/
- #40: Time measurements from real users.
- #48: YtseJam Photography, "Going nowhere fast", http://www.flickr.com/photos/thatguyfromcchs08/2300190277/