The Core Web Vitals update is around the corner. Google plans to roll out the update in full force from June 2021. As part of the update, the Core Web Vitals will become a page ranking signal. Core Web Vitals comprise of Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID).
All three metrics will report the user experience of a website. These will then go on to influence your website's ranking on Google. In this write-up, we'll focus on First Input Delay (FID) and understand how it affects your website's traffic, conversions, revenue, and profits.
Table of Contents
What is First Input Delay (FID)?
First Input Delay (FID) is another user-centric metric to determine the performance and interaction on a site. It measures visitors' first impressions when interacting with a website. It also alludes to the website's responsiveness. FID measures the time between when a user first interacts with a page to the time when the browser starts processing event handlers to respond to that interaction.
Event handlers (functions) are attributes of HTML tags which get assigned JavaScript code to execute. For every input or new event, the browser will alert the event handler. The delay in responding and executing an event after user input becomes the first input delay. FID reveals how a page behaves when users interact with it. A low FID score says that the page is more usable since the browser spends less time responding to a request.
A low score indicates better responsiveness. In essence, right after a webpage load, users can expect to interact with it sooner. The code on the backend will execute faster, resulting in a better response time. Thus, user's on the webpage are less likely to get frustrated. They would receive the desired response sooner.
How to Measure First Input Delay (FID)?
First Input Delay (FID) time only gets measured on the field. It would be best to have a real user interaction to determine a realistic FID score for a page. Unlike, Cumulative Layout Shift, First Input Delay (FID) cannot get measured using lab tools. Use the following field tools to get the FID value for your website:
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
You can also measure the FID value in JavaScript using an Event Timing API. Developers can use the web-vitals JavaScript library to measure FID. Measuring FID in JavaScript is a little more complex, than doing it with tools. Furthermore, in some cases you may not be able to measure FID, due to certain limitations.
What is a Good First Input Delay (FID) Score?
Anything under 100 ms falls under the good range. Thus, if your website's FID is less than 100 ms, it supports a better user experience. But, if it falls between 100 ms to 300 ms, then it needs improvement. If it exceeds 300 ms, then your website will render a dismal user experience. You will need to optimize several areas to improve the FID time.
The time reported is the delay in fetching a response to the user's input. The time it takes to run the task for that input isn't accounted in the FID time. Even if the FID time falls under 100 ms, the page may go through several bouts of delays. In essence, the page could still take a while to respond.
How Do Elements Behave When It Comes to First Input Delay (FID)?
First Input Delay (FID) occurs because the browser stays preoccupied somewhere else. It is busy processing other areas of the website. The browser's main thread could be busy handling something else. As such, it doesn't respond to a user's request or input. For instance, the browser may be parsing and executing a large JavaScript file.
Long First Input Delays happen between First Contentful Paint (FCP) and Time to Interactive (TTI). The reason being, the page renders some of the content but isn't interactive yet. During this period, if a user decides to interact, they'll witness a delay. The browser doesn't stop the task it's on.
Instead, the browser will wait to complete the task before it can respond to the user input. The user interacted with the page during a busy period. Had the user interacted during an idle state, the response time would've been more instantaneous. The browser would've responded right away.
If there is any task running, then the user would need to wait. The wait time would vary depending on how long it takes for the browser to complete the task. The delay time becomes the FID score for the user. FID only measures input delay and not the processing time. Furthermore, FID gets measured even for cases that didn't require an event listener. E.g., Dropdowns, text fields, checkboxes, and more.
What Actions Get Considered for First Input Delay (FID)?
Since FID measures a web page's responsiveness, it only focuses on input events from actions like clicks, keypresses, and taps. Any continuous actions, such as zooming and scrolling are not contributing to the final score.
These actions have other performance constraints, and their quality gets evaluated in other ways. According to the RAIL performance model, FID standards fall within R, which stands for responsiveness. Whereas scrolling and zooming fall within A, which stands for animation.
RAIL is a reference standard to understand a website's user experience for distinct interactions. RAILs user-focused standards hope to review how visitors perceive a site. The understanding helps to set several performance goals. These goals then help to stimulate a better user experience.
Does First Input Delay (FID) Value Vary for Different Users?
Not all users who visit the website interact with it. Some of the user behavior doesn't get factored into the FID calculation. As mentioned earlier, some may stick to scrolling and zooming. Whereas others may click a link, click a button, or take other actions. Thus, the FID score for every user cannot be the same.
It turns out that is indeed true. Some users will have no FID values. In contrast, some users will see low FID values, and others will get high FID values. The reason being, some users interact with the site during a busy state. In contrast, others interact with the webpage when the main thread is in an idle state.
How to Optimize First Input Delay (FID)?
Third-party Code
Third-party scripts will affect your page load performance and slow down your website. Owners embed these scripts on their websites. They use these scripts to embed social sharing buttons, video players, chat services, and more. The scripts get served from third-party servers.
Third-party scripts block the main thread and create delays. They block the browser's main thread for long and don't let it process user input. These scripts send several requests to many servers. They pull in unoptimized multimedia content and force several fetching of network resources.
Even though these scripts provide useful capabilities on your site, they affect page behavior and reduce page speeds. 3rd party scripts add to network overhead. Often, improper loading of such scripts can create delays on the page. These scripts are pivotal. Here's everything you can do to optimize them:
- Prefer third-party resources that send the least amount of code.
- Audit and clean out redundant scripts.
- Identify slow third-party scripts and load them more efficiently.
- Limit scripts for similar functionalities - Several analytics or tag managers.
JavaScript Execution Time
Reduce the time it takes for JavaScript to execute. If it takes longer, then the page performance can come down a lot. Implementing, evaluating, and parsing all the JavaScript files add to the time even more. Javascript files that consume a lot of memory slow down a page.
Clear the main thread; since Javascript gets parsed on the main thread, it needs to be free. This then delays your Time to Interactive (TTI). Unused, redundant JavaScript code will introduce further delays. Remove whitespace that is not necessary for the Javascript code to make it smaller.
- Use code splitting - only send the code that your users need. Minify and compress your code.
- Remove unused code
- Reduce network trips by the use of strategic caching.
Main Thread Tasks
The main thread will handle all the tasks on a page. It parses the HTML, parses the CSS, builds the DOM, applies the specified styles, and more. Thus, if the main thread gets overloaded with excessive work, it can't free time for other tasks. Avoid keeping the main thread busy for longer.
Identify the sources of main thread load. Investigate how your main thread does the page load. Use Lighthouse audit; it'll flag elements that cause a page to load far slower. Try some of the following tactics to shrink main thread tasks.
- CSS - Extract, minify and defer non-critical CSS.
- Use Web workers to reduce the load on the main thread and run the tasks on the worker thread.
- Input handlers - avoid style changes, and long-running input handlers. Debounce your scroll handlers.
- Avoid layout on pages, where possible. Avoid forced synchronous layouts. Use Chrome DevTools to see if layouts take too long.
- Defer JavaScript, so that it gets executed only when it’s needed.
- Simplify paint complexity and reduce the paint areas through layer promotion.
Request Counts
Reduce network requests and data transfer as much as possible, while loading the page. Too many network requests and a large transfer size affects the First Input Delay (FID) value. You may need to optimize your code and compress other elements on the page to enable a better FID score.
- Improve inefficient loading of fonts. Optimize web page font loading, reduce font size. Display text sooner. Avoid invisible text during font loading. Avoid the "flash of invisible text"
- Optimize the way you serve images on webpages. Check dimension, use Webp images, check compression levels, right formats and image CDNs.
- CSS and JavaScript files block the rendering of content on the page. If dealing with a slow server, these requests can take forever. Optimize JavaScript, CSS and 3rd Party scripts.
What Are the Benefits of Improving the First Input Delay (FID) Metric?
User Experience
If the user ends up waiting longer to receive a response, expect a decline in user experience. Longer wait times between input and its response trigger frustration and result in abandonment. Diminished UX is a red flag. In contrast, better UX leads to high retention and engagement.
SEO Ranking
Since First Input Delay (FID) is part of the Core Web Vitals update, expect it to affect your ranking on Google searches. A high FID time will send your website out of the first page and reduce the Click-Through Rates (CTR). This will affect the traffic to your site.
Conversions
The delayed response time will create a higher bounce rate. User's don't want to stick around on a site that doesn't react fast enough. If you optimize the FID score, the chances of order placements don't look as bleak.
Revenue and Profits
The order placements connect straight to your quarterly revenue. Hence, when the sales figures rise, the revenue of your eCommerce website will also go up. Furthermore, you'd start to see more profits. The low FID score won't eat into your revenue anymore.
Conclusion - First Input Delay
Unoptimized First Input Delay (FID) comes down to the Javascript on the page or the CSS. Owners would need to address these two aspects to speed up the response time in their web pages. Any task that eats into processes will disrupt the user experience. Identifying and shortening such tasks will reduce the FID time.
Owners will need to put in place several measures to optimize the FID of a website. Since the FID time will affect the user experience, which will then influence the conversion rate, revenue, and profits. Unresponsive pages make it difficult for users to interact with the website. Thereby, hurt your business figures.
Virtina, as the page speed optimization expert, is capable of improving the FID time of your website. Our experts can check buggy code, bloated images, fonts, CDN issues, and several other areas to improve the FID score of your website. Our efforts will pave the way for a better user experience on your website.
Frequently Asked Questions (FAQ)
What affects First Input Delay?
A study by Google found that the first input delay is heavily dependent on when a user interacts with a page. The browser's main thread isn't equally occupied throughout the lifecycle of each website, so it can take anywhere from almost instantaneously to over 100 milliseconds for an event like mouse movement or tapping to register in your computer.
What are the best tools to measure First Input Delay?
The top suggestions for FID testing are four good options. The first one is the Chrome User Experience Report. The second option is Search Console Core Web Vitals Report.The third option is The web vitals JavaScript library and the last one would be PageSpeed Insights.
What is FID in SEO?
A low First Input Delay (FID) ensures that the page is usable. It quantifies the experience users feel when trying to interact with unresponsive pages, which make up for a large percentage of web traffic. Imagine that you are trying to use a website on your phone. It is taking too long for the site to load, and every time you try clicking something it doesn't work because the page isn't responding quickly enough. This experience with this type of unresponsive web page can feel frustrating as well as make users abandon their efforts altogether out of frustration. That's why First Input Delay (FID) in SEO plays an important role: by measuring how responsive web pages have been over time, FID helps ensure that websites aren’t just usable but also enjoyable for all visitors! First input delay is one way we measure interactivity between user inputs and responses from your website—if there is a high latency or lag time then people might get driven off the website.
How do you test for FID?
Gain a competitive advantage with website performance and FID information. Choose the “Performance” category from your Google Analytics view, then select either Mobile or Desktop from its drop-down menu to initiate the test in order to measure how long it takes for different devices - or platforms - to load up a site's page content. You can also check out this metric via Google Search Console by navigating to their "Core Web Vitals" report function!
How do you calculate input delay?
There are many ways to calculate input delay, but one way is to take a stopwatch on your computer and attach it as well. Take two pictures of the monitors side by side so that each can be measured for time difference. This will give you an estimate for how long latency might last in minutes or hours depending on which method was used with more accuracy than other methods such as guesswork typically do.
What causes input delay?
One way to reduce input lag is by making sure the display panel's refresh rate matches that of your graphics card. I recommend playing with settings in game and on PC until you find what works best for you, but generally a low setting will have fewer frames per second which means less input delay. Input lag can be an inevitable nature associated with all devices; monitors are no exception as it takes time for their chips to process signals, adjust contrast/saturation levels, scale images to proper size etc. There are ways to try and solve this problem: One such thing would be changing our monitor’s "refresh rates" so they match those from our graphic video cards - which has been proven more than effective.
Why is input lag so common in consoles and PCs?
The relationship between refresh rates, frame rates, and input delay can be one of the most frustrating experiences for gamers. When your monitor has a low resolution or refresh rate (below 60 Hz), it limits what you're able to enjoy with high frames per second.
Why do consoles have input lag?
The relationship between the refresh rate and frame rates is one of many causes to why we see input lags in games. The more frames you're getting, the less likely your game will suffer from any kind of delay or latency when it comes to inputs such as button presses on a controller. However, if your monitor's refresh rate has fallen below 60 Hz then this can lead to problems with just about every aspect in gaming including things such as gameplay responsiveness and control accuracy for example - not ideal!
Can you recommend one optimization solution for FID?
All JavaScript that runs on the main thread which takes time to load and block from responding to the users are known as Long JavaScript tasks. These long JS tasks will prevent your website from responding quickly, impacting user experience in a negative way; this is why you should start finding these types of javascript scripts and reducing them for optimizing site FID score.
How to Optimize FID? Can you provide multiple solutions?
The FID of a site is important to maintain. To do this, make sure that the website is optimized and has Google's New Ranking Signals in 2021. It can be done by reducing long tasks scripts; removing unused javascript files from DOM cache for faster loading time; minifying JavaScript code before executing it at runtime so its size will not increase as more codes are being executed or when caches refresh compressing requested assets found on server with Gzip compression which reduces HTTP requests made to web servers thus increasing speed while using less bandwidth.
