10 Tips for Avoiding Frontend Single Points of Failure

Last week I had the pleasure of attending an eye opening chat by Google’s Steve Souders at Etsy’s Code as Craft Technology Talk. He focused on Front End Single Points of Failure.

Steve made the point that redundancy is not just for hardware.  It’s important that our code gracefully recover from failed dependencies.  This would happen, for instance, if scripts hosted by Facebook, Twitter, Google, ad serving, and analytics would fail to load.

I’ve distilled Steve’s thoughts into 10 tips for avoiding frontend single points of failure.

  1. It’s not a question of if these will fail, but when.  Be prepared for the failure.
  2. Load all scripts asynchronously.  This will help decouple your code from failures elsewhere.  Since browsers are inconsistent in how they time out requests, asynchronous loading will at least keep the user experience consistent across platforms.
  3. Don’t load code via the <script> tag or use “document.write”.  That will load the code synchronously.  Bad.
  4. In some situations you can avoid using “document.write” by manually adding DOM elements in your HTML.
  5. Unfortunately, there might not be a good fix for ad serving scripts.
  6. webpagetest.org is a great way to test 3rd party domain failure and how it affects (or not) your web pages.  Try using blackhole.webpagetest.org (72.66.115.13), which is set up to be entered on your hosts file or DNS, it will simply timeout.
  7. It is best to create and roll your own JS loaders.  Scripts like Loadrunner, LABjs, script.js can help, but might not work 100% under all circumstances.
  8. Using the defer attribute on the script tag should help. But the async attr will likely not – browser support varies on both.
  9. Best practices dictates avoid loading via the <script> tag, but if you must use it, place it at the bottom of the page where they would execute after the page has rendered.
  10. These suggestions will positively impact any website but are particularly critical for large scale sites with a wide international audience.

 

Here are Steve’s slides from the chat: http://stevesouders.com/docs/etsy-spof-20120619.pptx

Here’s a video of what appears to be a similar chat: http://fluentconf.com/fluent2012/public/schedule/detail/24864

Here’s Steve’s original “Front End SPOF” post — his site is the go to resource for web performance and optimization: http://www.stevesouders.com/blog/2010/06/01/frontend-spof/

If you create, host, or serve your own services, scripts or API’s, i.e. you are the 3rd party, here’s an article on how you can help: http://www.stevesouders.com/blog/2012/05/22/self-updating-scripts/

Etsy Code as Craft Technology Talks: http://codeascraft.etsy.com/etsy-speaker-series/

  • http://ntang.tumblr.com/ Nicholas Tang

    Good post.  :)

  • http://ntang.tumblr.com/ Nicholas Tang

    Good post.  :)