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. For more information on Core Web Vitals, check out this short video:
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.
However, there are many other options available. Read this review of the top Web Core Vitals monitoring tools to learn more.
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.
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.
Frequently Asked Questions
How is FID different from other performance metrics like Page Load Time or Time to First Byte?
Page Load Time and Time to First Byte focus on different aspects of web performance, such as how quickly a page loads or when the first byte of data is received from the server. FID specifically measures user interactivity, emphasizing the time it takes for the page to respond to user input.
What factors can contribute to a high FID?
High FID can be caused by various factors, including heavy JavaScript execution, long tasks that block the main thread, and delays in processing user input. Issues with server response times and network latency can also impact FID.
Can FID be measured for mobile devices?
Yes, FID can be measured for both desktop and mobile devices. Given the increasing use of mobile devices for browsing, optimizing FID for mobile users is crucial for providing a positive user experience.
Does FID consider user interactions on all devices and browsers?
FID is influenced by various factors, including the user’s device, browser, and network conditions. It is important to consider a diverse range of devices and browsers when assessing FID to ensure a good user experience for all users.
