{"id":4155129,"date":"2022-03-10T09:25:36","date_gmt":"2022-03-10T08:25:36","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=lp_resources&p=4155129"},"modified":"2023-05-05T15:28:26","modified_gmt":"2023-05-05T13:28:26","slug":"improve-time-to-interactive","status":"publish","type":"lp_resources","link":"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-time-to-interactive\/","title":{"rendered":"How to Improve Time to Interactive (TTI) on WordPress"},"content":{"rendered":"

Update<\/strong>: Time to Interactive has been removed in Lighthouse 10, and it’s no longer included as a performance metric.<\/p>

Wondering what\u2019s Time to Interactive and how it affects the speed of your WordPress site? Then keep reading because we all want a website that is fast and easy to interact with. Nothing is more frustrating than clicking somewhere on the page and getting no results from our action, right?\u00a0\u00a0<\/p>

To make sure that your website provides an outstanding user experience, there are a few metrics you should take care of, and TTI is one of them. As a user-centric metric, Time to Interactive holds up 10% of the global performance score computed by Lighthouse. It may not be the most influential metric for the final score, but the frustration experienced by the user may lead them to exit your page, or even worse: exit your website!  <\/p>

We will explain what Time to Interactive is, why it\u2019s important, which tools can measure it, and what affects its score. We\u2019ll also share some technical tips to fix a bad Time to Interactive grade (TTI longer than 3,8 seconds). Finally, we will show you how to improve your overall performance score and ensure that your website does not look broken.<\/p>

What Does Time to Interactive (TTI) Mean in Lighthouse?<\/h2>

Time To Interactive measures how quickly visitors are able to fully interact with your page.  <\/p>

It\u2019s a meaningful lab metric for assessing load responsiveness that directly affects how users perceive performance and interaction. <\/strong><\/p>

The TTI metric measures when the page starts loading to when its main sub-resources have loaded and it is capable of responding to a user action quickly. <\/p>

In short, TTI measures how fast a page can execute any JavaScript code for components to respond quickly to any user action. It helps to identify which page looks<\/em> interactive. <\/p>

Let me explain with an example.<\/p>

A user can see a call-to-action button on the screen. He tries to click on it, but nothing happens: the element is not<\/strong> clickable. Frustrating, right? The TTI metric helps you to identify those pages that look <\/strong>interactive but actually, they are not. <\/p>

TTI goes hand in hand with Total Blocking Time<\/a> because together, they provide insights into your page\u2019s responsiveness to a user\u2019s action. <\/p>

\ud83d\udcd6 A page is considered fully interactive when:<\/strong>

\u2013 The page displays useful content, which is measured by the First Contentful Paint
\u2013 Event handlers are registered for the most visible page elements
\u2013 The page responds to user interactions within 3,8 seconds.<\/td><\/tr><\/tbody><\/table><\/figure>

Lighthouse is an open-source and automated tool that helps developers in improving the quality of web pages. It creates audits for speed, performance, accessibility<\/a>, UX, and search engine optimization (SEO). To provide a great user experience, sites should strive to have a score between 90 and 100. <\/p>

\ud83d\ude80 If you need help to perform your website\u2019s audit, we recommend you to follow our complete guide that explains how to improve your Lighthouse performance score<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>
\"Performance
Performance score performed by Lighthouse including TTI \u2013 <\/em>PSI<\/em><\/a><\/figcaption><\/figure>

In short, a fast TTI helps ensure that the page is usable.<\/strong><\/p>

Lighthouse v8 combines six metrics to generate your final performance score, including the Core Web Vitals<\/a>, the Speed Index, the Time to Interactive<\/strong>, and the Total Blocking Time: <\/p>

Metric <\/strong><\/td>Weight<\/strong><\/td>What\u2019s a good score? (green)<\/strong><\/td><\/tr>
First Contentful Paint<\/a><\/td>10%<\/td>0-2 s<\/td><\/tr>
Speed Index<\/a><\/td>10%<\/td>0-3,4 s<\/td><\/tr>
Largest Contentful Paint<\/a><\/td>25%<\/td>0-2,5 s<\/td><\/tr>
Time to Interactive<\/strong><\/td>10%<\/strong><\/td>0-3,8 s <\/strong>(Web.dev says that the score can be acceptable up to 5 s)<\/em><\/td><\/tr>
Total Blocking Time<\/a><\/td>30%<\/td>< 200 ms<\/td><\/tr>
Cumulative Layout Shift<\/a><\/td>15%<\/td>0 \u2013 0,1<\/td><\/tr><\/tbody><\/table><\/figure>

How to Measure Time to Interactive<\/h2>

To define your TTI score, you need to measure the time from when the page starts loading to when it has visually rendered its initial scripts, and it\u2019s capable of reliably responding to user input quickly. <\/p>

Lighthouse follows four steps to measure the TTI: <\/p>

  1. Start at First Contentful Paint (<\/a>when the first text and image elements are rendered to the screen.)<\/li>\n\n
  2. Search forward in time for a quiet window of at least five seconds (quiet window = no long tasks<\/a> and no more than two in-flight network GET requests)<\/li>\n\n
  3. Search backwards for the last long task before the quiet window, stopping at FCP if no long tasks are found.<\/li>\n\n
  4. TTI is the end time of the last long task before the quiet window (if no long tasks are found, it\u2019s the same value as FCP).<\/li><\/ol>

    You can visualize the four steps thanks to the diagram below:<\/p>

    \"Explaining<\/figure>

    Which tools to measure TTI automatically?<\/h3>

    You can use two different tools to measure TTI and your performance using the Lighthouse technology.<\/p>