First Input Delay (FID) is a metric, from Google, coming into force in May 2021 as part of the Page Experience Update.
The metric will measure the time it takes from the user presses a key on their device and when the keystroke is registered in a browser. FID is part of Google’s efforts to index pages that offer a more satisfying browsing experience for users.
Google has put forth this new metric to replace First Meaningful Paint (FMP) and DOMContentLoaded (DCL). These two metrics are being depreciated as Google believes them to be too focused on web page performance rather than helping with the actual user experience.
The examples given in the update suggest that layouts, images, text, and interactivity should appear quickly after input so users can enjoy an immersive browsing experience while important content loads progressively behind-the-scenes.
While FMP and DCL were previously the only metrics that counted in mobile, sites could add a “responsive design” tag to their desktop pages to be ranked better.
Will FID affect desktop, mobile, or both?
With FID, both desktop and mobile pages will be measured under identical conditions. This means that sites will have to make sure their user experience is great regardless of whether a visitor accesses the site from their smartphone or laptop.
In the current model, render-blocking JS will block rendering until it finishes loading, which can result in a slower browsing experience. To remedy this situation, Google has proposed that browsers should start rendering the page first and then load the JS later if it’s blocking.
This proposal uses FID as a metric to determine whether blocking JS is necessary or not. If the browser detects that input is being registered before any of the blocked elements have started loading, then that JS can be loaded in parallel with other elements on the page. This reduces latency for users and provides a better browsing experience.
So, how do you improve FID?
Avoid unnecessarily increasing page load times by applying lazy-loading techniques to as many elements as possible (video or images). Also use responsive design to ensure that your site displays well in every device type possible.
For sites with lots of JS, it’s recommended that you use the new HTML tags for JS loading to ensure that it’s loaded and run in an efficient way.
In terms of server response times, there is nothing you can do about this from your side as it depends on the speed of your site’s hosting server and the Internet connection that visitors use when accessing your site. If you are running a slow site, then you could look into optimizing your hosting provider and improving your server response time using caching techniques.
These improvements might seem like small steps but they will add up over time to make sure that your site is perceived as a great user experience by Google’s Page Experience Update.