What is the First Input Delay and why is it important?

First Input Delay is the time it takes for a page to respond to the user first actions while loading.

First Input Delay (FID) is a Google usability metric that is part of the Core Web Vitals and, from May 2021, will be an SEO ranking factor.

FID is the time it takes for the browser to respond to the user's first interaction on a web page while it is loading. This metric is also known as Input Latency or Input Lag. Basically, it is the time that elapses between accessing the web page and being able to start interacting with it.

An interaction can be anything from clicking on a button, clicking on a link or using forms, text areas, menus and any other interactive element on the page. Scrolling down or zooming in and out do not count as interactions, as these are not responses of the page itself, but of the browser itself.

The purpose of the FID is to measure how responsive a web page is while it is loading.

What causes FID to be slow?

In short, any element that "weighs down" the design of the page. Most commonly, it is Java scripts that slow down the loading time the most. This is due to the fact that, on many occasions, the code is not well ordered, causing problems for the browser when reading it. Heavy images also tend to affect loading times and FID, as they "move" the page when they load.

In short, it would be like a traffic jam caused by bad signage, causing accidents and therefore slowing down all traffic.

How to improve the FID of a website?

The easiest way to fix FID problems is to use HTML attributes to organise the loading of images and scripts. At the same time, clean up the code and remove all unnecessary scripts, as well as optimise the images so that they load quickly.

On the other hand, there are slow script blocks that affect the vast majority of websites and for which there is still no solution. These are Google Adsense ads. To improve the FID, the "lazy loading" options can be configured in the Google Ad Manager control panel.

JavaScript scripts can also slow down the page and even block it. In this sense, if the link appears at the top of the code, the browser will try to render it earlier, which will end up blocking the loading. The most obvious solution is to place the link to the script at the bottom of the code, so that it does not interfere with loading.

However, this is not a great solution, as it will also crash the page when it reaches the end. In this case, the best solution might be to use the HTML "Defer" and "Async" tags, which tell the browser not to continue loading other elements of the page while it finishes rendering the script.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.