Startup Shootout: Taking on the three-screen challenge

Editor’s note: Keynote Systems’ Startup Shootout Index provides some insight into the three-screen challenge now facing anyone with a web presence. It’s the first website performance index to measure load times and completion percentages on desktops, smartphones, and tablets simultaneously. VentureBeat is Keynote’s exclusive media partner, so we’ll be bringing you a fresh set of data from Keynote every month. Check out previous Startup Shootout results.

The Keynote Startup Shootout Monthly Index measures a range of startups’ Web performance across three screens – desktop, smartphone and tablet. We frequently see big differences in these performance numbers, for the same company, across these three screens.

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":628768,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"business,","session":"B"}']

Why such discrepancies? The challenge for startups is understandable – how do you prioritize where to put scarce development resources when you have three screens to deliver on. Perhaps your target market also has a clear preference for a particular device that makes it worth focusing on that at the potential expense of other screens?

Take for example Box and Dropbox. On the desktop, they load at an acceptable (but not great) 3.17 seconds (Dropbox) and 3.44 seconds (Box.net). On the iPhone, however, Dropbox falls to 10.35 seconds and Box.net to 15.32. On the tablet, Box.net maintains the 15 second load time but Dropbox drops even further to 21.81 seconds. In contrast, Rovio Entertainment (creators of the Angry Birds games) shows a cumbersome 14.75 seconds to load on the desktop but delivers impressive 5.98 seconds and 6.28 seconds on the iPhone and tablet respectively. Rovio’s successes have largely been on the mobile screens, so perhaps it is not a surprise that they’ve done more to optimize the mobile experience.

Given that dilemma, we decided to take a look at some approaches for making the most of optimizing a site across the three screens even when resources are tight.

Content Trade-offs

On the desktop, many Web sites want to deliver a rich content experience for the user –graphics, video, and multiple ways to sign up or interact. This is especially true for sites in the gaming and entertainment industries. But rich content is usually where the first problems of performance start. How fast does that initial page render happen while all that rich content is loading? When does the user begin to be engaged with the page?

For years, Web sites have used monitoring services that provide an external perspective of performance by measuring complete page load times. Testing systems located in datacenters all over the world measure the amount of time it takes to download content from a web site. This continuously robotic sampling of a web site’s responsiveness can tell web site owners a lot about how well their site is delivering content, but just looking at end-to-end page load timings doesn’t represent how well a user’s web browser is actually assembling that content or how soon the user can begin to interact with the page.

New industry standard timers supported by modern browsers can reveal performance more holistically—based on users’ true experience during the page load. The World Wide Web Consortium (W3C) and major browser organizations use the Navigation Timing standard for measuring speed from the browser client. “The browser itself saves timestamps from various events in the process of navigating to a page, including timestamps for the starting and ending of phases,” said Internet Explorer Program Manager Jatinder Mann, who is in the W3C working group.

Now implemented in the current versions of Internet Explorer, Chrome, and Firefox, the Navigation Timing standard helps measure:

• The first point at which the user sees something other than a blank screen (“Time to First Paint”)

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":628768,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"business,","session":"B"}']

• When a page can be fully clicked, swiped and scrolled (“Time to Interactive Page”)

• The total time a page takes to render completely (“Total User Experience Time”)

These are important events in a page’s lifecycle and make the difference between a user seeing something and seeing nothing. As an example, imagine you visit two sites, each with a page load time of five seconds. If site A starts delivering content in half a second and site B doesn’t start giving you any content at all until four seconds, your perception of site A will be much more positive even though both sites have the same overall 5 second user experience time.

For intentionally content-heavy sites such as those in the digital entertainment or gaming industries, developers need to ensure the initial render time is as fast as possible. User satisfaction will be improved if at least some key elements of each new page are rendered as quickly as possible in order to maintain the user’s interest.

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":628768,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"business,","session":"B"}']

And how exactly can you do that?

Site designers have a lot of control in how fast their pages can achieve the Time to First Paint, and adhering to industry best practices is an important starting point. For most modern browsers, the initial render of a page will not happen until all the Cascading Style Sheet (CSS) content that the browser is expecting on the page has been loaded. CSS files are used by the browser to decide everything from what fonts are going to be used and background colors or images to where to display content on the screen. If browsers begin rendering the page before all CSS content is downloaded, there is a risk that a late-arriving CSS file could result in dramatic changes to the page layout – and very disruptive to the user experience of the page. Browsers are therefore conservative and choose to wait to render the page until all CSS has downloaded.

Going back to our startups’ sites, Rovio could be doing a better job of managing the CSS on its site. The final CCS files critical to the initial render of the page are not loading until the 38th network request on the page. Images and other content on the page are loading over the network, but are not being displayed on the screen right away because the browser is waiting for those final CSS files to arrive. Site visitors going to www.rovio.com on a desktop browser are waiting an average of 3.4 seconds to see something other than a blank screen.

So how can you avoid this problem? The best practice recommendation is to load all CSS as soon as possible after the base HTML document for the web page. It sounds simple, but merely changing the order in which assets are referenced in the HTML document can dramatically change the user experience of the page load. Give the browser an opportunity to render the page as quickly as possible. Site owners should also track initial render performance as a key user experience metric. All of the major browsers (IE, Chrome, Firefox, and Safari) now have built-in tools that help developers measure the Time to First Paint during the development process. Once the changes are rolled into production, continue to monitor the initial render experience with a program of ongoing site monitoring.

We know it’s a tough call prioritizing screen developments but with some best practices, we can minimize the delays and keep users engaged.

[aditude-amp id="medium3" targeting='{"env":"staging","page_type":"article","post_id":628768,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"business,","session":"B"}']

Photo Credit: Irish Typepad/Flickr