Optimizing the Front End with Time to Interact (TTI)

TTI Time to Interact
Time to Interact matters

Slow websites are annoying.

Despite claims that slow websites are a major turnoff for site visitors the problem is growing. What’s next… the return of the neon-colored Comic Sans MS font? What is this 1998? Seriously though…the optimal website load time is three seconds (or less), yet, the median load time of the top 100 retail sites is 7.72 seconds, a terrifying slowdown of 13.7 percent since the Spring of 2012, according to a study from Radware.

However, there is a bright spot, as some websites have caught on to an emerging key metric for the usability of a website and the user experience it delivers: Time to Interact (TTI).   Dotcom-Monitor reviewed website speed TTI in an earlier blog post where we discussed some of its benefits. However, lets now take a look at how websites are actually using TTI to provide a better user experience to their site visitors.

Time to Interact and Page Load are Not Equal

Firstly, the whole TTI thing isn’t completely straight-forward. To whit, the Radware study showed a strong correlation between pages that had a faster TTI and those that had a faster overall load time.  However, with some sites there was no correlation between page load times and TTI.  For example, three sites in the top 10 for TTI—Netflix.com, iHerb.com, and LivingSocial.com—actually had page load times that would be considered slower than the industry average, but their TTI was very short. This strongly suggests they have already adopted TTI as a metric and have optimized their content so their important, interactive content is loading first while less important content is deferred.  Ah ha! It’s a strong signal that Time to Interact is becoming a standard for user experience and web performance analysis.

Tricks of the Trade

Optimizing a page for TTI is different than optimizing a page for its overall load time. Specifically, some TTI optimization tips include:

  • Loading content “above the fold” first
  • Loading interactive elements quickly
  • Compressing text and images
  • Minifying code
  • Utilizing keepalives so that cached content does not expire
  • Deferring the load of third-party scripts (social and analytics tools, for example), as well as any elements that do not need to be interactive before the page loads completely

Optimizing websites for TTI isn’t difficult, but it does take some work determining what content visitors are likely to consider important. For most sites, that isn’t a problem; for an eCommerce site, the important content is often pretty obvious, such as the featured product of the day. On a blog, it is likely the featured or newest article. If you track your visitors, it’s not difficult to determine where the majority of them spend their first few seconds on your site. Using the principle of TTI to organize and optimize content for those first few seconds of a user’s experience is likely the difference between a purchase and an annoyed user and lost opportunity.

What are your thoughts on TTI? Is it a valid web performance metric for measuring user experience? Let us know in the comments below…

 

{ photo credit: Adam Foster | Codeforcc }

Latest Web Performance Articles​

How to Monitor HTML Canvas for Load and Uptime

Are you responsible for ensuring your HTML Canvas is always available and performing optimally? If so, you need to know how to monitor HTML Canvas for load and uptime. This blog post will explain how you can do that effectively using various monitoring tools.

Start Dotcom-Monitor for free today​

No Credit Card Required