I’m a big fan of Lenny Kravitz (in fact, recently photographing and reviewing his concert in Boston).  So when I saw that he updated his web site, I went to check it out (looks cool!). And, also took the opportunity to test it with the (free) Yottaa Website Test service, seeing how it loads from multiple locations around the planet (I ran this for 13 locations, and 5 samples each).

Web Performance Results for LennyKravitz.com

The site is fairly fast – loading in an average of 6 seconds.  But, there were occasional glitches where it loads much slower (we can see that subsequent measurements in Dublin performed just fine – so the issue appears to be an intermittent one).

So, I wanted to see what was actually happening – here’s the detailed data for the individual sample.  First, I reviewed the page loading video and sequence of screenshots (all automatically captured by Website Test).  What we see is that most of the page loads within a couple seconds, but then it’s at the 53,500 msec (53 seconds) mark that the final component is loaded – the Facebook and Twitter sharing section.

Armed with this data, we’re ready to explore the waterfall chart.  Very quickly, we can see that there’s just two assets – one from Twitter, one from Facebook – that are slowing down the site.  As the arrow below indicates, there are several page assets that are delayed by the Facebook widget (we can see that though their download times are very fast, they don’t start until the Facebook and Twitter widgets fully load).

For more insights, we can click on the indvidual assets, and see exactly what happens: there’s no errors generated, the Facebook widget starts being download just a couple seconds after the page is requested, but it’s not for 50+ seconds later that it is delivered.

Avoid Being Slowed Down by Twitter and Facebook Widgets

How intermittent is this issue?  Well, with Yottaa Website Test, we can check this with one mouse click (the “Test” button above).  In this case, for the 45 samples I ran, the problem did not resurface.  But plug-ins for social sites are notoriously unreliable, so it’s a best practice to make sure they load asynchronously – that is, independently of anything else on your page.  In this case, the widgets are being loaded synchronously:

<script src="//connect.facebook.net/en_US/all.js#appId=&amp;xfbml=1"></script>
<script src="//platform.twitter.com/widgets.js"></script>
<script src="//apis.google.com/js/plusone.js"></script>

There’s lots of great resources on the web for ways to optimize 3rd-party plugin performance (e.g., for Twitter, Facebook).  As an example, here’s how to load the Twitter widget asynchronously:

<script>(function(d, s, id) 
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'twitter'));</script>