What is First Input Delay?

There are a lot of metrics we can use to measure the performance of a website - FP, FMP, FCP, TTI, TTYL (JK :P). Although these metrics can be overwhelming at first, it isn’t necessary for every site to track every single one. Different metrics may be more important for different types of websites.

For a content-driven website such as this blog, First Contentful Paint & First Meaningful Paint are the primary metrics I track. FCP refers to the point at which the browser renders any information from the DOM. This could be an image, some text, anything. FMP, on the other hand, is about the point at which the first useful bit of content is rendered on the screen. This is usually the hero section of the page, for example on this blog it could be the title and first sentence or two of an article.

Other metrics could be more important for other types of sites. Take a form, for example, where the primary purpose of the site is for a user to fill out some information. A metric such as Time to Interactive would be crucial. TTI refers to the point at which a user can reliably interact with the content on the website, such as clicking links or entering text into input fields.

First Input Delay #

FID is a metric that tracks the delay between the time a user can attempt to interact with a part of the site, and the time that the interface is able to respond to that interaction. We have all experienced situations where a web page has visibly loaded and we try to click around on buttons or any Javascript-powered interactive elements, but nothing responds. This delay is what the FID metric tracks.

The FID metric is in someways an intersection of the First Contentful Paint and Time to Interactive metrics. It lies in the middle of those two points, measuring the time between the FCP (and therefore when a first input can be made) and when the browser’s main thread is able to respond to any interactions.

What causes a slow First Input Delay? #

A slow(er) FID can be caused when the browser’s main thread is busy parsing and executing a significant amount of Javascript after the page content has already loaded. The key point here is that there is visible content on the page that the user may try to interact with, but the browser is not able to respond yet.

If we think of classic client-rendered single page applications, they typically wouldn’t suffer from this issue because nothing meaningful shows on the page until the entire application Javascript is loaded.

In these cases, they have a poor First Meaning Paint, but a low or inexistent First Input Delay. Server-rendered single page applications, on the other hand, have the opposite problem. Because they are rendered by the server, they typically have a comparatively fast First Meaningful Paint. However, because they need the application Javascript to be loaded before the user can properly interact with the site, they are a prime candidate for slow First Input Delay.

Tracking First Input Delay #

FID can be measured using Google’s tracking library. This library exposes the perfMetrics object, which tracks FID with the onFirstInputDelay() method.

perfMetrics.onFirstInputDelay(function(delay, evt) {
	console.log(delay);
});

With the delay response, you can track it by sending it to tools like Google Analytics or whatever else you use.