Skip to main content

First Input Delay

Core web vitals frontend
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

What Is First Input Delay?

First Input Delay (FID) is the metric that calculates the time it takes for the browser to respond to the first client request. It’s measured in milliseconds.

To be more explicit, FID is the time between when the content is painted (FCP) and when the site is ready to execute and process the event handlers. This delay can vary from site to site depending on how much JavaScript needs to be downloaded and executed, the size of the images, the custom fonts, etc. The higher the FID is, the more frustrating it is for the user.

Why Is FID Important?

If left unchecked, FID can have dire consequences for the performance of your website. It can cause uncomfortable long wait times for your users that will undoubtedly lead to lost users, lost revenue, and a bad user experience.

First Input Delay is also important when it comes to search engine optimizations (SEO). As part of Google’s Core Web Vitals, FID is a core metric that directly feeds into the ranking algorithm used to display sites in the search results. Having a bad FID will not only hurt your users but also prevent new users from finding your websites via search engines.

What Is a Good First Input Delay Score?

A good First Input Delay time would be below 100 milliseconds, while the average FID is between 100 to 300 milliseconds and a bad FID is anything over 300 ms. The difference between 100 and 300 milliseconds may seem barely noticeable. However, these add up really fast on a modern website and can cause an extremely unpleasant experience for your users.

Images: web.dev

Max-Potential First Input Delay

Max-Potential FID represents the worst possible outcome for FID that your users might get to experience. The Max Potential FID is calculated by the duration of the longest-running task after the First Contentful Paint.

What Causes First Input Delay?

The main culprit for long FID is JavaScript. Whenever the browser runs into heavy Javascript, executing it makes the main thread busy. That means that the browser has to take longer to respond to the user.

How to Measure First Input Delay?

You can check your First Input Delay via the Chrome User Experience Report or the PageSpeed Insights. You can check the FID by clicking a link or a button and remember that scrolling and hovering on elements does not count as interaction with your page.

How to Optimize First Input Delay?

Lowering your First Input Delay should really be at the top of your priorities since it will help optimize website performance and improve search engine rankings and visibility.

Break Up Long Tasks

Long tasks are scripts that keep the main thread busy for more than 50ms. You can see them by quickly looking in your Chrome browser while having your Dev Tools open.

The new Long Task UI

Image:https://developer.chrome.com/

Once you’ve identified them you can try to remove them if possible but if that’s not going to happen, you can try to split them up in order to reduce FID time.

Optimize JavaScript

More often than not, fixing the First Input Delay means optimizing the JavaScript running the website.

Any line of code that you load on your website will affect your FID, so making sure it’s optimized should be a priority. If your browser is busy loading or executing something and comes across a JavaScript file, it will pause everything and load this file first. Having multiple JavaScript files loading will cause your FID to take a hit.

You also should minify your JavaScript code and CSS while you’re doing it. Minified code takes less time to download, thus keeping the main thread busy for shorter amounts of time. At the same time, you’ll want to remove unused code and only keep the code you are using on the page you are loading

If Javascript is still taking too much of the main thread, you could defer the execution of your code until after the main content is loaded and the users start interacting with the website.

Compress Text Files

Besides minifying files, there’s an equally important step that you might want to consider before moving on: file compression. The way it works is by compressing files on your server that take less time to download and can easily be unpacked by the browser.

The most common formats are Gzip and Brotli and for most third party content management platforms like WordPress or Magento, there are dedicated plugins that you can use to enable compression with one click.

Monitoring First Input Delay with Sematext

Sematext offers two extremely useful solutions for measuring website performance metrics, including Core Web Vitals. Sematext Synthetics is a synthetic monitoring tool that runs simulated transactions on your endpoints from different locations across the world at predefined intervals that can be as often as 1 minute. The other solution is called Sematext Experience and it’s a real user monitoring tool that allows you to track the actual experience of each user.

Together, they make well-rounded website monitoring software that lets you understand how your website is performing on any device, connection, or location while having the option to proactively look for any possible issues, mitigating the time to resolve by discovering issues before your users see them.

Start free trial


See Also

Stay up to date

Get tips, how-tos, and news about Elastic / ELK Stack, Observability, Solr, and Sematext Cloud news and updates.

Sematext Newsletter
Create Status Page with Synthetics! Learn more