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.

What is First Input Delay?

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.

Delays are what we experience when our mouse turns into a pending wheel, and happen when the browser has been tasked with too many things in order to load a web page. This occurs with more regularity as we build more complex sites in more complex languages (such as JavaScript), which demands more from the browser. With the browser’s attention split, the First Input Delay score goes up. But what exactly does that mean?

#1: How is First Input Delay Calculated?

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.

#2: Why is First Input Delay Important?

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.

#3: What Causes Input Delay?

There is one clean and clear answer to this one: almost every time without fail, input delay is due to heavy JavaScript execution. When a web page loads, there’s a timeline of tasks that a browser has to finish in sequentia that looks like this:

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.

The more tasks a browser has to complete in the main thread, the longer it will take to get to the point where its queue is clear enough to respond to the task. When a web page has a lot of complicated JavaScript, there are more main thread tasks that must be completed, which results in a longer wait time for the user and therefore a higher FID score.

#4: How to Optimize First Input Delay

There are a few different tricks in the web vitals trade to try and get your FID score down to 100ms or below. First, you can restructure Long Tasks of JavaScript into smaller tasks. Instead of building tasks of large JavaScript blocks that take 50ms or more for a browser to complete, try code-splitting and breaking up Long Tasks.

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.

The Bottom Line

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:

• First Input Delay is a measure of the time it takes for a browser to respond to a user’s first interaction with a web page.
• FID is measured in time; a score of 100ms or lower is good, a score any higher needs improvement.
• Ways of optimizing FID include breaking up Long Tasks, optimizing web pages for interaction readiness, or use a web worker.

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. 

On the other hand, if you find yourself thinking, I don’t even know where to begin to fix my First Input Delay, connect with us here at Marketwake! Reach out to us today to start a conversation.