Your SlideShare is downloading. ×
  • Like
Web Performance Optimization
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web Performance Optimization

  • 1,277 views
Published

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.

Published 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,277
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
28
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