Web Performance Optimization

  • 1,249 views
Uploaded on

Overview on why web performance matters, how to measure it and some discussion on 3rd-party content. …

Overview on why web performance matters, how to measure it and some discussion on 3rd-party content.

Presented t the DC area Web Manager's Roundtable group on 12/7/2011.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,249
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
25
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web Performance OptimizationPatrick MeenanGoogle@patmeenanwww.slideshare.net/patrickmeenan
  • 2. What is it?• Optimizing the performance of web sites and applications for the best user experience
  • 3. Why it matters…
  • 4. Bing Search en.oreilly.com/velocity2009/public/schedule/detail/8523
  • 5. Google Search en.oreilly.com/velocity2009/public/schedule/detail/8523
  • 6. Yahoo 400ms slower = 5-9% drop in full-page traffic slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
  • 7. Firefox Downloads …shaved 2.2 seconds off the average page load time and increased download conversions by 15.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 Page Time to Page Page Ad Click Thru Bottom Onload Clicks Views Rate 80ms gain 500ms gain +0.5% +0.4% -15% velocityconf.com/velocity2011/public/schedule/detail/18039
  • 11. AutoAnything …cut AutoAnything’s web page load times in half, which resulted in a 9% increase in conversion rate, an 11% increase in average ticket size, and a 12-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. SEO …weve decided to take site speed into account in our search rankings. googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  • 14. “Front End” vs“Back 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 Elements Start 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 JavascriptIt’s not just good for performance….
  • 26. Frontend Single Point of Failure Browser will stop processing for 20s (windows) – 90s (Mac)<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> vs. <script type="text/javascript"> (function() { var tw = document.createElement(script); tw.type = text/javascript; tw.src = http://platform.twitter.com/widgets.js; var s = document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(tw, s); })(); </script> Browser will continue processing and not wait
  • 27. What it feels like http://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.com 31 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.com blackhole.webpagetest.org navigate your.url.com blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
  • 29. www.aarp.org• If AddThis or Ensighten have issues
  • 30. www.learningtree.com• If Google’s APIs have issues
  • 31. www.nationalgeographic.com• If Doubleclick has issues First 20 seconds 20-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