Let’s be real—we’ve all screamed into the abyss before when our mouse turned into a little loading wheel of doom. Waiting for web pages to load when we are so used to instant access to exactly what we want on the internet is a skewing of expectation that can throw us off our groove and boil our blood.
That’s why it’s so important for website owners to optimize the performance of metrics called “core web vitals”. Introduced by Google in June 2021, these three metrics attempt to score websites based on how pleasant a user’s experience is when visiting your website. Think of it as Yelp reviews, but for the back-end of your website instead of your brick-and-mortar local Italian restaurant. And the review impacts your ranking on Google’s search page instead of the number of pizza orders you get on a Saturday night.
Out of the three main core web vitals, this article covers “first input delay”; what it is, how it’s calculated, why it’s important, and how to improve it (and if you want help, just ask!). Let’s get started.
First Input Delay measures the time it takes for a browser—the application software that allows you, dear user, access to the internet—to respond to a user’s first interaction. This could be a click, a tap, or key press, but not zooming or scrolling. The faster the browser reacts to user interaction, the more responsive a page seems to a user.
First Input Delay, like Largest Contentful Paint, is a metric of time. First Input Delay is the amount of time that passes from the moment a user first interacts with a web page, to the moment the browser actually begins processing the action in order to respond accordingly.
A good FID score is 100 milliseconds or below, a “needs improvement” score is anywhere from 100-300ms, and a score of 300ms or above is too far gone.
It is important to note that FID is calculated using field data, or data collected from real-world interactions that cannot be properly simulated in a controlled environment. Thus, measurement of FID cannot be determined unless a user interacts with your site. That’s why you might see your FID score change despite not changing the configuration of your webpage; Google determines your FID score based on data gathered from real-life users, and there’s plenty of variance when it comes to that. Factors like different devices and environments can affect the time it takes a browser to react, and therefore cause your FID score to change.
First Input Delay is a partial determinant in a user’s experience on your website. Users will leave web pages that take too long to load, even if they are in hot pursuit of information or have intentionally searched to reach your website. The chances of a user bouncing increases by 32% when overall load time goes from one to three seconds, and it shoots up to 90% if load time goes from one to five. So optimizing your website to load as quickly as possible after a user action will increase overall user satisfaction and improve user bounce rates.
It sort of looks like the Gantt Charts used by companies to keep track of projects that have multiple parts for different people:
And it functions visually in very much the same way. The grey in the first chart represents the requests made by the network for loading resources from the page, and the yellow represents the requests being processed by the main thread, or where the browser does its processing. As seen on the first graph, the browser receives the user input in this particular situation in the middle of a task, and therefore has to wait to finish that task before starting on the user input task.
Optimizing your web pages to be ready to interact with users fast is another way to improve a web page’s FID score. Try coding your tasks so that they can be completed progressively in smaller portions instead of coding them to be completed individually during longer periods of time. Data fetching, or retrieving data from the server, can also delay interaction readiness and impact your FID score.
Lastly, to improve your FID score consider using a web worker. A web worker is essentially a helper that can be tasked with a non-UI (user interaction) operation and run it on a background thread, eliminating one of the tasks in the main thread and allowing a browser to react faster to a user interaction.
In a nutshell, that is one-third of Google’s new core web vitals metrics for you. Tah-dah. Jazz hands. Need the TL;DR? We don’t blame you. Let’s review:
Do you suspect your website visitors are experiencing the rainbow wheel of doom? Try these tricks to optimize for FID and see if things start improving and the visitor floodgates open.
Confused by all the SEO terms floating around the internet? Don’t sweat. Learn the SEO vocabulary you’ll need from our complete SEO glossary.
Page Authority is a metric that predicts how well an individual page will rank on the Search Engine Results Page on a scale of one to 100.