What is FID? First Input Delay First Input Delay (FID)

We all know how important it is to make a good first impression. This is not only important when meeting new people, but also when shaping experiences online.

On the Internet, a good first impression can determine whether people become loyal users or never look back. The question is, what kind of experience leaves a good impression, and how do you measure the impression you make on your users?

On the web, first impressions can take many different forms. We form first impressions of a website's design and visual appeal, but also of its speed and responsiveness.

While it's difficult to measure how much users like a website's design through web APIs, web APIs make it easy to measure website speed and responsiveness!

A user’s first impression of your website’s loading speed can be achieved byFirst Contentful Paint First Content Paint (FCP)Take measurements. However, how quickly your website draws pixels on the screen is only part of the story, equally important is how responsive your website is when users try to interact with those pixels!

First input delay () metrics help measure your users' first impression of your site's interactivity and responsiveness.

What is FID?

FID measures the time it passes from the first time a user interacts with a page (such as when they click a link, tap a button, or use a custom control powered by JavaScript) until the browser responds to the interaction and can actually start processing event handlers. time.

什么是 FID?

What constitutes a good FID score?

In order to provide a good user experience, websites should strive to set the first input delay to100 millisecondsor below. To ensure that you hit the recommended target value during the majority of user visits, a good measurement threshold is the page load75th percentile, and this threshold applies to both mobile and desktop devices.

FID details

As developers writing event response code, we often assume that the code will run immediately when an event occurs. But as users, we all often face the opposite situation, when we load a web page on our phone and try to interact with it, then get frustrated because nothing happens.

Generally speaking, input lag (also known as input lag) occurs because the browser's main thread is busy performing other work and therefore cannot respond to the user (yet). One common reason why this might happen is that the browser is busy parsing and executing a large JavaScript file loaded by your application. During this process, the browser cannot run any event listeners because the JavaScript being loaded may cause the browser to perform other work.

Consider this typical page load timeline:

什么是FID?First Input Delay 首次输入延迟 (FID)

The visualization above shows a page that is making several network requests to obtain resources (mostly CSS and JS files). After these resources are downloaded, they are processed on the main thread.

This causes the main thread to be busy in stages (shown as beige in the figure)Taskpiece).

Long first input lag usually occurs whenFirst Content Paint (FCP)andTime to Interactive Time to Interactive (TTI)in between, because during this period, part of the page has been rendered, but interactivity is not yet reliable. To illustrate why this happens, we include FCP and TTI in the timeline:

什么是FID?First Input Delay 首次输入延迟 (FID)

You may have noticed that there is quite a bit of time between FCP and TTI (including threelong task), if the user attempts to interact with the page during this time (such as clicking a link), there will be a delay from when the click is received by the browser until the main thread is able to respond.

See what happens if the user tries to interact with the page right at the beginning of the longest task:

什么是FID?First Input Delay 首次输入延迟 (FID)

Because input occurs while the browser is running a task, the browser must wait until the task is completed before it can respond to the input. The amount of time the browser has to wait is the FID value that the user experiences on the page.

In this example, the user interacted with the page just when the main thread was entering its busiest period. If the user interacts with the page a little early (during idle periods), the browser responds immediately. This difference in input latency emphasizes the importance of looking at the distribution of FID values when reporting metrics. You can learn more about this by reading the section on FID data analysis and reporting below.

What if the interaction doesn't have an event listener?

The FID measures the difference between the time an input event is received and the next time the main thread is idle. This means that the FID will be measured even when no event listener has been registered. This is because many user interactions do not require event listeners to perform, butmustThe main thread needs to be in an idle period.

For example, all of the following HTML elements need to wait for ongoing tasks on the main thread to finish running before responding to user interaction:

  • Text fields, checkboxes and radio buttons (input, textarea)
  • drop-down selection list (select)
  • link(a)

Why is only the first entry considered?

While any input lag can lead to a poor user experience, we primarily recommend measuring first input lag for the following reasons:

  • First input latency is a user's first impression of your site's responsiveness, and that first impression is critical in shaping our overall impression of site quality and reliability.
  • The biggest interactivity issues we see on the web today occur during page loading. Therefore, we believe that focusing first on improving the first user interaction with a website will have the greatest impact on improving the overall interactivity of the web.
  • The solutions we recommend for sites with high first-time input lag (code splitting, reducing JavaScript preloading, etc.) are not necessarily the same as those for slow post-load input lag. By separating these metrics, we will be able to provide web developers with more precise performance guidance.

Which ones count as first entries?

FID is a metric that measures responsiveness during page load. Therefore, FID only focuses on input events corresponding to discrete operations, such as clicks, taps, and key presses.

Other interactions, such as scrolling and zooming, are sequential operations with completely different performance constraints (and browsers are often able to hide latency by performing these operations on separate threads).

In other words, FID focuses onRAIL performance modelR (Responsiveness) in R (Responsiveness), while scrolling and zooming are more related to A (Animation), so the performance quality of these operations should be evaluated separately.

What if the user never interacts with your website?

Not all users will interact every time they visit your website. And not all interactions are FID related (as mentioned in the previous section). Additionally, some users' first interactions will occur during an unfavorable time period (when the main thread is busy for a long time), while other users' first interactions will occur during a favorable time period (when the main thread is completely idle).

This means that some users will have no FID value, some users will have a low FID value, and some users may have a high FID value.

How you track, report, and analyze FID may be very different from other metrics you're used to. The next section explains the corresponding best practices.

Why only consider input latency?

As mentioned above, FID only measures "latency" in event processing. FID neither measures the time spent handling the event itself, nor the time it takes the browser to update the user interface after running the event handler.

Although these times are very important to users, they are alsoreallywill affect the user experience, but these times are not included in this metric because such an approach may incentivize developers to add workarounds and thus make the experience worse. What this means is that developers can The handler logic is encapsulated in an asynchronous callback (via setTimeout() or requestAnimationFrame()), thereby separating the logic from the task associated with the event. The end result is improved metric scores, but slower user-perceived responsiveness.

However, although FID only measures the "latency" part of event latency, developers who want more tracking of the event life cycle can useEvent Timing APIto realize this idea. For more details, seeCustom indicatorsrelevant guidance.

How to measure FID

FID is a function that can only beactualMetric that is measured because this metric requires real users to interact with your page. You can use the following tools to measure FID.

Measurement tools

Measuring FID in JavaScript

To measure FID in JavaScript you can useEvent Timing API. The following example shows how to create aPerformanceObserverto listenfirst-inputentry and logged in the console:

new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
const delay = entry.processingStart - entry.startTime;
console.log('FID candidate:', delay, entry);
}
}).observe({type: 'first-input', buffered: true});

In the example above, the latency value for the first-input entry is measured by taking the difference between the entry's startTime and processingStart timestamps. In most cases, this difference is the FID value; however, not all first-input entries can be used to measure FID.

The following sections list the differences between what the API reports and how metrics are calculated.

Difference between Metrics and API

  • The API distributes first-input entries for pages loaded in background tabs, but these pages should be ignored when calculating the FID.
  • The API will also dispatch first-input entries if the page moves to the background before the first input occurs, but these pages should still be ignored when calculating the FID (the input is only considered if the page is always in the foreground).
  • When the page passesround trip cacheOn recovery, the API will not report first-input entries, but the FID should be measured in these cases since this is a multiple different page visit experience for the user.
  • Inputs within iframes are not reported by the API, but to correctly measure FID, you should consider these inputs. Child frames can use an API to report the first-input entries of these inputs to the parent frame for aggregation.

Instead of having to remember all these nuances, developers can useweb-vitals JavaScript libraryTo measure FCP, the library handles these differences itself (where possible):

import {getFID} from 'web-vitals';
// Measure and log as soon as the FID becomes available.
getFID(console.log);

You can refer to the source code of getFID for a complete example of how to measure FID in JavaScript.

Analyze and report FID data

Because of the expected variation in FID values, it is critical that you look at the distribution of values and focus on the higher percentiles when reporting FIDs.

Although all core web metric thresholdspreferred percentileis the 75th percentile, but specific to FID, we still strongly recommend that you set the threshold at the 95-99th percentile, as these percentiles correspond to particularly bad experiences users have on your site first experience, so you can learn where you need the most improvement.

You should do this even if you segment your report by device category or type. For example, if you report on desktop and mobile separately, the desktop FID value you should focus on most would be the 95th-99th percentile of desktop users, and the mobile FID value you should focus on most Should be the 95th-99th percentile of mobile users.

How to improve FID

To learn how to improve FCP for a specific site, you can run a Lighthouse performance audit and keep an eye out for any specific changes the audit recommends.Chance.

Although FID is a real indicator (and Lighthouse is a laboratory indicator tool), the guidance and improvement of FIDTotal blocking time (TBT)This laboratory indicator guides in the same direction.

For more information on how to improve FID, seeOptimize FID. For further guidance on other individual performance tips that can improve FID, see:

score

Leave a Reply

Your email address will not be published. Required fields are marked *