Blurred background image

Core Web Vitals: All About First Input Delay

Core Web Vitals: All About First Input Delay

Core Web Vitals consist of First Contentful Paint, Largest Contentful Paint, and First Input Delay. The first two both measure the amount of time it takes for content to visually render on a page – or visually paint on a page.

To render doesn’t capture the load responsiveness, however, nor the speed of a page’s response to the interaction of a user.

First Input Delay, on the other hand, captures the first impression of a user on the website’s responsiveness and interactivity. This means that it measures the time from when a user first interacts with a page until the time when the browser is actually able to respond to the interaction.

As such, First Input Delay is a field metric and so can’t be replicated in a lab environment. To measure the response delay, a real user interaction is needed. To help bridge the gap and get a close reading of First Input Delay, looking at the Total Blocking Time is recommended. 

Despite not being exactly the same, improvements to Total Blocking Time have strong correlations to improvements in First Input Delay.

The culprit 

Core Web Vitals: All About First Input DelayThe main issue when it comes to First Input Delay is an overweight JavaScript. So optimizing JavaScript is like squats at the gym: it is the one move that gives the body the most improvement.

And so with this in mind, let’s take a look at some ways in which brands and retailers can optimize their First Input Delay and improve their overall Core Web Vitals.

Break it up

Beyond reducing the amount of JS that loads, the next port of call will be to look at the breakdown of long-running code.

Long tasks, those in which site users can encounter an unresponsive user interface. Pieces of code that blocks the main thread for 50 milliseconds or longer are defined as a long task. It is a good indicator of JS bloating, and so slimming it down and reducing input delay this way can be very beneficial.

First-party scripts

Within web apps, first-party scripts lead to delays in interactivity readiness. Progressive loading of code as well as features are able to help distribute the workload and improve the readiness of interaction. Elsewhere, server-side apps have the appearance of quick loading times, yet have caution because user interactions can be blocked by large-script executions.

These blockages can take multiple hundred milliseconds – even reaching seconds. In this case, it’s best to consider the shift to logic server-side during the build, or generating more static content.

A web worker

Core Web Vitals: All About First Input DelayAnother main cause of input delay is a blocked main thread. In steps the web worker, which allows JavaScript to run on a background thread. This implies shifting non-user interaction parts to a separate worker thread – suppressing main thread blocking time and ultimately First Input Delay.

Web workers can be worked well on libraries such as Workway, Workerize, and Comlink.

The unused polyfills

When you code using JavaScript syntax and reference modern browser APIs, then you need to transpile it as well as include polyfills so that it is able to function across older browsers.

The most critical concern around polyfills is that newer browsers should not have to download it if they do not need it. To squeeze the size of JavaScript, erasing unused polyfills as much as possible is a great idea.

PS: ArganoUV is one of the world’s leading Core Web Vitals teams. Contact us to see how we can work together.

Related Ideas

If you got value from this article, you may enjoy these other articles, as well. We’re always adding value!

Core Web Vitals Forecast for Web Developers & Businesses
  • ArganoUV
  • Core Web Vitals

Core Web Vitals Forecast for Web Developers & Businesses

The forecast for Core Web Vitals for web developers and business.
Common Questions About Core Web Vitals
  • ArganoUV
  • Core Web Vitals

Common Questions About Core Web Vitals

Here are some frequent questions that are put to Google’s Core Web Vitals.
What is the Weight of Core Web Vitals?
  • ArganoUV
  • Core Web Vitals

What is the Weight of Core Web Vitals?

The importance of Core Web Vitals are weighted. But which weighs heavier than the others? ...

Latest ideas

Our latest thinking about SF Commerce Cloud.

UX Considerations for Building an Amazing CMS
  • ArganoUV
  • Technology

UX Considerations for Building an Amazing CMS

Why is the user experience so critical for content management systems?
The Growth of the Small and Medium-Sized Business in 2021
  • ArganoUV
  • Commerce

The Growth of the Small and Medium-Sized Business in 2021

How did small and medium-sized businesses fare during 2021?
Sophistication in the Digital World: Fitch Ratings & Contentful
  • ArganoUV
  • Contentful

Sophistication in the Digital World: Fitch Ratings & Contentful

Fitch Ratings goes customer first with the help of Contentful.

How can we achieve
awesomeness together?