1. Web Performance OptimizationPatrick MeenanGoogle@patmeenanwww.slideshare.net/patrickmeenan

2. What is it? Optimizing the performance of web sites and applications forthe best user experience 3. Why it matters 4. Bing Searchen.oreilly.com/velocity2009/public/schedule/detail/8523 5. Google Searchen.oreilly.com/velocity2009/public/schedule/detail/8523 6. Yahoo400ms slower = 5-9% drop in full-page trafficslideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications 7. Firefox Downloadsshaved 2.2 seconds offthe average page loadtime and increaseddownload conversions by15.4%! blog.mozilla.com/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/ 8. Shopzilla (e-Commerce) 9. Netflix 10. MSNDelayed loading of the Big Upper Right Ad by 1s Time to PageTime to Page PageAd Click Thru BottomOnloadClicks Views Rate80ms gain 500ms gain +0.5%+0.4% -15% velocityconf.com/velocity2011/public/schedule/detail/18039 11. AutoAnythingcut AutoAnythings webpage load times in half,which resulted in a 9%increase in conversionrate, an 11% increase inaverage ticket size, and a12-13% increase in sales. www.strangeloopnetworks.com/customers/autoanything-cuts-page-load-time-in-half-and-revs-up-sales-by-13/ 12. Sports Reference digital-fulcrum.com/about-2/press-releases/sports-reference-launches-on-ghostwriter-impressions-increase-13/ 13. SEOweve decided to takesite speed into accountin our search rankings.googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html 14. Front EndvsBack End 15. Back-EndThis is the HTML that largely contains the content of thepage and defines the structure. 16. Front-End CSS : Layout and style Graphical ElementsImages 17. Waterfall DiagramBase Page CSS Javascript Images and Graphical ElementsStart Render Document Complete (onLoad) 18. MeasuringPerformance 19. velocityconf.com/velocity2011/public/schedule/detail/18039 20. Active Testing Consistent results Good for detecting and diagnosing issues that are 100%repeatable and on pages you are monitoring Lots of detail Availability monitoring Not representative of actual end-user performance Usually tested from data centers Sometimes co-located with CDN provider equipment 21. Synthetic Browsers Know HOW your active testing is done Some only test the base page Synthetic browsers usually not reflective of real browser Real browser testing www.engadget.com Synthetic Browser: 447 requests IE 8: 241 requests 22. Real User Monitoring (RUM) Full coverage on all pages visited by users Real performance information for end-user experience No availability monitoring Fluctuates Significantly Limited detail but getting better 23. _gaq.push([_setSiteSpeedSampleRate, 10]); 24. Back-End Only 25. Async JavascriptIts not just good for performance. 26. Frontend Single Point of FailureBrowser will stop processing for 20s (windows) 90s (Mac) vs. Browser will continue processing and not wait 27. What it feels likehttp://www.webpagetest.org/video/embed/111011_bf3554f35b6e71a77f59e3719ee4e810b7226402 28. Testing for Frontend SPOF blackhole.webpagetest.org (aka 72.66.115.13) Hosts file: 72.66.115.13 ajax.googleapis.com31 72.66.115.13 apis.google.com 72.66.115.13 www.google-analytics.com 72.66.115.13 connect.facebook.net 72.66.115.13 platform.twitter.com WebPagetest.org: setDnsName platform.twitter.comblackhole.webpagetest.org navigate your.url.comblog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html 29. www.aarp.org If AddThis or Ensighten have issues 30. www.learningtree.com If Googles APIs have issues 31. www.nationalgeographic.com If Doubleclick has issuesFirst 20 seconds20-40 seconds 32. www.washingtonpost.com If Doubleclick has issues 33. Other Resources Velocity Conference videos and presentations: http://velocityconf.com/velocityeu http://velocityconf.com/velocity2011 http://velocityconf.com/velocity2010 Perf Planet (rollup of industry blogs) http://www.perfplanet.com/ http://calendar.perfplanet.com @perfplanet