It’s hard to beat the excitement that comes with attending a major sporting event – there’s a lot going on, with loud music and commentary, bright lights and Jumbotrons, and thousands of people milling about in search of merchandise, concessions, or restrooms.
Unfortunately, as part of the research for our web performance report, Multi-Industry Web Performance 2016 State of the Union – Desktop Edition, we found that overall aesthetic seems to also apply to how sports websites are built, with disastrous results to their page speed and the resultant Time to Interact, where key content is rendered and accessible to users. While 65% of sports fans prefer a desktop or laptop computer to get their sports fix, according to a Sporting News Media study, the trends that emerged while testing for this category showed few sites scoring well.
Incredibly, 96% of the sites tested exceeded the three-second target users demand. Numbers don’t lie, and this is way more than a fumble.
While the results are disappointing, there are opportunities to get the user experience off the bench, so to speak.
In analyzing the page composition and loading of the top sports sites, we found:
- Sports sites tested largely missed the goal when it came to their Time to Interact: only 6% were under three seconds. A good chunk of the sites tested – 34% – took at least twice the three-second target to load. The median TTI was 5.2 – the longest amount of the industry categories tested for this report. The site with the longest total load time took over 34 seconds to fully load and the median site was over four megabytes in size.
- 34% had over 200 requests. Each request results in a longer cumulative load time.
- 46% of sites tested scored an “F” for image compression on WebPagetest.org, while 12% earned an “A.”
- The gratuitous requests, redirects and trackers led to the slowdown, as well as Flash and other scripts, large hero images, and custom fonts.
Imagine an entire sports team, along with cheerleaders, coaches and other support staff, all trying to run through a door at the same time. What you’d get is quite a pileup – and that’s exactly what’s going on.
The following are some of the main performance bottlenecks, along with some techniques to help address them.
SPORTS SITES FEATURE TOO MANY REQUESTS
For most browsers, a website on the HTTP 1.1 standard has a limit of six persistent connections. Until one request has completed its process, the next request can’t load for a particular connection.
With even six connections going at the same time, when you have upwards of 400 requests and each request requires a round trip to the server, it all adds up. Indeed, some of the sports sites had the longest waterfall charts seen in testing for our State of the Union reports.
Consider this: Even if each request was only 34 milliseconds, at 1,000 requests you’d be looking at 34 seconds. This site had a load time of around 117 seconds. Its visual complete time was 119 seconds.
In total, the site was over 14 megabytes – seven times that of the average page on the web.
While this was an extreme example, on average, the sports sites tested had over 195 requests. That’s still a fair amount of requests. Page complexity is a real issue.
SPORTS SITES NEED TO OPTIMIZE THEIR IMAGES
We get it – sports exists as a visual medium, and site owners want to extend that experience to their sports sites.
Even so, too many images can drag down a page’s loading time, especially when they lack key optimization techniques. With 46% of the sites failing at image compression, according to WebPagetest, it’s no wonder the category fared poorly as a whole.
Sports sites skewed more image-heavy than other categories we tested, including ecommerce.
Looking at the website squarely in the middle of the list ranked by the Time to Interact, images constitute 69% of the page’s weight, with 129 of the 188 total request being for images. While many of these individual requests were downloaded in under 10 milliseconds, enough took over half a second to have a cumulative effect.
This site also didn’t have its large, rotating hero image pop up until 7.2 seconds had elapsed.
Compressing and spriting or lazy-loading images can help reduce the impact of images for these websites, along with formatting them correctly for various browsers.
Image compression is a performance technique that minimizes the size (in bytes) of a graphics file without degrading the quality of the image to an unacceptable level. Reducing an image’s file size has two benefits:
- Reducing the amount of time required for images to be sent over the internet or downloaded, and
- Increasing the number of images that can be stored in the browser cache, thereby improving page render time on repeat visits to the same page.
Additionally, inappropriate image formatting is an extremely common performance culprit. An image that is saved to the wrong format can be several times larger than it would be if saved to the optimal format. Images with unnecessarily high resolution waste bandwidth, processing time, and cache space.
As a general rule of thumb, these are the optimal formats for common image types:
- Photos – JPEG, PNG-24
- Low complexity (few colors) – GIF, PNG-8
- Low complexity with transparency – GIF, PNG-8
- High complexity with transparency – PNG-24
- Line art – SVG
SPORTS SITES NEED TO REIN IN THIRD-PARTY SCRIPTS
Ads, ad trackers, videos and various analytics-related plugins can have an impact on site loading time, and this was particularly evident in the sports sites we tested. While it makes sense that site owners want to keep tabs on the efficacy of everything they have on their sites, they should also consider the performance impact of each element.
There’s an excellent article from Marketing Land which addresses this.
“When a page on the site is loaded, the code reaches out to the supported ad exchanges or supply side platforms (SSPs) for bids before its own ad server’s direct sales are called. Bidding is essentially simultaneous, instead of sequential, and focuses on all available impressions, not just the ones available after direct sales.”
One of the key ways sites can get a wrangle on header bidding is to also have the companies compete by load times. That’s right – the performance impact can be somewhat mitigated by this. Think of it as a “performance budget,” if you will. You could target as for a 900 MS slot, or a 1500 MS slot if you can afford the time.
While it’s better to avoid header bidding altogether, if you must do it for revenue purposes, be sure to watch it closely and keep it nailed down to as small of an impact as possible.
You can also go to the 3rd-parties themselves and see if they can further optimize their content, provided you have the clout to do so.
It’s a good idea to conduct A/B testing in order to properly evaluate the impact of various scripts. Without doing so for a complex page, you may not know exactly what is causing the slowdown.
SPORTS SITES CAN STILL DO A FOURTH-QUARTER TURNAROUND
If sports sites can effectively implement web performance optimization best practices, then sports fans won’t have to suffer through slow-loading sites.
By getting a handle on images, scripts and plugins, site owners can drastically improve the user experience, in addition to reducing the revenue lost when users bounce.