Andreas Grabner About the Author

Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

Is the FIFA World Cup Website Ready for the Tournament?

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?

Even though page loads in half of the time – size doubled and mobile web isn’t looking that good

Even though page loads in half of the time – size doubled and mobile web isn’t looking that good

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.

Comparing both landing pages (mobile web and desktop web) shows where the structural differences are

Comparing both landing pages (mobile web and desktop web) shows where the structural differences are

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!].

Downloading 64! For Desktop and 32! Individual flag images with a 60s expiration header. Don’t think these flags change that frequently!

Downloading 64 for Desktop and 32 Individual flag images with a 60s expiration header. Don’t think these flags change that frequently! [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:

Focus on largest resources to reduce page size: Favicon, CSS and JS are good candidates

Focus on largest resources to reduce page size: Favicon, CSS and JS are good candidates

Finding #3: Outdated JavaScript 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?

Finding #4: HTTP 4xx for Mobile JavaScript libraries

When looking beyond the landing page of FIFA 2014 we find HTTP 404s for JavaScript libraries that are embedded on the mobile web page only. A quick look into the Network Tab of the dynaTrace Performance Report highlights the full URL:

Missing JavaScript files on the mobile site will break functionality

Missing JavaScript files on the mobile site will break functionality

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.

My main browsers are Internet Explorer, Firefox and Safari on my iPad. My tools of choice are dynaTrace (which supports both IE and FF) as well as Fiddler which allows me to “mimic” any type of browser such as my iPad. I am sure you have your own tools that can analyze network traffic, JavaScript executions and rendering activity in your browser. Just make sure you are not only testing a single browser version behavior.

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.

About The Author
Andreas Grabner
Andreas Grabner Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

Comments

  1. Yeah! It’s very important question to discuss that Is FIFA official site is ready for this mega blast world cup of Brazil? Becuase of, heavy traffic and visitors from all around the world.
    Thanks for discussing this precious question!

Speak Your Mind

*

Do the math so we know you are human *