What is First Input Delay (FID) and How to Improve it?
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.
FID can be measured by tools like PageSpeed Insights, Search Console and Chrome User Experience Report (CrUX). You can also measure FID in JavaScript using the Event Timing API. As FID is not a lab-data it cannot be measured by lab tools. You can use the lab tools to measure another metric called the Total Blocking Time (TBT).
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.
2. Optimise JavaScript code to improve the FID. JavaScript tasks which are long will run on the main thread for extended periods and cause delay. You can break the long tasks into smaller tasks which are asynchronous so that the user input can be processed between the tasks.
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.
5. Use web workers to delegate some of the work of the main thread. This will reduce the workload on the main thread thus reducing the input delay. You can run some of the JavaScript code on the web workers.
6. You can defer unused JavaScript and execute it only when it is needed. In modern JS you can use the ES6 modules to load on demand.
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.
8. Websites are built using modern JavaScript and deliver all the functionalities to the old browsers that do not support the modern features. Use polyfills when you use an old browser. Make sure that you do not run the polyfills if they are not needed. You can deliver separate bundles by using module / nomodule.
9. For WordPress you can use WP Rocket to improve FID.
If you are looking for technical SEO analysis, do get in touch with us.
- Log in to post comments
INDIA
USA
UAE