The First Input Delay (FID) metric is used to measure a page’s user experience. First Input Delay is a Core Web Vital factor and it is used to measure how long it takes for the browser to respond to the user’s first interaction with a web page. A user interaction can be tabbing on a button, clicking on a link or any other element. The user interaction has to be finite so that it can be measured and continuous interactions like scrolling and zooming cannot be measured using FID.
When you click on a link you expect the page to answer it as soon as possible. Though this is not always the case. If you click on a link and nothing happens for a while then the browser is not able to process your request immediately. This is because the browser is processing another request and cannot process your request. Visitors will not wait for long to get a response and therefore it is important to maintain a low FID. FID is a field-only metric and is measured in milliseconds.
FID is a real user metric and requires a user interaction to be measured. A FID of 100 ms or less is considered good, a FID between 100 ms to 300 ms needs to be improved and a FID beyond 300 ms is considered poor.
TBT is the time for which the page is blocked before responding to the user input. User inputs can be keyboard press, mouse click or screen tap. The TBT score is the total of all the ‘block’ time. TBT measures the sum of time periods between the First Contentful Paint (FCP) and the Time To Interactive (TTI). FCP is when you can interact with the first content on a page. TTI is the time taken for the page to be fully interactive.
A good TBT score is 300 ms or less, a score between 300ms to 600 ms needs improvement and a score over 600ms is considered poor. Lab tools that can be used to measure TBT are Lighthouse, PageSpeed Insights, Chrome Dev Tools and WebPageTest. You can improve your FID by improving the TBT metric.
FID is the actual experience of a user on your page and so it is a metric which should be monitored and optimised.
These are the points to follow to optimise FID:
1. You can improve your FID score by optimising your CSS code. CSS files are downloaded and parsed quickly so that the browser can render the page. The options to optimise the code are limited so you can follow best practises like minifying and compressing the CSS files. This will reduce the file size and make the code easier to execute.
You should also remove the unused CSS code to reduce the total number of bytes that have to be downloaded. This will ensure that the browser has less operations to perform and it can start rendering the page faster.
3. Minimise the amount of data on the client-side that needs to be post-processed. This will reduce the amount of work the browser needs to do to render a page.
4. Third-party scripts can unnecessarily block the main thread and so you should prioritise the loading of what offers value to the users first. Usually ads and the pop-ups are not at the top of the list.
7. The idle until urgent approach allows you to run your code during the idle periods using the main thread to the fullest. But it also guarantees that urgently required code is run immediately. This code evaluation strategy was put forth by Philip Walton from Google. This strategy uses the elements from the two most popular approaches: Eager evaluation and Lazy evaluation. Using the idle until urgent approach you can improve your FID.
9. For WordPress you can use WP Rocket to improve FID.