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 Impact on Salesforce Commerce Cloud Sites
  • ArganoUV
  • Core Web Vitals
  • Salesforce Commerce Cloud

Core Web Vitals Impact on Salesforce Commerce Cloud Sites

What’s the impact of Core Web Vitals on a Salesforce Commerce Cloud website?
From the Web to the Store: ECCO, Salesforce Commerce Cloud, and the Endless Aisle
  • ArganoUV
  • Commerce
  • Core Web Vitals

From the Web to the Store: ECCO, Salesforce Commerce Cloud, and the Endless Aisle

Integrating Salesforce Commerce Cloud’s Endless Aisle, ECCO can blur the lines between their physical and digital...
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.

The Page Experience Report
  • ArganoUV
  • Core Web Vitals

The Page Experience Report

What is to be found in Google’s page experience report?
The Supply Chain Issue and Nearshoring
  • ArganoUV
  • Commerce

The Supply Chain Issue and Nearshoring

How can nearshoring help solve the supply chain issue?
The Impact of Page Experience Metrics
  • ArganoUV
  • Core Web Vitals

The Impact of Page Experience Metrics

What is the impact of Google’s page experience metrics?

How can we achieve
awesomeness together?