First input delay (FID) is another important core web vitals that calculates the user interactivity. FID and TBT have the same role in defining the visual interactivity of the users.
The only difference is, Total blocking time (TBT) calculates the lab data, and First input delay (FID) calculates the real-world (Field) data.
User interactivity is a key user experience parameter similar to the web page’s loading speed. So, in this article, we are sharing the complete detail of FID, and the way to improve them.
What is First Input Delay?
First input delay (FID) is the time taken between the user’s first interaction and the browser’s response to the same interaction. For example, if the user clicks a button (carries a third-party link) or hypertext, it has to load to the corresponding page.
FID helps to calculate the delay in the browser response upon any interaction by the user. Hence, FID calculates the visual interactivity of a web page. The maximum First input delay for a web page should be less than 100 ms.
An interesting fact about FID is that it only calculates any user’s first interaction. The browser’s main thread is often blocked in the first moments of a page’s life cycle, when critical resources are being loaded.
By addressing First Input Delay, you can ensure your website feels smooth and responsive while loading those vital resources.
First Input Delay vs Time To Interactive:
First Input Delay (FID) calculates the time taken for any interaction that happens on the web page. In contrast, Time to Interactive (TTI) calculates the time the web page takes to become interactive.
TTI is another key performance metric of a web page that many webmasters collapse between FID. Still, TTI calculates until the web page becomes interactive, where FCP (First Contentful Paint) would have rendered the web page’s content.
For most page elements, event handlers are registered within 50ms when useful content is already rendered.
TTI has no role in calculating the user interaction that could happen before the web page becomes fully interactive.
The First Input Delay allows you to capture early interactions with users who click on links before most page elements have event handlers registered.
First Input Delay vs Total Blocking Time:
Apart from FID being field data, and TBT being lab data, there are a few other differences between these two web performance vitals. As you know both of them calculate the user interactivity on a web page.
Total blocking time is calculated as the sum of all long tasks (more than 50 ms).
Both metrics influence a page’s usability and create a strong correlation. In order to optimize your FID, it is, therefore, necessary to increase your TBT score.
What is the Good First Input Delay (FID) Score?
A web page with a better user experience should have a first input delay of less than 100 ms at the 75% of the page loaded. This is the same across mobile and desktop devices.
Here is Google’s recommended FID Score slabs,
- Good – Less than 100 ms
- Need Improvement – 100 to 300 ms
- Poor – More than 300 ms.
How to Measure First Input Delay?
Unlike LCP, FID is a web vital measured only in the field by having a real user interact with the page.
The FID cannot be measured in the lab because it requires a real user. Total Blocking Time (TBT) can be measured in a lab, correlates with field interaction data (FID), and captures interactivity issues. You should optimize for TBT in your lab to also improve FID.
You can measure FID with the following Field tools.
FID by Google Search Console:
Since FID is one of the web vital analyzed by the field data (real-world), you can get through Google search console when your web pages fail to user interactivity less than 100 ms.
You get these details under Core Web Vitals Section, And there could be two segments of FID errors,
- Need Improvement – Graph in Yellow Color (FID between 100 to 300 ms)
- Poor – Graph red Color (FID more than 300 ms)
Most importantly, you don’t get data in the Google search console until your website has incremental traffic.
Measuring FID by Page Speed Insight:
This is another method to measure the first input delay is by page speed insight (a free tool by Google).
But, to resolve the issue that cause poor FID, you should fix all the issues that increase the load of total blocking time (TBT).
How to Improve First Input Delay?
Before moving towards improving FID, you should understand the issues that could delay the first input for user interaction.
- Impact of third-party code.
- Browser’s Main thread.
- HTTP requests.
Here are few ways to improve first input delay (FID).
By removing unnecessary characters, spaces, and line breaks, you can reduce the file size. As a result, a browser has fewer processes to handle, increasing responsiveness and page speed.
<script> is also executed on the main thread. Time to Interactive is one of the key metrics related to how users perceive the speed of your website. If your page runs a lot of code before it’s needed, that also delays your Time To Interactive.
- Use Code Splitting – This helps send only the JS code the user needs to execute.
Cache your code with the PRPL pattern to reduce network trips
3. Minimize Main Thread Work:
You have to minimize the main thread work by reducing the impact of the third-party code.
It is possible to minimize main-thread work by:
Evaluating scripts takes less time.
Minimize style and layout.
Avoid rendering delays.
Use web workers
- Debounce the input handler of the web page, and avoid the long-running input handler.
4. Reduce the Impact of Non-Critical and Third-Party Codes:
Third-party codes and Non-critical resources can pull down your first input delay (FID), and other core web vitals score.
These third-party codes can be,
- Embedded codes
- Google Analytics or Tag Manager, and other tracking codes.
- CDN such as Cloudflare
- Third-party ads – Google Adsense, ezonic, outbrain, etc.
- Heat Map codes.
- Google Fonts
- Other Google APIs.
So, you should reduce the impact of the third-party code by following the steps,
- Use Lazyload for iframe.
- Delay the JS execution.
- Use Google Tag manager to add all the tracking codes.
- Use Lightweight plugins and themes.
- Add DNS prefetch.
- Host font locally.
- Disable the impact of third-party codes on specific pages.
These steps could improve FID of the web pages.
- First Input Delay (FID) is one of the important Core web vital components under mobile and desktop page experience.
- It calculates the real-world (field) data of the time taken for the first user interaction to happen on the web page.
- The first interaction should take less than 100 ms for a Good FID score. More than 100 ms has to be optimized.
- You can book our technical SEO services if you find it tedious to solve Poor FID on your website.