Your Ultimate Guide to First Input Delay (FID)

User experience matters, and Google’s new page experience update has made this a critical optimization point to get right.

First Input Delay (FID) is an integral part of both the page experience update and your site’s user experience as a whole. But what exactly is it, why does it matter so much, and how can you minimize your site’s FID? Our guide can tell you everything you need to know.

What Is First Input Delay (FID)?

From Google’s sudden title tag changes to the release of Baidu’s ERNIE 3.0 AI model, the last year has seen more than its fair share of SEO news.

But one of the most significant developments by far has been the release of Google’s long-anticipated page experience update. It first began rolling out globally in June 2021, and by the end of August, was fully released. The update considers a number of different factors, with one of the most prominent being Core Web Vitals. This is a set of three separate signals that help quantify the user experience.

Those three signals include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS):

Here we’ll be zeroing in on First Input Delay, which measures a page’s interactivity. This is defined by the amount of time that passes between a user first trying to interact with the page (such as by clicking a drop-down menu) and the page actually responding (such as by opening the drop-down menu).

Web Performance Recipes has provided a graphic that makes this concept easy to understand:

Want a more technical look at FID? Google’s own diagram shows exactly how it plays into a web page load:

So what is a good First Input Delay? According to Google, an FID of 100 milliseconds or less is ideal, one of 100–300 milliseconds is acceptable but needs work, and one of 300 milliseconds or more is subpar and should be promptly fixed.

Why Does First Input Delay Matter?

Upon first glance, it may seem like First Input Delay matters simply because Google says it does. After all, it hasn’t affected rankings until recently, and the term itself didn’t exist until Google coined it.

But in reality, First Input Delay is simply a new name for an old concept: responsiveness to user interaction. And more importantly, it’s part of Google’s ongoing push to create a more user-centric web.

To understand how First Input Delay affects the user experience, let’s look at things from a user’s perspective. For example, suppose you go to the website of a clothing store. You’re looking to purchase a pair of jeans, so you click a tab labeled denim. The page is supposed to react by opening a drop-down menu of various subcategories, but there’s a noticeable delay before it does so.

While that delay may be brief, it invariably creates a first impression of lagginess and unresponsiveness.

That’s why First Input Delay really matters—not just because Google’s update says so, but because it genuinely impacts visitors’ perception of your site. And when you reduce your site’s FID, you also improve its user experience.

What Causes First Input Delay?

If your site is experiencing a First Input Delay of more than 100 milliseconds, then chances are it’s being caused by unoptimized JavaScript.

It’s easy to see why when you consider what JavaScript is used for. While HTML and CSS control how a page is organized and styled, JavaScript is responsible for the elements users can interact with.

For instance, JavaScript can be used to create interactive buttons, forms, carousels, menus, and many of the other features that make modern web pages function. A prime example can be found right here on iloveseo.com in the form of our drop-down menus:

But if a page’s JavaScript is overused, poorly written, or unoptimized for speed and efficiency, then it can increase First Input Delay and harm the user experience.

Specific scenarios where JavaScript can negatively affect FID include:

Heavy first-party JavaScript execution such as bloated code, large script executions, and inefficient chunking.
Excessive data fetching such as that which is associated with cascading data fetches and hefty inline datastores.
Third-party script execution such as tags and analytics.

How Do You Reduce First Input Delay?

Given that JavaScript is often the cause of high First Input Delay, it comes as no surprise that some of the best ways to reduce FID involve JavaScript too:

Find Long Tasks and break them up into smaller chunks.
Implement progressive loading, which postpones the loading of non-essential JavaScript, HTML, and CSS files until the most crucial elements to user interaction are loaded.
Adopt lazy loading for third-party elements such as ads located below the fold.
Identify unused JavaScript and reduce it by code-splitting it into bite-sized pieces and/or using the async and defer attributes.
Use a web worker to run JavaScript on a background thread.
Cut down on unused polyfills to reduce overall code bloat.
Minimize cascading data fetches to free up resources.
Minimize the amount of inline data that needs to be processed client-side.

To see how your efforts are paying off, you can start by gathering lab data (i.e., data gathered from automated tests) in Google’s Lighthouse tool.

There, you’ll see a metric called Max Potential First Input Delay:

While reducing this metric is certainly beneficial, it’s also a good idea to gather field data (i.e., from real users) in order to get a more realistic sense of your site’s FID.

You can do so by using Google’s web-vitals library:

You can quickly install the library either from npm, a JavaScript package manager, or your content delivery network (CDN). The data you get from this library will provide valuable insights into how your site’s visitors truly experience its First Input Delay.

Fortunately, improving your site’s FID doesn’t require that you completely rewrite its JavaScript from the ground up. Instead, you can simply use the above techniques to pinpoint your site’s problem areas while leaving the rest of its code as-is.

Reduce First Input Delay to Increase User Satisfaction

No matter which tactics you choose to employ first, your efforts to reduce your site’s First Input Delay won’t just result in a better Lighthouse report.

They can also help you achieve better rankings, offer a stellar user experience, and remain as competitive as possible for years to come.

Image credits

Screenshots by author / September 2021
Web Performance Recipes / February 2021
web.dev / June 2021