Download as PDF, PPTX
Uploaded byPatrick Meenan
Frontend SPOF
The document discusses the frontend single point of failure (SPOF) problem caused by blocking JavaScript and CSS files. It provides examples of popular websites, code libraries, widgets, and content management systems that contribute to frontend SPOFs. The document recommends solutions for browsers, widget owners, CMS developers, and site owners to address this issue through asynchronous loading of resources and better monitoring of frontend performance.
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Frontend SPOF
- 1. Frontend SPOF Patrick Meenan Google Confidential and Proprietary
- 2. Credit where creditis due June 2010 - Steve Souders http://www.stevesouders.com/blog/2010/06/01/frontend-spof/ Google Confidential and Proprietary
- 3. See what itlooks like: http://youtu.be/prToLDpjmPw Google Confidential and Proprietary
- 4. All Because of... <scriptsrc="https://platform.twitter.com/anywhere.js?id=ZV0JHq7YJkjozsfohDIleQ&v=1" type="text/javascript" ></script> Google Confidential and Proprietary
- 5. What Monitoring Says... ActiveMonitoring ○ 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! WindowsSocket Connect Timeout: 20s Mac/Linux Socket Connect Timeout: Much Higher PER CONNECTION Google Confidential and Proprietary
- 7. There's More! On thatone 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 noticeit 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 forcode with no dependencies (widgets): Google Confidential and Proprietary
- 13. Async Loaders Help forchaining 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 atthe 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 arewe 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: Blockingin the head Drupal: Blocking in the head Joomla: Blocking in the head Google Confidential and Proprietary
- 21. Testing for FrontendSPOF Google Confidential and Proprietary
- 22. Routing to localhost FailsFAST! (connections are rejected) Not good for testing real failure scenarios Google Confidential and Proprietary
- 23. You need ablack 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 isthe 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 weneed to do? Google Confidential and Proprietary
- 27. Browsers ● Provide aneasier 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 ● NeverEVER 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 ● Buildframeworks 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