Frontend Single Point of Failure
At this year's Velocity Europe conference, I watched a great talk by Google's Patrick Meenan about 3rd party scripts and frontend Single Point of Failure (SPOF). A single point of failure is a part of a system that, if it fails, will stop the entire system from working. Quite often, you may add 3rd party scripts such as jQuery, social sharing buttons or Ad tracking scripts to your website with the best intentions, but depending on the way that these scripts are loaded you could potentially create a frontend single point of failure that can block the entire site!
If these 3rd party scripts are not implemented and deployed properly they pose a significant risk for the websites that host them. Finding and tracking frontend SPOFs on your website is not always easy, but fortunately there are tools available that will help you detect them. One of the tools that was discussed at Velocity Europe was SPOF-o-matic. This tool is an excellent plugin for Google Chrome that detects frontend single points of failure and allows you to simulate these 3rd party resources being unavailable.
Once you have downloaded and added the plugin to Chrome, simply navigate to your desired webpage. If you have any scripts that are blocking the webpage, you will notice a number in the top right-hand corner of the browser above the plugin. This number represents the number of scripts that could potentially block the website.
Click on the plugin and you will be presented with a list of the blocking scripts.
If you choose to enable resource blocking and reload the page, you will be presented with a great example of what would happen if a server that was hosting the 3rd party script went down. The results can be pretty devastating and this can happen to all sites, from major eCommerce companies to small startups.The video below shows what happens to this very page when it becomes blocked by a 3rd party script. The video on the left shows the page without it being blocked by external scripts, and the video on the right shows the same page being affected by a SPOF. Notice the difference in load times!
As you surf the web with this plugin enabled, you may notice how many websites have blocking scripts on their pages! If possible, the best option is to load these scripts in an async or non-blocking way.
When embedding scripts on your site, consider using the async or defer tags to load them asynchronously. I have previously blogged about these HTML attributes and the way that you can use them to asynchronously load JavaScript. Another option is to actually use JavaScript itself to load the third party script - there are some great examples in this blog post.
If you work with 3rd party scripts on your site, you will need to be mindful of the pitfalls that could occur if they aren't implemented properly. You could save yourself from an embarrassing outage!
For some further reading, check out the following links: