First Input Delay is one of Core Web Vital metrics that measures total time it takes for a browser to respond to a user’s first interaction
You click on a link and keep waiting for the browser to take you to the next page…
Pretty annoying, isn’t it?
That’s the reason Google introduced First Input Delay (FID) as a part of Core Web Vitals; a metric that helps webmasters address the feeling of clunkiness their users may experience while the page is loading.
Improving FID score will not only enhance user experience but also positively impact other aspects of your site’s performance.
In this blog post, we’ll cover all that and more. But before we get started, let’s understand what First Input Delay is.
Also read:
What are Core Web Vitals? How to Improve Them?
What is the First Input Delay?
First Input Delay is one of the Core Web Vital metrics that measures the amount of time it takes for a browser to respond to a user’s first interaction with a page. This interaction could be in the form of clicking a link, tapping on a button, or interacting with other elements on the page.
Some other examples of interaction could be clicking on checkboxes, dropdowns, or downloading a guide.
Basically, First Input Delay measures interactivity; the time a website takes to respond after the visitor interacts. Google uses FID as an important ranking factor. The goal of FID is to calculate how responsive a website is while it’s in loading.
1. FID is not same as ‘Time to Interactive’
Keep in mind that FID is not the same as time to interactive; a performance metric that has been around for a long time. Time to Interactive calculates the total time it takes for a page to become fully interactive.
However, FID tracks user action that happens even before the page is fully interactive. Hence, First Input Delay allows the browser to capture those critical, early interactions.
2. FID measures input Delay, not the event processing time:
FID stands for First Input ‘Delay.’ This means that this metric tells the webmaster about the delay in processing user requests. It doesn’t calculate the whole event processing time because it is easy for developers to get a good FID score by separating the event handler from tasks associated with the event.
3. First Input Delay only measures the first interaction:
FID only calculates first impressions; the first time a user interacts with a web page. Since most of the blocking of browser’s main thread occurs in the initial moment’s of a page loading cycle, all the critical elements must load fast.
FID helps webmasters address delayed initial response and ensures that loading critical resources doesn’t make their site irresponsive or clunky.
4. Continuous actions do not count as interactions:
Keep in mind that continuous types of actions such as scrolling, reading, or zooming in the page does not count as interactions because these actions don’t run on the browser’s main thread, and they often have different constraints.
A website’s FID needs to be less than 100 milliseconds for it to provide a good user experience.
If you need to optimize FID for your website, decrease JavaScript execution time, improve the interaction readiness of your website, break up long tasks, and use web workers.
What is the cause of First Input Delay?
Usually, First Input Delay is caused by images, videos, or scripts that load in a non-orderly manner. An unorganized loading causes the web page to load, pause, re-load, and then pause. This results in an unresponsive behavior towards a user’s first interactions.
In Google’s words, the cause of input latency is:
“In general, input delay (a.k.a. input latency) happens because the browser’s main thread is busy doing something else, so it can’t (yet) respond to the user.
One common reason this might happen is the browser is busy parsing and executing a large JavaScript file loaded by your app.
While it’s doing that, it can’t run any event listeners because the JavaScript it’s loading might tell it to do something else.”
~Google
Hence, FID is mainly impacted by Javascript execution. Interactivity is lower when Javascript execution takes longer time.
Other factors that may result in poor FID score:
- Having too many plugins: If you’ve too many plugins on your site (especially JavaScript based plugins), there’s a chance they’ll affect your FID score. Therefore, webmasters should avoid any unnecessary JavaScript execution and remove unnecessary plugins.
- Heavy WordPress themes: Since heavy wordpress themes have complex layouts, more JS files, and inefficient style, they can also impact FID performance.
What is a good FID score?
Core Web Vitals scores can be divided into three categories: Good, Needs Improvement, and Poor.
Good: A website’s FID needs to be less than 100 milliseconds for it to provide a good user experience.
Needs Improvement: The site requires improvement is the FID is between 100 to 300 milliseconds
Poor: If the FID is beyond 300 milliseconds, it is a poor score and needs a lot of improvement.
How to measure the First Input Delay?
Since First Input Delay is a field metric, it can be measures by following tools:
- PageSpeed Insights (Field Data)
- Search Console – Core Web Vitals report.
- Chrome User Experience Report (CrUX)
Webmasters can measure total blocking time and proxy metrics on:
How to reduce First Input Delay?
To improve FID, you should begin by testing your site through above mentioned tools. Webmasters can also run a lighthouse performance audit to find specific opportunities for improvement.
Here are few key steps you can take to improve first input delay score:
- Reduce JavaScript execution time
To reduce Javascript execution time, webmasters should defer the Javascript file. By doing this, the render-blocking resources will load only once the browser renders critical contents – the elements needed to let users interact with the page.
Here’s an example of the defer attribute:
<script defer src=”/example-js-script”></script> - Remove Unused JavaScript
Publishers can also tackle the FID issue by optimizing their page for interaction readiness. This can be done by removing unused JavaScript; files that may lead to slow downloading time.
For this, publishers can use plugins such Assets Cleanup to load the JavaScript file only when required. They can also delta the JavaScript file so they don’t load until the first user interaction. - Minify JavaScript
Another highly effective way of improving FID score is the minification of JavaScript files. By Minifying the JS files, publishers can remove any line breaks, comments, white space, and other elements that makes the file smaller and also helps render faster.
Conclusion
Moving forward, we’ll see more and more FID-friendly themes, plugins, and CMS. But until that happens, publishers should take the above-mentioned steps to improve First Input Delay score.
FAQs
When a user first interacts with your site (i.e. clicks a link, taps on a button, or uses a JavaScript-powered control), the first input delay measures how long it takes for the browser to respond.
Sites should strive for a First Input Delay of 100 milliseconds or less to provide a good user experience. A good threshold to measure for most of your users is the 75th percentile of mobile and desktop page loads.
In simple terms, FID is caused by interaction with a web page. FID cannot be measured if there is no interaction on the web page. FID can’t be measured on every page of a website because of this.
Shubham is a digital marketer with rich experience working in the advertisement technology industry. He has vast experience in the programmatic industry, driving business strategy and scaling functions including but not limited to growth and marketing, Operations, process optimization, and Sales.
