In recent years, the importance of page speed and loading time has been a recurring theme. Ignoring site performance issues is perilous for the success of a website, with site visitors (including Google and soon to be Facebook) turning away in droves from slow-loading sites.
A recent Google study indicated that 53% of people will abandon a mobile site if it takes more than three seconds to load. Yet, the actual sites in this study often took more than 22 seconds to load, so clearly, we have lots of work to do here.
Below are a few articles you maybe be interested in based around UX and site speed:
– Top 5 WordPress Plugins That Will Speed Up Development of Your Website
– Is Motion a Benefit or Drawback in Website Design?
– How to Design a Website That Achieves Your Business Goals
– How Improving Your UX Can Optimise Conversion Rates
But page loading speed is not the only metric we need to concern ourselves with here. Beyond simply loading the various assets that make up a web page, we must also consider JavaScript execution time. This is the time it takes for the browser to execute the JavaScript elements that make the page interactive. This adds additional time onto the traditional page load metrics, and in many ways is more important to ensure fast, frictionless mobile experiences.
Occasionally your JavaScript execution time can be slow and elements of your web page may load before the important functionality. This will make your website appear to the user as ready to use, however, the interactive elements of the page are still not ready for engagement.
Users get easily frustrated and will leave laggy sites. If your page takes a while to load and then does not work for a few more seconds, all the work you did to get the user to your website could have been wasted, and getting them to come back may be considerably more difficult.
What’s the Difference Between Page Load Speed and Time to Interactive?
The difference between page load time and Time to Interactive is simple:
- Page Load Time is the time in which it takes to download the entire content of a web page and to stabilise.
- Time to Interactive is the amount of time in which it takes for the content on your page to become functional and ready for the user to interact with once the content has stabilized.
Time to Interactive gives you a deeper insight into how your website is perceived on your user’s side of the browser.
Moving Beyond Page Speed With Time to Interactive
Time to Interactive (TTI) is a new metric developed by Google. It measures the *amount of time between the point at which your page elements have loaded and the point at which those elements become interactive (or usable)*.
Google explains TTI as follows:
Time to Interactive is defined as the point at which layout has stabilized, key webfonts are visible, and the main thread is available enough to handle user input.
The idea here is that with ever more functionally complex web experiences, page speed is only half the issue. We must also consider how fast the page responds to a user’s actions. This makes the metric more a measure of user experience than simply of network performance.
Why Has TTI Been Created?
In an age where speed is of the essence and a second could win or lose you conversions, Time to Interactive is a way in which you can concentrate your website’s performance on your user. It provides you with a deeper understanding of your UX which can ultimately help you control and understand your website’s perceived performance.
On top of that, it arms UX designers and developers with the information which can help them shave off those extra few seconds of your user’s wait time, which could make all the difference between whether the consumer chooses you or your competitor.
Why Is TTI Important?
TTI is gaining importance as it becomes ever more important to connect performance to your UX. Your site can be perfectly thought out but if you neglect to look at how the user interacts with it at the first point of contact you bypass a crucial stepping stone in your relationship to your audience.
A user judges your site from the moment they click a link to it. If elements of your website have become visible and the user tries to click them and nothing happens – say, on your navigation items – you have already created a negative impression of your site. That user is then more likely to hit the back button and move on to a competitor site. Speed and user experience are key to marketing efforts.
Speed is an issue for users, and therefore also for designers, developers, and marketers. It’s a crucial component of optimising your website for improved visibility in search engines. Loading speed and now TTI are key elements that should be considered by your entire website team – from design to development and marketing.
Although still a fairly new metric, TTI has already been incorporated into several site performance programs such as Lighthouse. I can only predict it will gain traction as a vital part of UX as technology advances and the web gets even more competitive.
Getting Started With TTI
The one main extension which currently uses the TTI as a metric in its reports is the Chrome extension Lighthouse. This uses TTI as a factor in measuring a site’s overall performance. You can run your website against Lighthouse and it provides you with a detailed report of your site’s overall performance, accessibility, best practices across multiple devices, and a detailed account of what your site has failed on and what you can do to improve your results.
You can find out more about the Lighthouse plugin here.
How Is TTI Measured?
TTI is derived from the RAIL model of performance. RAIL stands for: Response, Animation, Idle, and Load:
– Response – respond in under 100ms
– Animation – produce a frame in 10ms (with 60 frames per second)
– Idle – use idle time to complete deferred work
– Load – load content in under 1000ms
This covers the entire spectrum of page loading and performance, rather than the older page speed metrics. We want pages to load fast, but they must also respond instantly and serve smooth animations by tapping into idle time to enable this.
RAIL registers the time in which all of your key visual site elements have come together, such as the web fonts loading, the layout stabilizing, and the site being loaded enough for the user to use it. It then measures how long it takes for any visible links to become interactive.
What Classes as a Good TTI?
The RAIL model provides guidelines on this and indicates that a TTI score of under 100ms is ideal. This is the measurement of time within which a user expects a response from the site they are using before assuming the site has a fault or is “laggy”.
How to Improve Your Score
The most effective way to improve your TTI is to optimise the critical rendering path of your website. A few ways to do this which could help reduce your Time to Interactive score are:
– Think about this issue at design time and select fonts, visual elements and a page structure that allows for a fast user experience.
– Lazy-load offscreen images. Images which aren’t important at the user’s first contact won’t load until the user scrolls down. This is where you tap into and maximise your idle time.
– Enable browser caching. Locally caching files with the user cuts down on network traffic and speeds up the entire process. If you cache your page elements, they will already be downloaded so rendering can proceed as well as the option of leverage browser caching.
– Prioritise above-the-fold content. A bit like lazy-loading your images, this means that above-the-fold content will load before the content below it. This can be done through prioritising elements of your CSS, which will allow your user to start engaging with your content without having to wait for the whole page to load.
Conclusion
The key takeaway here is that page speed is important. We all hate waiting around. Yet, the majority of time a user spends waiting is for elements of your page to load or become interactive, rather than for the page itself to load.
Where interactive elements can work under 100ms then users perceive this as instantaneous. If interactive elements take longer than 1000ms, users start to perceive a delay and this becomes frustrating. Longer interaction times give the impression that things are simply not working and the user is likely to have pressed something else before the previous interaction has actioned – which is not a good place to be.
As designers and developers, we must focus on the user experience. We must aim to remove friction at any and all points and ensure that we create the best possible experiences across mobile and all devices.
*Please note that this is a new metric and so the definition of the metric may change. To keep up to date with the progression of the metric you can find more information here.
