First Input Delay (FID) and Total Blocking Time (TBT) Explained

What is FID/TBT?

First Input Delay (FID) measures the time between a user’s first interaction on a page (clicking a button or a link) and when the browser responds and performs the intended function.

In simple terms, First Input Delay tells us how long a user had to wait for a response from the interface after their first click.

Web.dev tells us that the main reason for input delay is when a browser’s main thread is busy doing something else and can’t respond to a user right away. 

Commonly, this is due to long Javascript-related tasks that take up a lot of time to execute. 

Alongside Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), First Input Delay is one of the three core web vitals Google is emphasizing in its Page Experience Update rolled out in Summer 2021. 

In this update, Google confirmed that the three core web vitals would become part of its ranking algorithm. So, you want your pages to score within the following “good” ranges according to Google when their core web vitals are measured.
 

Since FID is a stat measured only by real user interaction, it cannot be replicated in a lab setting.

However, Total Blocking Time (TBT) is a metric that essentially measures how much time a browser is blocked and therefore can closely estimate FID. That’s why you’ll see TBT in Semrush’s Core Web Vitals report instead of FID.

What Causes Poor FID/TBT?

As stated above, any task that takes a long time to complete, therefore blocking a browser’s main thread and preventing it from executing a new task right away, will lead to poor FID.

Most often, the delay and blocking of the main thread occur at the stage of loading the page, when the content has already been displayed, but the loading has not finished yet. 

How to Fix Poor FID/TBT

Since most of the blocking we see related to FID occurs in the page loading phase, you can lower the TBT and therefore FID by optimizing the main thread of your page.

The best way to do this is by eliminating long tasks.

Long tasks are any tasks where the main thread was blocked for more than 50 milliseconds. 

Potentially, if a user clicks on a clickable element in the browser during a long task they will see a delay in the response.

Luckily, it can be quite easy to dive into your page and identify long tasks with the help of Lighthouse and Semrush.

First of all, you should understand which pages have problems. Is it a template problem or just a specific page like the main page? 

Then, identify what long tasks are causing the most problems.

Then, you can use the following Lighthouse checks to find ideas of how to improve TBT. Their recommendations will include things like:

Take these recommendations along with a Semrush Site Audit and present them to your developer to help them prioritize tasks that will minimize FID and improve your site’s page experience.

If you want to dive deeper and locate for yourself exactly where the long tasks are, you can open up Lighthouse and inspect long tasks in the main thread.

Inspect Long Tasks in the Main Thread

To optimize your FID, you need to understand what is causing the poor interactivity. As we discussed above, you need to understand when long tasks occurred in the main thread.
 

There are two ways to actually see the long tasks:

• Using special recommendation in Performance Audit of Lighthouse called “Avoid long main-thread tasks “
• Viewing the original trace

In both variants, it will be easy if you launch a Performance audit via Lighthouse. 

To open Lighthouse, right-click anywhere on the page and select Inspect.

Then, find the Lighthouse report at the top and hit the Generate report button.

Once you generate your report, you can scroll down to dive into Lighthouse’s recommendations, which will be labeled Opportunites and Diagnostics.

Using the “Avoid long main-thread tasks “ recommendation

Find and open the recommendation Avoid long main-thread tasks”. It’s available in an audit if there is at least one task that takes more than 50ms.

This lists all of the instances where Lighthouse saw a long task, potentially blocking and delaying a user’s interaction.

View Original Trace

To take another look, you can click View Original Trace in the Lighthouse report to see a timeline of the page load.

Make sure you have the Web Vitals setting checked in order to see when “Long Tasks” took more than 50ms. 

Remember, Lighthouse tells us that anything faster than 50ms is considered good, while anything slower than 50ms is considered poor.

Use this step to hone in on the specific instances on your page where FID could be improved.

Measure TBT on Semrush

Semrush’s Site Audit allows you to track TBT along with the other core web vitals when you audit your website. 

The benefit of using Semrush here is that it will save your data in the Core Web Vitals report so you can reference how you’ve improved your vital metrics over time.

This allows you to first inspect your core web vitals, then make changes, and then re-run the audit and see how your scores improved. 

You’ll also find a whole Performance report with more information about how to improve the overall page load speed of your website, along with other optimization tips.

Try it out today and get your page experience optimized!