Frontend SPOF
Upcoming SlideShare
Loading in...5
×
 

Frontend SPOF

on

  • 3,294 views

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

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

Statistics

Views

Total Views
3,294
Views on SlideShare
3,045
Embed Views
249

Actions

Likes
4
Downloads
25
Comments
0

5 Embeds 249

http://blog.seso.at 105
http://passioncoder.dev 80
http://www.passioncoder.com 56
http://beta.thewebhatesme.com 4
http://www.thewebhatesme.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Frontend SPOF Frontend SPOF Presentation Transcript

  • Frontend SPOFPatrick Meenan Google Confidential and Proprietary
  • Credit where credit is due June 2010 - Steve Souders http://www.stevesouders.com/blog/2010/06/01/frontend-spof/ Google Confidential and Proprietary
  • See what it looks like: http://youtu.be/prToLDpjmPw Google Confidential and Proprietary
  • All Because of...<script src="https://platform.twitter.com/anywhere.js?id=ZV0JHq7YJkjozsfohDIleQ&v=1" type="text/javascript"></script> 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: 20sMac/Linux Socket Connect Timeout: Much Higher PER CONNECTION Google Confidential and Proprietary
  • Theres 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
  • But Id notice it is down... Google Confidential and Proprietary
  • In Iran? Google Confidential and Proprietaryhttps://blogs.akamai.com/2012/02/a-view-of-the-iranian-internet-blockade-from-akamais-intelligent-platform.html
  • or China? Google Confidential and Proprietaryhttp://calendar.perfplanet.com/2011/frontend-spof-in-beijing/
  • We have solutions... Google Confidential and Proprietary
  • Async SnippetGood for code with no dependencies (widgets): Google Confidential and Proprietary
  • Async LoadersHelp for chaining together dependenciesControl.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 Google Confidential and Proprietaryhttp://stevesouders.com/examples/rule-js-bottom.php
  • Well... Google Confidential and Proprietary
  • Almost... Blocks onload except on IE and iOS 4 Google Confidential and Proprietaryhttp://www.stevesouders.com/blog/2012/01/13/javascript-performance/
  • 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 APIs: Blocking (default, Async available in docs) Google Confidential and Proprietary
  • Popular CMSsWordpress: Blocking in the headDrupal: Blocking in the headJoomla: Blocking in the head Google Confidential and Proprietary
  • Testing for Frontend SPOF Google Confidential and Proprietary
  • Routing to localhostFails FAST! (connections are rejected)Not good for testing real failure scenarios Google Confidential and Proprietary
  • 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 Proprietaryhttp://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html http://www.jpl.nasa.go/spaceimages/details.php?id=PIA13168
  • 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 isnt 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 doesnt 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