Unless you were a Seahawks fan, this year's Super Bowl was pretty uninteresting. Any hope for an evenly matched contest was dashed immediately after halftime, putting advertisers in the enviable position of being the main attraction. But to make an ad worth the heavy price, advertisers look to make their brand "stick" with consumers, especially the huge numbers of them with connected devices in their laps and pockets. Best case, you win a customer for life. Worst case, you crash and burn.
Yet with millions on the line, advertisers continue to struggle with connecting to consumers beyond the television screen, especially on the mobile devices most consumers have at hand. The average load time for advertiser sites on smartphone was nearly 20 seconds, and only 6 sites came in at less than 10 seconds. That’s well past user expectations of four seconds.
Keynote monitored the advertiser sites across all 3-screens. Desktop and tablet sites typically performed much better.
Responsive Web Design Rises at the Expense of Performance
Compared to last year’s study, we saw fewer advertisers delivering sites not optimized for viewing on smartphones. But even though only 2 sites did not customize delivery for mobile, the performance was still quite slow—even more so than last year. This is because the amount of data delivered—especially from sites using Responsive Web Design (RWD) techniques—was very large. 50% of the sites we monitored used the RWD approach.
RWD is a great technique, but performance is a critical success factor that often gets lost. Most experts agree, performance and user experience should not be sacrificed when taking this approach. Our Benchmark interview with Brad Frost hightlights the benefits of using RWD with a performance-oriented mindset.
Creating a great online experience across the three screens of desktop, smartphone and tablet is challenging. Many brands (58%) took to social platforms like Twitter and YouTube for cross-screen engagement – one way to get around the complexity of web development. By using hashtags, advertisers "offloaded" interaction to Twitter instead of their websites.
But viewers of the big game still turned to mobile sites for more information about the companies in ads. What they experienced was most often long load times, and in some cases, no site at all.
Of all the desktop sites we monitored, Kia’s had the lowest availability at just 91%, with server errors from 5:55pm PT until 6:30 pm PT. Maybe a hashtag might have lessened the load?
Pepsi’s site on the smartphone also averaged about 90% success rate. Some measurements were bogged down due to large amounts of content being sent “behind the scenes” of the page load. Pepsi downloaded a breathtaking 19 MB of data while viewing its page--more than many desktop sites.
It’s definitely a best practice to put content that isn’t immediately visible (such as the content from Pepsi's “Your Voice” tab) at the end of a transaction. This way delays don't impact the core page (which is why it takes only 6 to 8 seconds to load the visible part of the site). But downloading over 150 unoptimized images uses up more bandwidth than some entire mobile sites do. It’s also consuming a lot of users’ data –which isn’t great when not everyone has an “all you can eat” data plan. In this respect Pepsi actually violates a number of best practices such as compressing images, for smartphone performance.
In contrast, the best performing site, SodaStream, came in at a lean 216KB. SodaStream’s performance was solid until after the game started. But after its ad ran, the site basically “hung up” for 5 to 10 minutes at around 6:36pm PT. Although performing well across desktop, smartphone and tablet, SodaStream experienced timeout errors for a brief period--long enough for some consumers to notice.
Better testing ahead of time, and when optimizing for mobile don’t just try to squeeze your desktop content onto a phone. Content needs to be adapted for the size of the device both in terms of network latency and the size of screen. Do not underestimate the value of preparing a site for high traffic surges, even if leveraging social platforms. Users still want to connect with brands on their terms, and that means a responsive mobile Web experience.
And if you are going the Responsive Design route, make performance the first feature, not the last.