First Input Delay (FID) Overview

What is First Input Delay (FID)? 

First Input Delay (FID) measures how soon your site becomes responsive to user input. Specifically, if a user clicks on a button or a link, how quickly does your site respond with the expected result of that action? 

FID is a good indicator of a user’s first impression of your site’s interactivity and responsiveness, and a good FID score means a user is more likely to stick around on your site and return to consume more content. Everyone loves a fast, responsive site!

What causes poor FID?

• Long tasks where the browser has to pause to run an event
• Long JavaScript execution time
• Large JavaScript bundles
• Render-blocking JavaScript

Generally speaking, input delay is a result of the browser’s main thread being occupied by other tasks, so it is unable to respond to the user (yet). 

A common reason for this is the browser is still busy executing and parsing big JavaScript files. 

So when the user tries to interact with something, the browser is too busy to notice (run an event listener) and respond because the JavaScript that’s running might direct it to perform a different action. 

How to measure and assess your FID score

Unlike LCP and CLS, FID is a metric that can only be measured “in the field” using real users’ experiences and not “in the lab” using simulated tests — because FID requires someone to interact with the page and provide that First Input. 

What’s the difference between “field” and “lab” data?

I’m glad you asked! We break it all down right here.

If you’re looking for a lab metric, you can use Total Blocking Time (TBT). TBT correlates well to FID, and improvements made for TBT should also reflect in improved performance for FID.

In terms of FID scores, you want to aim for a time of less than 100 milliseconds to be classified as “good” by Google. A time slower than 300 milliseconds is categorized as “poor”. 

Tools to measure FID

You can use the following tools to understand your site’s FID score:  

Field tools 

• PageSpeed Insights
• Search Console (Core Web Vitals report)

Lab tools to measure Total Blocking Time (TBT)

• Chrome DevTools
• Lighthouse
• WebPageTest

Getting to “Good”: five steps to improve your FID score

To learn how to improve FID for a specific site, you can run a Lighthouse performance audit and pay attention to any specific opportunities the audit suggests.

If you don’t have a deep love for JavaScript and the way browsers work, this is a great time to get your developer involved! 

1. Minimize/defer JavaScript
2. Break up long tasks
3. Use a web worker
4. Implement a browser cache
5. Remove non-critical third-party scripts

Dig deeper on FID:

• Google Web.Dev: Optimize First Input Delay
• Google Web.Dev: Minimize main thread work
• Google Web.Dev: Reduce JavaScript execution time
• NitroPack: First Input Delay (FID): What It Is & How to Optimize It
• Onely: What is First Input Delay (FID), And How To Optimize It?