Time to Interactive (previously called Consistently Interactive) is one of Google PageSpeed Insights main metrics that measures the time it takes the page to become interactive.
Here’s an example of how page TTI is measured:
- Any kind of useful content has appeared on the page. This is First Contentful Paint. At this point, the user can see a picture of a product or read its description (but they can’t do much else).
- Visible page elements have their event handlers registered in the browser (one way or another, the methods are actually different for different browser versions).
- Interactive elements on the page start responding to user input within 50 ms or lower. This is our Time to Interactive. If UI elements take longer to respond, the user will see the site as unresponsive. A 50 ms interval is chosen as the max allowed delay that users perceive as “normal”.
Why Google PageSpeed Gives so Much Attention to TTI?
Time to Interactive (TTI) is the most important Google optimization score (more about other metrics in the linked guide). TTI has 5 times more weight than, for example, First Meaningful Paint and 2.5x times more than First CPU Idle.
Take a look at this table to get a better picture of it:
| Metric Name | Brief Description | Relative Weight |
| Time to Interactive | TTI is the delay between the start of page load and the time the user can actually do anything on the page with 50 ms UI delay. | 5 |
| Speed Index | Speed Index is a cumulative metric based on how fast the site can display visible parts of the page. | 4 |
| First Contentful Paint | FCP is measured as a time from the start of page load until the first text, image, or UI element becomes visible on the page. | 3 |
| First CPU Idle | First CPU Idle is when the main thread has loaded the majority of the stuff on the page and is ready to handle user input. | 2 |
| First Meaningful Paint | Very similar to First Contentful Paint, this metric measures how fast the store can display primary page content. | 1 |
As you can see, Time to Interactive is the most important metric for your store. This is also one of the hardest values to track, as even Google mentions the difficulties in getting it right outside of a lab setting, on a working, breathing production site.
Which Performance Issues Make Your TTI Score Low?
Time to Interactive is sensitive to a few frontend performance issues:
- long code execution time,
- excessive code size which translates into longer page downloads,
- obsolete code pieces that the browser still has to process,
- no priorities in the code loading order.
Based on Google Lighthouse Audit guidelines and our own extensive experience in frontend optimization, we’ve outlined 3 main fixes to drastically improve your Time to Interactive score.
Fix 1. Split JS Code Into Two Parts
The great thing about web technologies is that we have invented a lot of ingenious ways to speed up page loading. One of the fundamental methods of boosting page speed is making sure the Critical Rendering Path stays free of garbage.
In Magento, Critical Rendering Path often gets clogged with assorted non-important stuff that can make your loading process extremely slow. Magento is chock-full of complex JS and CSS files that create a significant load on the browser and the Critical Rendering Path.
One way to reduce that load is to split the JS and CSS files into two separate groups. The first group will stay at the top of the page because it contains all the necessary code that is vital to correct page rendering. The second group, however, will move to the bottom of the page. This is where we will store all the non-critical JS and CSS files that don’t really impact how the page initially looks.
Of course, each store is unique and you’ll have to examine your store carefully in order to decide what goes where. We can only give you a general idea of how it works. The execution is up to you.
Fix 2. Defer JavaScript Code
Web browsers read the document from top to bottom. And whatever code happens to be at the top of the page gets executed first. Loading all JS code before moving on to the other parts of the page helps developers make sure that every element of the page will function exactly as they designed it. But Magento has so much code that it becomes a problem for performance.
Our solution: defer loading of the interfering code. But first you have to understand what your Critical Rendering Path looks like and what elements of the page make it load slower, for example by blocking its render. After you profile your page and define which parts are acting as blocking agents, defer them from loading inside the Critical Path.
In addition to improving your Time to Interactive, deferring render-blocking resources will also help increase the Time to First Paint score.
Fix 3. Clean Up Your Codebase
Over time, a lot of Magento stores that are rich in features become overburdened with unused or plain dead code which for a number of reasons developers hesitate to remove.
And we understand their caution when it comes to a large and complex store. It’s not always obvious which parts of the code are hanging loose and which are just doing their job. But if you want to have a fast and high-quality store, you have to deal with the hard issues.
Kill the dead code that slows you down. Put in actual effort to find and remove the parts of the code that no-one really uses. Making your code lighter and cleaner not only speeds up the store but helps you maintain the codebase better and work faster next time.
Summing Up
Time to Interactive is obviously a complex metric with a lot of nuances in optimization. We’ve listed the main 3 ways to shorten TTI as much as possible with as little effort as possible. Basically, this is the foundation of your work to improve the TTI score.
If you want to move forward, take a look at deferring offscreen images, minifying and compressing payloads, and clearing up the critical path by preloading the necessary resources and key requests ahead of time.
Remember to do preloading inside the <body> tag and not inside the <head>. And among other things, never give up even if all your efforts don’t bring you the best Google PageSpeed score. There are more than a few dozen factors that go into TTI score and improving them all is a long process.
