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

What Is FID/TBT?

The time between a user’s initial interaction with a website (clicking a button or a link) and when the browser replies and executes the desired function is measured by the First Input Delay (FID).

In layman’s terms, Initial Input Delay indicates how long a user has to wait for an interface response following their first click.

The most common cause of input latency, according to Web.dev, is when a browser’s main thread is occupied with something else and can’t reply to a user immediately away.

This is frequently due to lengthy Javascript-related processes that take a long time to complete.

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

Google confirmed that the three key web vitals will be included in its ranking algorithm in this release. So, when Google measures your sites’ key web vitals, you want them to fall into one of the following “excellent” areas.

FID cannot be recreated in a lab setting since it is a statistic based only on real-time user input.

Total Blocking Time (TBT), on the other hand, is a statistic that effectively quantifies how long a browser is blocked and may thus be used to predict FID. 

FID and Time To Interactive (TTI)

The time it takes for a page to become fully interactive is referred to as TTI. When a page responds to user interaction in fewer than 50 milliseconds and event handlers are registered for the majority of visible page components, it is considered fully interactive. TTI, like TBT, is essentially a lab metric.

Again, FID is a fantastic ally in this situation.

At any time, a page can become interactive. Users, on the other hand, can click or tap on the screen much before that. TTI falls short in this area.

After all, what good is it to know when a website becomes completely interactive if the visitor’s experience had already ruined?

Users don’t mind if a page takes 6, 7, or 8 seconds to become interactive. They are concerned if a page is interactive when they require it. As a result, FID fills the void left by TTI.

Measuring the First Input Delay

With Google’s PageSpeed Insights, you can rapidly assess your FID. In the “Field Data” report, it’s one of the first things you’ll notice.

And, because field data reveals how real visitors interact with your site, you’ll want to focus on making it better in the long term.

You may also utilise Google Search Console’s Core Web Vitals report (GSC). Open GSC and go to the “Experience” menu and choose “Core Web Vitals.” Then you may choose between the “Mobile” and “Desktop” reports.

The report then displays all of the sites with comparable concerns, such as a lengthy FID.

What Causes a Low FID/TBT Score?

As previously indicated, any process that takes a long time to finish, stopping the browser’s main thread and preventing it from immediately completing a new job, would result in low FID.

The main thread is frequently delayed and blocked during the loading of a page, when the content has already been displayed but the loading has not yet completed.

How to Improve Your FID/TBT

Because the majority of the blocking we find linked to FID happens during the page loading phase, improving the main thread of your page can reduce TBT and hence FID.

Eliminating lengthy chores is the most effective method to do this.

Any job where the main thread was stopped for more than 50 milliseconds is considered a long task.

If a user clicks on a clickable element in the browser during a protracted job, the response time may be delayed.

With the aid of Lighthouse and Semrush, it’s rather simple to delve into your website and find lengthy jobs.

First and first, you must determine which pages are problematic. Is it a template issue or a problem with a single page, such as the home page?

Then, figure out which long chores are the most troublesome.

Then, using the Lighthouse checks below, you may come up with ways to enhance TBT. Their suggestions will include the following:

• Defer offscreen images
• Reduce the impact of third-party code
• Avoid an excessive DOM size
• Reduce JavaScript execution time
• Minimize main thread work

Present these ideas to your developer, along with a Semrush Site Audit, to help them prioritise actions that will reduce FID and enhance your site’s page experience.

You may open Lighthouse and investigate lengthy jobs on the main thread if you want to go further and find out precisely where the long tasks are.