How to optimize the First Input Delay (FID)?

A few days ago I showed you what the First Input Delay (FID) is another Google metric that is part of the Core Web Vitals to evaluate and position your website in Google searches. How to optimize the First Input Delay (FID)?

The FID metric evaluates the processing time of the events that the user executes on the website. Once the user clicks a link or button, FID begins to evaluate the response time to that interaction. Let's review how you can evaluate and optimize the FID on your website.

How to measure and evaluate the FID?

As we reviewed in the previous article on First Input Delay (FID), to provide a good user experience, websites should strive for an FID score of 100 milliseconds or less, normally static websites. The lower your score, the more stable your design will be.

Here we review some tools that may be useful for you to measure the FID of your website:

PageSpeed Insights
Chrome user experience report via BigQuery or CrUX API.
Search Console (Core Web Vitals report)

Measure the FID with JavaScript

You can also measure FID by adding JavaScript to your page, using the web-vitals JavaScript library. Adding the following script to your website to print FIDs by the console:

import {getFID} from 'web-vitals';getFID(console.log);

How to optimize the FID?

If the result of your FID evaluation is not satisfactory, that is 100 milliseconds or less, it is usually an indication that the JavaScript or CSS is not optimized properly.

How to improve the FID by optimizing the CSS code

CSS files are essential as they must be downloaded and analyzed as soon as possible so that the browser can display the website to the user. That is why you must optimize, minimize and compress the CSS files of your website, eliminating unused or redundant CSS code.

How to improve the FID by optimizing the JavaScript code

JavaScript tasks are usually the main cause, especially when there is a delay in loading a script since this blocks the main browser thread for a long time, this consequently does not allow the user to interact.

Here are some strategies you can use to minimize the amount of JavaScript loading time blocking your website's main thread:

Break large processes into smaller, asynchronous tasks.
Generate as much static content as you can, that will free up JavaScript load.
Explore third-party libraries and code, often the poor performance of a third party can unnecessarily block the main thread of your website. Prioritize the loading of items that you think will offer the most value to users first.
You use Web Workers to delegate some main tasks to threads to reduce the workload on the main thread.
Defer unused JavaScript code, asynchronously or lazy, so that JavaScript runs only when necessary.

Conclusion

The evaluation of the CSS and JavaScript code on your website is key to obtaining the best FID scores, to provide a good user experience and SEO web positioning, remember that you must work so that the FID score is 100 milliseconds or less.