We continue our journey towards the start of the Google Page Experience, which next May will introduce a series of new ranking factors on Google, starting with the Core Web Vitals, the three Essential Web Signals that represent the basic metrics that define a user’s experience on our pages. Today we focus on one of these aspects, namely the First Input Delay, the element that measures the interactivity of the page: here what it is and how to optimize this parameter.

What is the First Input Delay (FID)

First Input Delay (FID) is a user-centric metric that measures the responsiveness of loading and quantifies the experience users experience when attempting to interact with pages that do not respond.

As both the Google guide and the web.dev’s insights explain, FID measures the time elapsed between a user’s first interaction with a page (click on a link, touch of a button, use of a custom Javascript-based control) and the moment when the browser actually responds to the interaction.

La rappresentazione del FID

It is the time, expressed in milliseconds, that elapses between the first interaction of the user on a web page and the response of the browser to such interaction, not including the scrolling and the zoom in such assessment.

If you want to use a similitude, the FID is like measuring the time between the time someone rings the bell and the answer to the door. There may be many reasons for the delay: for example, “maybe the person is away from the door or can not move quickly”. Similarly, web pages might be busy in other jobs or the user’s device might be slow.

Furthermore, it should be clarified that FID only measures “delay” in the processing of events and not the processing time of the event itself nor the time taken by the browser to update the user interface after running the event managers – factors that affect the user experience, but which, if included, may “incentivize developers to respond to events asynchronously, which would improve the metrics but probably make the experience worse”.

The interactivity metric

Simplifying, a low FID means that the page is more easily usable and the longer the delay, the worse the user experience.

The measurement of the first input delay is derived from any interactive element first clicked by a user and is an important value for pages where the user has to perform an action.

The time between the time the content is painted on the page and the time when all the features become responsive to human interaction often varies depending on the size and complexity of the Javascript code that needs to be downloaded, analyzed and executed on the main thread and on the speed of the device or its lack (for example, on low-end mobile devices), explain the developers of Mozilla.

Reducing site initialization time and eliminating long activities can help eliminate early input delays.

The importance of the first input delay

We can think of the First Input Delay as the “first impression” that the site provides users: it is true that – technically – the first impact of a visitor with the page is represented by the First Contentful Paint (FCP), but “Painting pixels on the screen is just a part of the story and just as important is how responsive your site is when users try to interact with those pixels,” says Philip Walton, engineer at Google.

On the Web, a good first impression can make the difference between a visitor who becomes a loyal user or who leaves and never returns, and soon will be an official metric to determine whether the site is creating good experiences, and in particular to measure the user’s first impression on the interactivity and reactivity of the site.

Working on the First Input Delay allows us to deal with the annoying feeling that users might feel while loading the page, and its optimization will also have a positive impact on various other aspects of web performance – as well as on placement options on Google, in the near future.

The score for a good First Input Delay

To provide a good user experience, sites should strive to have a first input delay of less than 100 milliseconds.

To make sure that you achieve this goal for most of our users, a good threshold to measure is the 75th percentile of page uploads, both from mobile devices and from desktops.

Explanations on FID

Walton’s long article also focuses on the reasons that prompted Google to prioritize First Input Delay as an essential web signal – in the wake of considerations already expressed in past months on this set of metrics.

The first interaction delay measures the delta between “when an input event is received and when the main thread is inactive“, and thus the FID is measured even in cases where an event listener has not been recorded, because “many user interactions do not need an event listener, but require the main thread to be inactive to run”.

As developers who write code that responds to events, says the Googler, “we often assume that our code will run immediately, as soon as the event occurs”. But as users, we’ve all often experienced the opposite: we’ve uploaded a Web page to our phone, tried to interact with it and then nothing happened, causing us a sense of frustration.

When the delay occurs

In general, the input delay (i.e., the input latency) occurs “because the browser’s main thread is engaged in something else, so it cannot (yet) respond to the user”. One common reason why this might happen is that your browser is engaged “in the analysis and execution of a large Javascript file uploaded by your app; while doing so, it cannot execute any event listener because the Javascript it is uploading could tell it to do something else”.

Sequenza temporale di un tipico caricamento di una pagina web

This image (from web.dev, like all the others on page) represents the time sequence of a typical loading of a web page: a page is carrying out a couple of network requests for resources (most likely CSS and JS files) and, upon completion of downloading such resources, they are processed on the main thread. This results in periods when the main thread is momentarily busy, which is indicated by beige activity blocks.

Ritardi con FCP e TTI

In general, there are long delays in the first input between First Contentful Paint (FCP) and Time to Interactive (TTI) “because the page has made part of its content but is not yet reliably interactive”, and this other illustration with the addition to the timeline of FCP and TTI shows it clearly. We see that “there is a fair amount of time (including three long activities) between FCP and TTI, and if a user tries to interact with the page during that period (for example, clicking on a link), there will be a delay between the click is received and when the main thread is able to respond”.

FID e interazione dell'utenteThis other image indicates what happens if a user tries to interact with the page near the beginning of the longest activity: since the input occurs while the browser is running an activity, he must wait for the task to be completed before being able to respond to the input.

The time you have to wait is the FID value for this user on this page.

Which are the first inputs and why we consider the first reaction

Being a metric that measures page responsiveness when loading, FID only focuses on input events from discrete actions such as clicks, touches, and keystrokes, while other interactions, such as scrolling and zooming, are “continuous actions and have completely different performance constraints” (and, in addition, browsers are often able to hide their latency by running them on a separate thread).

In more technical terms, “FID focuses on R (reactivity) in the RAIL performance model, while scrolling and zooming are more related to A (animation) and their performance qualities should be evaluated separately,” explains the Google engineer.

In fact, the delay of any input can lead to a bad user experience, but Google primarily recommends measuring the first input delay for a few reasons:

  • The FID will be the user’s first impression of the site’s responsiveness, and first impressions are critical in the shaping of our overall impression on the quality and reliability of a site.
  • IThe major interactivity problems that “we see today on the Web occur during page loading: therefore, we believe that initially focusing on improving the first user interaction of the site will have the greatest impact on improving the overall interactivity of the web”.
  • Recommended solutions on how sites should correct high delays of first input are not necessarily the same solutions to correct slow input delays after page loading, and separating these metrics “we will be able to provide more specific performance guidelines to web developers”.

In summary, not all interactions are relevant to FID; in addition, not all users will interact with the site each time they visit it and “the first interactions of some users will occur at difficult times (when the main thread is busy for a prolonged period of time) while those of other users will be at good times (when the main thread is completely inactive)”.

This means that some users will not have FID values, some users will have low FID values and some users will probably have high FID values, and for this reason it is important to learn how to monitor and analyze the first input delay with specific modes and tools.

How to measure First Input Delay

The FID is also a metric that can only be measured on the field – we already talked about how to measure Web Vitals – since it “requires a real user to interact with your page” and therefore cannot be measured in the laboratory.

In fact, the guide reveals, the metric of Total Blocking Time (TBT) “is measurable in the laboratory, correlates well with the FID in the field and also captures problems that affect interactivity”, and “Optimizations that improve TBT in the lab should also improve FID for your users”.

However, we can measure the FID with four tools:

  • Chrome User Experience Report
  • PageSpeed ​​Insights
  • Search Console (Core Web Vitals Report)
  • JavaScript web-vitals library

Due to the variance predicted in FID values, it is crucial that “in a FID report you look at the distribution of values and focus on the highest percentiles”.

Although the choice of the percentile for all key vital data thresholds is 75, in fact, for FID in particular Google “strongly recommend that you consider the 95 % and 99 % percentile, as they will correspond to the first particularly negative experiences that users have with your site and will show you the areas that need more improvement”.

How to improve First Input Delay

Among the various interventions that may allow us to reduce the delay time of the first interaction are:

  • Reducing the impact of third-party code.
  • The reduction of Javascript execution time.
  • Minimizing work on the main thread.
  • Minimizing the number of requests and reducing the transfer size.

Typically, the main cause of a poor FID is the heavy execution of Javascript, and thus the optimization of the way Javascript analyzes, compiles and runs on your web page will directly reduce the FID.

To optimize this aspect and reduce the occupation of the main thread (which prevents the browser from responding to user interactions) we can follow some best practices, such as:

  • Break long tasks into smaller, asynchronous tasks.
  • Optimize the page for the availability to interaction.
  • Use a web worker, which allows you to run Javascript on a background thread.
  • Reduce the running time of Javascript, sending unused Javascript back and minimizing unused polyfills.

Call to action