FID: what is it & why does it matter?
August 10, 2021
written by
Chantel Keith
what is FID?
FID stands for First Input Delay and is defined by Google as “an important, user-centric metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with unresponsive pages—a low FID helps ensure that the page is usable.”
When you first arrive at a website and click on a link or button to navigate to the desired page, your expectation is that the website will immediately respond and redirect you to the next page. However, poorly optimized websites might result in nothing actually happening when a link is clicked. This is called input delay or input latency and the longer the delay, the worse a website’s FID score will be. Fortunately, there are ways to improve FID which we’ll review in this article.
why does a good FID score matter?
FID is one of Google’s three Core Web Vitals, along with CLS (Cumulative Layout Shift) and LCP (Largest Contentful Paint). In June of 2021, Google began factoring page experience into their ranking algorithm and docking web pages with FID scores that are too high. In order to address high FID scores, we’ll need to understand how it’s quantified in order to improve it.
FID focuses on how responsive a web page’s first interaction is. This metric measures the amount of time it takes for a user’s first interaction to update in their browser. These user interactions can be link clicks, button taps, or any Javascript-powered control such as input, select and text area fields.
A good FID score has a delay of 100ms or less, which most users perceive as instantaneous. A score of 100ms to 300ms needs improvement, and anything over 300ms is considered poor.
This metric is unique in that its performance cannot be simulated and it requires real-world field data to be measured. Google collects field data over a span of 28-days and updates each website’s page speed score accordingly.
how to improve a website’s FID score
Javascript
The most common cause of a poor FID score is Javascript. Long Javascript tasks can block the browser’s main thread for extended periods of the time, preventing user input from being processed. By breaking these tasks up into smaller tasks, ideally reducing their execution time to 50ms or less, this will allow user input to be processed in between each task. Deferring or removing unused Javascript, minimizing unused polyfills, and/or processing Javascript asynchronously will ensure it’s only executed when necessary.
You may also want to review any third-party code on your website, such as analytics or marketing tags, to ensure they are not unnecessarily blocking the browsers main thread. Although analytic snippets may need to be executed as soon as the page loads in order to properly track the user, it may be worthwhile to deprioritize the loading of other tags which are of lesser importance to your users.
Lastly, utilizing web workers to take some strain off the main thread and generating as much content as you can on the server-side will also help to improve FID scores.
CSS
Optimizing CSS can help the browser download and parse the files as soon as possible. This will ensure the page layout is quickly rendered, allowing the user to interact with it. Many of the common CSS optimization techniques can help achieve faster rendering, such as minifying CSS files, inlining critical CSS, and removing unused CSS.
Before tackling improvements to your FID score, you may find addressing delays with the First Contentful Paint and Time to Interactive metrics as long input delays typically occur between these two timelines. Feel free to reach out if you’d like assistance with an audit of your website or need help getting Core Web Vitals in shape to boost your website’s ranking.