frontend spof
DESCRIPTION
Presentation from the March Hamburg Web Performance Meetup about Frontend Single Points of FailureTRANSCRIPT
Google Confidential and Proprietary
Frontend SPOFPatrick Meenan
Google Confidential and Proprietary
June 2010 - Steve Souders
http://www.stevesouders.com/blog/2010/06/01/frontend-spof/
Credit where credit is due
Google Confidential and Proprietary
See what it looks like: http://youtu.be/prToLDpjmPw
Google Confidential and Proprietary
<script src="https://platform.twitter.com/anywhere.js?id=ZV0JHq7YJkjozsfohDIleQ&v=1" type="text/javascript"></script>
All Because of...
Google Confidential and Proprietary
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
It Gets Worse!Windows Socket Connect Timeout: 20s Mac/Linux Socket Connect Timeout: Much Higher
PER CONNECTION
Google Confidential and Proprietary
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>
There's More!
Google Confidential and Proprietary
But I'd notice it is down...
Google Confidential and Proprietary
In Iran?
https://blogs.akamai.com/2012/02/a-view-of-the-iranian-internet-blockade-from-akamais-intelligent-platform.html
Google Confidential and Proprietary
or China?
http://calendar.perfplanet.com/2011/frontend-spof-in-beijing/
Google Confidential and Proprietary
We have solutions...
Google Confidential and Proprietary
Async SnippetGood for code with no dependencies (widgets):
Google Confidential and Proprietary
Async LoadersHelp 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
Put scripts at the bottom
http://stevesouders.com/examples/rule-js-bottom.php
Google Confidential and Proprietary
Well...
Google Confidential and Proprietary
Almost...
Blocks onload except on IE and iOS 4
http://www.stevesouders.com/blog/2012/01/13/javascript-performance/
Google Confidential and Proprietary
So, How are we doing?
Google Confidential and Proprietary
WidgetsGoogle Analytics: AsyncGoogle +1: AsyncTwitter: AsyncFacebook: AsyncDelicious: Async (image/href)StumbleUpon: AsyncDigg: AsyncReditt: BlockingAddThis: BlockingShareThis: Blocking (as of February 2012)
Google Confidential and Proprietary
Code Libraries (samples)Jquery: Blocking in the headClosure Library: Blocking in the headYUI: BlockingDojo: Blocking in the headMoo Tools: Blocking in the headGoogle API's: Blocking (default, Async available in docs)
Google Confidential and Proprietary
Popular CMS's Wordpress: Blocking in the head Drupal: Blocking in the head Joomla: Blocking in the head
Google Confidential and Proprietary
Testing for Frontend SPOF
Google Confidential and Proprietary
Routing to localhost Fails FAST! (connections are rejected) Not good for testing real failure scenarios
Google Confidential and Proprietary
You need a black hole
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
blackhole.webpagetest.org 72.66.115.13
Hosts File72.66.115.13 ajax.googleapis.com 72.66.115.13 apis.google.com 72.66.115.13 www.google-analytics.com72.66.115.13 connect.facebook.net 72.66.115.13 platform.twitter.com ...
On WebPagetestsetDnsName ajax.googleapis.com blackhole.webpagetest.orgsetDnsName apis.google.com blackhole.webpagetest.orgsetDnsName www.google-analytics.com blackhole.webpagetest.orgsetDnsName connect.facebook.net blackhole.webpagetest.orgsetDnsName platform.twitter.com blackhole.webpagetest.org...navigate your.url.com
http://www.jpl.nasa.go/spaceimages/details.php?id=PIA13168
Google Confidential and Proprietary
How pervasive is the problem?
Google Confidential and Proprietary
"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
What do we need to do?
Google Confidential and Proprietary
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
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
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
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