Presentation from the March Hamburg Web Performance Meetup about Frontend Single Points of Failure

1. Frontend SPOF
Patrick Meenan
Google Confidential and Proprietary

2. Credit where credit is due
June 2010 - Steve Souders
http://www.stevesouders.com/blog/2010/06/01/frontend-spof/
Google Confidential and Proprietary

3. See what it looks like: http://youtu.be/prToLDpjmPw
Google Confidential and Proprietary

4. All Because of...
<script src="https://platform.twitter.com/anywhere.js?id=ZV0JHq7YJkjozsfohDIleQ&v=1" type="text/javascript"
></script>
Google Confidential and Proprietary

5. What Monitoring Says...
Active Monitoring
○ Server Monitoring
✔ Base page responded in 1.5 Seconds
○ Full-Browser Monitoring
✔ Page loaded in 29 Seconds (test timeout is 60)
Real-User Reporting
○ Analytics Page Views
✔ Analytics loaded and executed asynchronously
○ RUM Performance
✔ If user bailed before onload there is no performance data
Google Confidential and Proprietary

6. It Gets Worse!
Windows Socket Connect Timeout: 20s
Mac/Linux Socket Connect Timeout: Much Higher
PER CONNECTION
Google Confidential and Proprietary

7. There's More!
On that one page, all before the main content:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://scripts.verticalacuity.com/vat/mon/vt.js?1329448814"></script>
<script type="text/javascript" src="http://cdn.sailthru.com/scout/v1.js?1329448814"></script>
<script type="text/javascript" src="//cdn.optimizely.com/js/20728634.js?1329448814"></script>
<script src="https://platform.twitter.com/anywhere.js?..." type="text/javascript"></script>
Google Confidential and Proprietary

8. But I'd notice it is down...
Google Confidential and Proprietary

9. In Iran?
Google Confidential and Proprietary
https://blogs.akamai.com/2012/02/a-view-of-the-iranian-internet-blockade-from-akamais-intelligent-platform.html

10. or China?
Google Confidential and Proprietary
http://calendar.perfplanet.com/2011/frontend-spof-in-beijing/

11. We have solutions...
Google Confidential and Proprietary

12. Async Snippet
Good for code with no dependencies (widgets):
Google Confidential and Proprietary

13. Async Loaders
Help for chaining together dependencies
Control.js
○ http://stevesouders.com/controljs/
LABjs
○ http://labjs.com/
● Remember to load the loader safely
● Requires a fair bit of manual work
Google Confidential and Proprietary

14. Put scripts at the bottom
Google Confidential and Proprietary
http://stevesouders.com/examples/rule-js-bottom.php

15. Well...
Google Confidential and Proprietary

16. Almost...
Blocks onload except on IE and iOS 4
Google Confidential and Proprietary
http://www.stevesouders.com/blog/2012/01/13/javascript-performance/

17. So, How are we doing?
Google Confidential and Proprietary

18. Widgets
Google Analytics: Async
Google +1: Async
Twitter: Async
Facebook: Async
Delicious: Async (image/href)
StumbleUpon: Async
Digg: Async
Reditt: Blocking
AddThis: Blocking
ShareThis: Blocking
(as of February 2012)
Google Confidential and Proprietary

19. Code Libraries (samples)
Jquery: Blocking in the head
Closure Library: Blocking in the head
YUI: Blocking
Dojo: Blocking in the head
Moo Tools: Blocking in the head
Google API's: Blocking (default, Async available in docs)
Google Confidential and Proprietary

20. Popular CMS's
Wordpress: Blocking in the head
Drupal: Blocking in the head
Joomla: Blocking in the head
Google Confidential and Proprietary

21. Testing for Frontend SPOF
Google Confidential and Proprietary

22. Routing to localhost
Fails FAST! (connections are rejected)
Not good for testing real failure scenarios
Google Confidential and Proprietary

23. You need a black hole
blackhole.webpagetest.org 72.66.115.13
Hosts File On WebPagetest
setDnsName ajax.googleapis.com blackhole.webpagetest.org
72.66.115.13 ajax.googleapis.com setDnsName apis.google.com blackhole.webpagetest.org
72.66.115.13 apis.google.com setDnsName www.google-analytics.com blackhole.webpagetest.org
72.66.115.13 www.google-analytics.com setDnsName connect.facebook.net blackhole.webpagetest.org
setDnsName platform.twitter.com blackhole.webpagetest.org
72.66.115.13 connect.facebook.net ...
72.66.115.13 platform.twitter.com navigate your.url.com
...
Google Confidential and Proprietary
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html http://www.jpl.nasa.go/spaceimages/details.php?id=PIA13168

24. How pervasive is the problem?
Google Confidential and Proprietary

25. "Broken" Sites
● CNN
● MSNBC
● New York Times
● LA Times
● Bloomberg
● ABC News
● CNet news.com
● Pinterest
● ESPN
● AARP
● Business Insider
...From just 20 minutes of looking
Google Confidential and Proprietary

26. What do we need to do?
Google Confidential and Proprietary

27. Browsers
● Provide an easier way to asynchronously load complex
dependency chains
○ async does not maintain order
○ defer does not work for inline scripts
■ and is broken in several versions of IE
● Not block onload for Async scripts
○ Sadly, the spec requires onload blocking
● Implement Resource Timing
Google Confidential and Proprietary

28. Widget Owners
● Never EVER provide blocking snippets
● All examples should be asynchronous
● Do not force HTTPS if it isn't required
● Where possible, allow for sites to self-host any critical
code
Google Confidential and Proprietary

29. CMS Developers
● Build frameworks that encourage async code loading
(and encourage their use for default operation)
● Provide a mechanism for tracking the performance of
individual plugins
Google Confidential and Proprietary

30. Site Owners
● Never load resources that you do not control synchronously (and refuse
3rd party code that doesn't have an async option)
● Do not rely on onload for important functionality
● Make sure your monitoring has aggressive time limits (under 20 seconds)
● Make sure your RUM reporting has an aggressive timeout
● Track RUM failures by region
● Leverage Resource Timing and field RUM analytics when available
Google Confidential and Proprietary