Sparked by the FIFA Mobile App Crash Analysis Klaus did, I wondered if soccer fans using their mobile or desktop browsers will have a better user experience to follow their favorite teams through the tournament. Back in 2010 I did one of my first Web Performance Analysis blogs on FIFA’s website using the dynaTrace Ajax Edition. Looking at the Page Load Time for the desktop version, we learnt that it was almost cut into half to 4.7s. But is this due to better infrastructure, modern browsers, and the like? What’s interesting is that the desktop page size doubled and the mobile version of the site is much slower than the desktop even – even when tested on WiFi. What will this mean when soccer fans all over the world try to stay up-to-date while sitting in their offices or are on the go with a slow mobile connection? What can be done to improve this?
Let’s look at the findings, then at some best practices and an outlook on where to go from here:
Finding #1: Lots of images & fonts
Just as Klaus found in his mobile app analysis, both the mobile and desktop websites download a lot of small images such as country flags and venue images. Both websites also download fonts; the mobile site downloads 10 and the desktop website downloads 4.
Interestingly, the desktop website still downloads each individual country flag twice – one large version and one small version – instead of using CSS Sprites. This was the same finding as back in 2010 including the very short expiration header causing the browser into conditional requests after every 60 seconds (don’t think these country flags will change that frequently). For the mobile website they only load one version of the flag but still require the browser to download 32 images that could be merged into one: You can save 31 requests!! [Tweet This Now!].
Finding #2: 370k Favicon
Scanning through the largest objects on the page highlights an unusual suspect: The Favicon. In FIFA’s case it has a total size of 370k – which is true for both mobile and desktop version of the site. I assume this was just a simple mistake when creating that icon so it should be an easy fix. The typical favicon has a size of about 1kb. Fixing that problem takes 369k off of the payload which translates into 7% reduction in total page size [Tweet This Now!]. Besides the favicon we can also find some larger CSS (280k) and JS (170k) files:
This might just be a minor thing, but the jQuery framework they use bundled into their bundle.js file shows that it is version 1.5.2 which has been released 3 years ago. Upgrading to a more recent version is definitely recommended because of performance reasons, optimized for newer browsers as well as optimized for file size. Older versions of frameworks sometimes even cause problems on modern browsers due to their lack of optimization for browser specific features. Check out How Outdated Libraries impact Page Load Time and Slow Page Load in FireFox caused by old versions of YUI and jQuery.
Outdated libraries was also the reason for one of the crashes in their Mobile Android App as highlighted in Will FIFA Fix their Mobile App Crashes?
Best Practices: Testing Multiple Browsers and Devices
We all know that there are hundreds of browser and device combinations out there and it is impossible to test everything. But you should pick the top browsers and devices that your end users are using when analyzing your own website. You can get these stats from your real user monitoring, web analytics or even the web server log files. If you have no clue at all you can go with the global statistics from sites such as http://gs.statcounter.com.
Let’s get ready for the tournament – Lets apply WPO 101
With only a few weeks to go we hope the web site will not crumble under the expected high load because soccer fans that can’t watch the game live will follow the games online – either using their mobile app, mobile browser or desktop browser in their offices.
I consider all findings in this blog as basic Web Performance Optimization – or – WPO 101. It should be easy to shave off these extra kBs, reduce roundtrips and therefore optimize page load by working on my findings. The dev, testing and monitoring tools are out there as well as the best practices written in blogs, books or presented at conferences.