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)?
- Why Does First Input Delay Matter?
- What Causes First Input Delay?
- How Do You Reduce First Input Delay?
What Is First Input Delay (FID)?
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?
- 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?
- Find Long Tasks and break them up into smaller chunks.
- Adopt lazy loading for third-party elements such as ads located below the fold.
- 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:
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.
Screenshots by author / September 2021
Web Performance Recipes / February 2021
web.dev / June 2021