Analysis of How External Scripts Can Block Page Loading

I recently found two excellent blog articles (1, 2) by Steve Souders on how a single externally loaded Javascript, CSS and fonts can block page loading, resulting in completely or partially blank pages. Steve calls these Frontend SPOF (Frontend Single Point of Failure) and shows some screenshots of what the pages actually look like. I have copied one below.

NewImage

This screenshot was taken when Steve was in Beijing and was caused by the Chinese firewall blocking the domain cdn.eyewonder.com. I also had a similar experience when I was in Shanghai and the firewall blocked a Twitter badge that I had (I was using an old synchronous Twitter badge. Twitter now uses synchronous badges only, which do not cause fronted SPOF).

However, this experience is not limited to China. Technically, this can happen whenever loading of a resource takes a lot of time. This often happens when you have a bad Internet connection, for example when you have a weak 3G connection or you have an unreliable WiFi setup. I experienced this a lot in conferences and exhibitions where not enough money was spent to beef up the WiFi.

It is unfortunate that many web developers are still unaware of this issue.