FID stands for First input delay  out of the three Core Web Vitals. FID score is the metric used to measures the responsiveness of a webpage to user events. FID score is determined by the time delay, a webpage takes to begin processing (& not responding) to its user event (click, tap, or touch), so less the delay to respond to user event the better the FID score and vice versa.

Note: FID is the time taken by the website to start working on the request (not responding but starts working) when being click, tapped or touched.

First Input Delay measurement and remarks

FID-first-input-delay-measurement-metrix

FID is measured by Google and it is measured in milliseconds (ms).

  • If the FID time of your website is below 100ms, then it is considered as a Good score.
  • If it is between 100ms to 300ms, it is considered as ok and needs improvements.
  • If the FID time is more than 300ms, it is considered as poor and requires immediate attention and rectification.

Irony is Google measures the FID score on field data and not on the lab data, hence FID metrics it is not available on Google’s Page insight when checked. This means FID can only be measured on field data*

*Field data means the data obtained from the real users when operated on field.

So the question arises,

If we cannot measure FID on Page Insight (Lab data) then how to Optimize for it?

The answer for the above question has been hinted by Google itself. FID is directly related Page speed insight TBT metrics. TBT stands for Total time Block, if your TBT score is high chances are that your FID score might as well be at higher level.

If the TBT score is less than 300ms then it is a Good thing

TBT Beyond 300ms, you may need to optimize your website for the same.

Steps to Optimize TBT and invariable Optimizing for FID score are as follows

1. Reduce Java Script execution time

Website doesn’t responds until it finishes executing the entire Java script. Thus, it is recommended to use Javascript where it is absolutely essential.

  • Remove unused JSS.
  • Compress JSS
  • Use web workers API

2. Minimize main thread work

To minimize main thread works do the following

  • Remove 3rd-party JavaScript.
  • Utilize web workers to do tasks off the main thread.
  • Use simple layout
  • Stick to the PRPL pattern.(Push critical resources for the initial route. · Render initial route.)

3. Optimize CSS

To reduce the load of CSS on your website. Do the following things.

  • Minify. compress and defer CSS.
  • Use CSS only when it is very essential

 

4.Minimize main thread work

Main thread Explanation

When browser is visiting a particular website, there are several processes running in the background, those processes are divided into number of threads. One of which is a main thread that handles primary work such as execute JS etc. The thread remains busy until it is handling these tasks and till that time your browser will not process user input. As user input process too is handled by the same main thread. You get to solve this problem in your page speed insight report. Refer minimize main thread work in your page speed insight.

main-thread-page-insight

Minimizing main thread work

you need to analyze  on Page Speed Insight as to which process is taking more time and optimize accordingly. If Style & Layout is taking more time then we need to optimize for CSS. If script optimization is taking more time, then we may need to optimize for JS. Besides the above two, if anything else you need to optimize for minimizing main thread work is this.

  1. reducing the time spent evaluating scripts.
  2. minimizing style and layout recalculations.
  3. reducing the time spent parsing CSS/HTML/JavaScript.
  4. preventing the delay in rendering page pixels.

5.Reduce third party code

These are the codes from 3rd party website which serves different purpose on your website. Example of this code is Google analytics code (We usually paste in the header section) or Chat widgets etc. These codes increase the website loading time. again, use only those third party codes  which are absolutely necessary.

You can observe most of the solutions to optimize for FID are similar. You can see compressing JSS minifying, deferring CSS etc. are some points common solutions across Core Web Vitals. In Core web vitals many things are dependent on each other, LCP, FID and CLS are connected to each other and there are many things in common between them. More so with LCP and FID, there are many solutions which are common and depend on one another. As the goal of these 3 elements is to enhance the performance of the website for the end user and thereby increase the user experience. Their way of optimization are also common.

Must Read: Core Web Vitals: LCP score optimization techniques: Every possible technique inside

References

FID by Google: https://web.dev/fid/

LCP, FID & CLS: https://yoast.com/core-web-vitals/

Google Web vital report: https://support.google.com/webmasters/answer/9205520?hl=en