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.

1. Web Performance Optimization
Patrick Meenan
Google
@patmeenan
www.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. MSN
Delayed 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
…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

14. “Front End”
vs
“Back End”

16. Back-End
This is the HTML that largely contains the content of the
page and defines the structure.

17. Front-End
CSS : Layout and style Graphical Elements
Images

18. Waterfall Diagram
Base Page
CSS
Javascript
Images and
Graphical
Elements
Start Render Document Complete (onLoad)

19. Measuring
Performance

20. velocityconf.com/velocity2011/public/schedule/detail/18039

21. 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

22. 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

23. 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

24. _gaq.push(['_setSiteSpeedSampleRate', 10]);

27. Back-End Only

28. Async Javascript
It’s not just good for performance….

29. 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

30. What it feels like
http://www.webpagetest.org/video/embed/111011_bf3554f35b6e71a77f59e3719ee4e810b7226402

31. 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

32. www.aarp.org
• If AddThis or Ensighten have issues

33. www.learningtree.com
• If Google’s APIs have issues

34. www.nationalgeographic.com
• If Doubleclick has issues
First 20 seconds 20-40 seconds

35. www.washingtonpost.com
• If Doubleclick has issues

36. 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