Performance

What Is First Input Delay

What Is First Input Delay?

First Input Delay is a web performance metric that measures how long after a user does something on a page before the page responds to that action.

The user may click a link, type a key, initiate a scroll, or interact in any other way, but they expect the page to immediately do the action requested. The slower the page responds the more likely the user is to give up and leave the site.

This article will explain how to measure FID, why you should care about it, and most importantly how to fix it.

What Does FID Measure?

First Input Delay (or FID) is the amount of time that elapses after a user’s first interaction before the page takes the requested action. This can otherwise be known as Input Latency. 

This interaction could be as simple as pressing a key, hitting a button, or a hyperlink. FID also measures dropdown menus, text input boxes, and check boxes. 

However, actions such as zooming and scrolling are not measured by FID as the webpage is not responsible for this. 

First Input Delay is similar to Total Blocking Time in that both measure how long a page is ‘busy’ and can’t respond to the user.

Why Should You Care About FID?

FID is an important factor in user experience because it affects the perceived speed of your website, as well as how fast users can navigate through your site. If the site interaction is slow, it leads to user frustration and that will negatively impact conversions.

First Input Delay is particularly important because it’s the first interaction the user has with the site, providing a basis for the user’s judgment of the site quality. This perception is directly tied to how long the user will stay on your site.

Long FID will make the site seem to users as if it’s broken, even if that’s not the case.

Common Causes Of Input Latency

Time We Spend On Websites

The most common issues with FID arise from downloadable images and scripts that are not optimized on your page. Nine times out of 10, you can improve your FID score by ordering your coding to keep it running smoothly, rather than stopping and starting over and over again. 

If a site is trying to work its way through disorganized coding, it might be too busy to recognize the visitor interacting with the page. This can lead it to appear unresponsive. 

Imagine you’re incredibly busy attempting to finish a difficult task in as short a time as possible, and someone comes up to you trying to get you to do something else.

You’re going to become slower, and you might try and ignore the other person. This is exactly how First Input Delay is caused.

How To Measure FID

Most web vitals can only be measured in the lab using a tool like Lighthouse, meaning the results only approximate those of real users. First Input Delay, however, can – and therefore, should – be measured in the field

Measuring in the field means recording the FID times when real users interact with your site.

There are many ways to measure FID but the two main ones are:

When working on improving FID, you’ll want to use Lighthouse as it will show the cause of the delay: what was blocking the main thread at a given time.

How Long Is Too Long For A User To Interact With Your Content?

Any time over 100 milliseconds is too long. Google claims that up to 300 milliseconds is acceptable but needs improvement and anything above that is ‘poor’. This may not seem like much time but it’s noticeable by users.

First Input Delay affects everyone differently. Some users are very sensitive to delays, whereas others aren’t bothered by them at all.

Some users will tolerate more delay than others, so it’s better to be on the safe side and ensure all pages respond quickly. After all, why should someone wait for your page to load properly when there are thousands of other search engine results waiting for them to click on?

What Is The Max Potential First Input Delay?

The max potential FID is the maximum amount of time a user could wait before the page responds.

The actual time depends upon when the user tries to interact with the page. If the main thread happens to be busy when the user does something then the FID will be longer. Two users can – and do – get very different FID times on the same page.

Because the times vary, we want to fix the maximum potential FID. By decreasing the worst possible time a user could interact with the page, we ensure that the overall average is less.

Once again, we recommend using tools like Search Console and Google Analytics to get an accurate picture of your website’s performance.

So, How Do I Reduce My Website’s First Input Delay?

Speed Of A Webpage

The reason a site’s First Input Delay is high is the page is busy with other tasks and can’t do what the user requests.

The browser always tries to do as much as it can, as quickly as it can. All performance problems with a page – including slow FID – are because the browser’s main thread is busy doing other tasks. To fix this, your page has to tell the browser to do less.

The root cause of FID is disorganized code, so the first thing you should do is check the scripts and images to create a new order for them thoughtfully. Think of it like you’re presenting all of the downloadable content to the browser, completely organized and tied in a neat bow. 

You’ll often see that FID fixes use HTML attributes to better control how the scripts and images are downloaded. Images must be optimized, and you should leave out any unnecessary components. 

Here are some great tips on how to minimize Input Latency: 

  • Limit page resources like CSS and especially Javascript.
  • Don’t use Javascript for animation or any other constant action. Only use JS to respond to user interaction, never to ‘draw’ the page.
  • Correctly size and load images. Make sure that below-the-fold images are lazy loaded so that the browser doesn’t spend time rendering images that aren’t yet visible.

Doing the above is difficult so sometimes it makes sense to first fix easier metrics like Largest Contentful Paint and First Contentful Paint. These metrics will more easily improve your overall page score, and the fixes can implicitly improve FID.

Conclusion

Reducing your website’s first input delay is essential to improving its ranking in search engine results.

With Google’s core web vitals becoming essential to content publishers, we should expect to see software developers taking this more seriously and creating better-optimized code, including themes, CMS, and plugins. 

However, it is still down to you until this change happens. Optimize your code as much as possible by removing any unnecessary Javascript, correctly load images (and check they are the correct size), and ensure that you’re only loading things above the fold first. 

You can keep track of your website’s FID by comparing it to your competitors’ FID times. Constantly monitor your own FID with Google’s Search Console or Analytics.

Frequently Asked Question

What Is The First Input Delay In SEO?

SEO is about getting people to visit your website.

Google publicly announced that page experience is a ranking factor for search results, and FID is one of the three core web vitals that Google uses to calculate page experience.

The better your FID is, along with the other two core web vitals for your page, the better it will perform in the SERPs.

Google is only interested in showing its users high-quality content that provides them with a pleasant experience, which is why optimizing your core vitals is so important.

Ever wonder why the first results on Google instantly load without any delays? That’s because Google is very careful when deciding which pages deserve those top spots.

If you want to excel in SEO and get your content to the first page of Google, you need to optimize your FID. 

How Can We Calculate First Input Delay?

Calculating FID is easy, Google already does it for you.

Go to your Search Console and your real FID time is under “Core Web Vitals”.

What Is A Good First Input Delay?

100 milliseconds or less. Less than a 1/10th of a second ensures that users perceive the page as responding immediately.

Why Does It Matter That Our Site Loads Fast?

Page experience is closely tied to conversions. The slower the site loads the more likely the user is to leave.

Subscribe for Email Updates

Everything an ambitious digital creator needs to know.