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.
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.
