{"id":4155371,"date":"2022-03-10T09:26:21","date_gmt":"2022-03-10T08:26:21","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=lp_resources&p=4155371"},"modified":"2022-09-20T12:14:12","modified_gmt":"2022-09-20T10:14:12","slug":"reduce-total-blocking-time","status":"publish","type":"lp_resources","link":"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/reduce-total-blocking-time\/","title":{"rendered":"How to Reduce Total Blocking Time (TBT) on Your WordPress Site"},"content":{"rendered":"

Wondering what\u2019s the Total Blocking Time metric and how it affects the performance of your WordPress site? You are at the right place.<\/p>

We all love websites that are pleasant, easy to use, and fast. To make sure you provide a great user experience, there are a few metrics you should focus on, and TBT is one of them.<\/p>

More importantly, as a user experience metric, Total Blocking Time holds up 30% of the global performance score<\/strong> computed by Lighthouse. This makes it a top metric for optimization! <\/p>

We are going to explain in detail what Total Blocking Time is, why it\u2019s relevant, how to measure it, and what factors affect its score. We\u2019ll also share some tips on fixing a bad Total Blocking Time grade (TBT longer than 300 ms) to improve your overall performance score and make your visitors happy. <\/p>

What is Total Blocking Time (TBT) in Lighthouse?<\/h2>

Total Blocking Time is an important performance metric that measures the load responsiveness of your WordPress site. It is the sum of all time periods between First Contentful Paint (FCP) and Time to Interactive (TTI) when a task length exceeds 50ms. <\/strong>The score is always expressed in milliseconds. It counts for 30% of your total performance grade performed by Lighthouse.<\/p>

\"\"<\/figure>

Lighthouse is an open-source, automated tool that assists developers in improving the quality of web pages. The tool considers six metrics to generate your final performance score, including the Core Web Vitals<\/a>, the Speed Index, the Total Time to Interactive, 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-4,3 s<\/td><\/tr>
Largest Contentful Paint<\/a><\/td>25%<\/td>0-2,5 s<\/td><\/tr>
Time to Interactive<\/a><\/td>10%<\/td>0-5s<\/td><\/tr>
Total Blocking Time<\/strong><\/td>30%<\/strong><\/td>< 300 ms<\/strong><\/td><\/tr>
Cumulative Layout Shift<\/a><\/td>15%<\/td>0 \u2013 0,1<\/td><\/tr><\/tbody><\/table><\/figure>

\ud83d\udca1 If you need help to perform your website\u2019s audit, we recommend reading our complete guide that explains how to improve your Lighthouse performance score<\/a>. <\/p>

How to Measure Total Blocking Time<\/h2>

You can measure the TBT score by calculating the total amount of time that a page is blocked from responding to a user action. The total is calculated by adding the blocking time of all long tasks between First Contentful Paint (FCP) and Time to Interactive (TTI). <\/p>

Let me explain better.<\/p>

Every browser has a process that transforms the code into a web page. This action of processing all the code and styles needs to be effective because we want our page to be rendered as quickly as possible for the visitor. (Remember, we want to make a good impression and show the user how fast our website is!)<\/em><\/p>

The browser has many tasks <\/strong>to complete until it can render the page, such as parsing the HTML script, building the structure and the content of a web page (DOM), and executing its CSS and JS code. (That\u2019s a lot to do, right?) <\/em><\/p>

To avoid a high blocking time, <\/em>the browser should not encounter the JS and CSS files when parsing the code and rendering the page. To keep your website going fast, we have to \u201ctell\u201d the browser what we want to prioritize and what we want to load first.<\/p>

Understanding Long Tasks<\/h3>

If the tasks run longer than 50ms, it is referred to as a Long task and considered \u201cblocked.\u201d <\/p>

In such a case, your page becomes unresponsive to user inputs like screen taps, keyboard presses, mouse clicks, etc. <\/p>

The calculation of Total Blocking Time is based on those Long Tasks<\/strong>. A Long Task significantly monopolizes the web browser (> 50 milliseconds<\/strong>) and blocks the performance of other essential tasks (such as reacting to user actions with a mouse click). The main thread is considered \u201cblocked\u201d any time there\u2019s a Long Task<\/a>. The computer records this interval for each request as an individual blocking time. The sum of all individual blocking times is called total blocking time.<\/p>

Let\u2019s see an example. Every time Lighthouse detects a Long Task (>50 ms) <\/strong>then it will also measure the blocking duration: <\/p>

\"Total
Total Blocking Time \u2013 Example<\/em><\/figcaption><\/figure>

As you can see, the Total Blocking Time is a sum calculated by adding the \u201cblocking\u201d portion of the different Long Tasks. The blocking portion of a Long Task is the part of its duration beyond 50 ms (in red on our chart).<\/p>

Let\u2019s see another task\u2019s breakdown to identify the TBT: <\/p>