Archive for October, 2011

Going Async!

A lot of things have changed since my last post. In the meantime my company (Hansenet aka Alice) was sold and is now part of Telefonica, which sails under the “O2″ Brand in Germany. My responsibilities have changed also quite a bit, and part of it is now the O2 Portal.

We had a big Relaunch of the site something like 6 weeks ago, and are now doing some more (performance) tweaks here and there.

One of the tweaks we had on our Agenda was going Async for the newly integrated social media widgets of Facebook, Twitter and Google+. The idea came up actually by a tweet from Steve Souders announcing that the Google Plus Button has gone async.

This was then further fueled by a Post from Stoyan Stefanov, where he showed a way to go async for actually all of the most prominent widgets.

So, maybe you are asking yourself, what is so important on async, that some of the brightest guys are working and evangelizing so much on that? Reason for that is the way Browsers behave. They are single threaded, and so quite a few Browsers will simply stop doing anything else (even downloading other assets in parallel) when they are downloading and executing Javascript. So a) it comes at a performance price for some browsers, as no other asset is downloaded and therefore interfers/blocks/halts the process of Page load and rendering, and b) due to above mentioned behaviour it becomes a Single-Point-of-Failure (SPOF). If an image loads slowly (or not at all) it is not a big issue. If a Javascript loads slowly (or not at all), it becomes really ugly for the above mentioned reasons.

And with the social widgets it is even more difficult: If your image Server is unreachable, you can politely call your engineer. If Twitter is unavailable… well… you can’t even tweet that.

And just recently Pat Meenan has written an excellent Blogpost, how the result can look like, visible in this Video. You see how the Page of businessinsider remains blank for full 20 seconds (White Page! Nothing!) just because Twitter is unavailable. And the nice chap that Pat is, he already implemented the possibility to check your Site for these SPOFs in Webpagetest.

So I tried it with our site and the result was this (Left: Twitter unavailable, Right: Twitter available) :

Video Before

What you see here is not as bad as Businessinsider. Nevertheless the Browser is spinning wheels for more than 25 seconds, indicating, that the page hasn’t completed. Even more problematic is, that the Slider (arrow >) to the right of the Screen does not show up until 24 seconds within the page load. And THAT is problematic, as the Slider functionality of the main teaser is quite an important feature to our site.

So overnight :-) we (actually others, see below) did some magic and today the widgets have gone async! Result? (Left: Twitter unavailable, Right: Twitter available)

Video After

As you can see, the page doesn’t need any longer, if any of the social widget providers is unavailable! (well actually it is even a bit faster due to less data to download) And as a goodie, our PageSpeed Score has improved by +1 due to ~150KB of Javascript having been defered.

Thanks to Alex K., Sasa S. and Siegfried H. for the quick fix, and as always, to the community (and this time specifically to Steve, Stoyan and Pat) for continously developing tools and sharing research results and best practices.

So I recommend to testdrive your site with Webpagetest, and make sure, it doesn’t break!

Leave a Comment

Follow

Get every new post delivered to your Inbox.