Are exchanged or reciprocal links okay with Google?
Etmagnis dis parturient montes, nascetur ridiculus mus. Donec lorem ipsum dolor sit amet, et consectetuer adipiscing elit. Aenean commodo ligula eget consyect etur dolor.

Contact Info

(+888)-123-4587

121 King St, Melbourne VIC 3000, Australia

info@example.com

Folow us on social

First input delay – A simple explanation

First input delay - A simple explanation

First Input Delay (FID) is a user experience metric that Google uses as a small ranking factor.

This article provides an easy-to-understand overview of FID to make sense of the topic.

First input delay is more than trying to please Google. Improvements to a site’s performance generally lead to increased sales, advertising revenue, and leads.

What is the first input delay?

FID is the measure of the time it takes for a browser to respond to a visitor’s first interaction with the site while the site is loading. This is sometimes called Input Latency.

An interaction can be pressing a button, a link or a keystroke, and the answer given in response. Text input areas, dropdowns, and check boxes are other types of interaction points that FID measures.

Scrolling or zooming does not count as interactions because no response is expected from the site itself.

The goal of FID is to measure how responsive a website is as it loads.

Advertising

Continue reading below

The reason for the first input delay

Initial input delay is generally due to images and scripts being downloaded in a disorderly manner.

This messy coding causes the download of the web page to stop too much, then start and then stop. This causes unresponsive behavior for site visitors trying to interact with the web page.

It’s like a traffic jam caused by a free-for-all where there are no traffic signals. Correcting it is about bringing order to the traffic.

Google describes the cause of the input latency as follows:

In general, input delay (aka input latency) occurs because the main thread of the browser is busy doing something else so that it cannot (yet) respond to the user.

A common reason for this to happen is that the browser is busy analyzing and executing a large JavaScript file loaded by your app.

While doing so, it can not run any event listeners because the JavaScript it loads can tell it to do something else. ”

Advertising

Continue reading below

How to fix Input Latency

Since the main reason for First Input Delay is the disorganized download of scripts and images, the way to solve the problem is to carefully put in order how these scripts and images are presented to the browser for download.

Solving the problem with FID generally consists of using HTML attributes to control how scripts are downloaded, optimizing images (HTML and the images), and carefully omitting unnecessary scripts.

The goal is to optimize what is downloaded to eliminate the typical pause-and-start download of disorganized web pages.

Why browsers do not respond

Browsers are software that performs tasks to display a web page. The tasks are to download code, images, fonts, style information and scripts and then run (execute) scripts and build the web page according to the HTML instructions.

This process is called rendering. The word render means “to make”, and this is what a browser does by collecting the code and images to render a web page.

The individual rendering tasks are called threads, short for “execution threads”. This means an individual sequence of action (in this case the many individual tasks performed to render a web page).

In a browser, there is a thread called the main thread, and it is responsible for creating (reproducing) the web page that a visitor sees.

The main thread can be visualized as a highway where cars are symbolic of the images and scripts that are downloaded and executed when a person visits a website.

Some codes are large and slow. This causes the other tasks to stop and wait for the big and slow code to come off the highway (download and finish is complete).

The goal is to code the web page in a way that optimizes which code is downloaded first and when the code is executed, in an orderly manner so that the web page is downloaded as quickly as possible.

Do not lose sleep over third-party code

When it comes to Core Web Vitals and especially with First Input Delay, you will find that there is some code that you just can not do much about. However, this is probably also the case for your competitors.

Advertising

Continue reading below

For example, if your business relies on Google AdSense (a large render-blocking script), the problem will be the same for your competitor. Solutions like lazy loading using Google Ad Manager can help.

In some cases, it may be enough to do the best you can, because your competitors may not be doing better either.

In these cases, it is best to take your winnings where you can find them. Do not sweat the losses where you can not make a change.

JavaScript impact on first input delay

JavaScript is like a small engine that makes things happen. When a name is entered on a form, JavaScript may be there to ensure that both first and last name are entered.

When a button is pressed, JavaScript can be there to tell the browser to create a thank you message in a popup.

The problem with JavaScript is that it must not only be downloaded but also run (executed). So these are two things that contribute to input latency.

Advertising

Continue reading below

If a large JavaScript file is located at the top of the page, this file blocks the rest of the page below it from being rendered (becomes visible and interactive) until the script is downloaded and executed.

This is called blocking the page.

The obvious solution is to move these kinds of scripts from the top of the page and place them at the bottom so that they do not interfere with all the other page elements waiting to be rendered.

But this can be a problem if it e.g. Is located at the end of a very long web page.

This is because once the large page is loaded and the user is ready to interact with it, the browser will still signal that it is being downloaded (because the large JavaScript file lags at the end). The page may download faster, but then stops while you wait for JavaScript to run.

There is a solution!

Advertising

Continue reading below

Postpone and asynchronize attributes

Defer and Async HTML attributes are like traffic signals that control the start and stop of how JavaScript is downloaded and executed.

An HTML attribute is something that transforms an HTML element, just like extending the purpose or behavior of the element.

It’s like learning a skill; this skill becomes a trait of who you are.

In this case, the Delay and Asynchronize attributes tell the browser not to block HTML parsing during download. These attributes tell the browser to keep the main thread running while JavaScript is being downloaded.

Asynchronization attribute

JavaScript files with the Async attribute are downloaded and then executed as soon as they are downloaded. When it starts executing, the point is where the JavaScript file blocks the main thread.

Normally, the file would block the main thread when it starts downloading. But not with the async (or delay) attribute.

This is called an asynchronous download, where it is downloaded independently of the main thread and in parallel with it.

Advertising

Continue reading below

The asynchronization attribute is useful for third-party JavaScript files such as advertising and social sharing files, where the order of execution does not matter.

Postpone attribute

JavaScript files with the “delay” attribute are also downloaded asynchronously.

However, the deferred JavaScript file is not executed until the entire page is downloaded and rendered. Delayed scripts are also executed in the order they are placed on a web page.

Scripts with the Deferred Attribute are useful for JavaScript files that rely on page elements being loaded and when the order in which they are executed matters.

In general, use the exposure attribute for scripts that are not essential for the rendering of the page itself.

Input delay is different for all users

It is important to be aware that First Input Delay scores are variable and inconsistent. The scores vary from visitor to visitor.

This variation in score is inevitable because the score depends on interactions that are specific to the individual visiting a site.

Advertising

Continue reading below

Some visitors may be distracted and not interact until a moment when all assets are loaded and ready to be interacted with.

This is how Google describes it:

“Not all users will interact with your site every time they visit. And not all interactions are relevant to FID … ”

In addition, some users ‘first interactions will be at bad times (when the main thread is busy for an extended period of time), and some users’ first interactions will be at good times (when the main thread is completely inactive).

This means that some users have no FID values, some users want low FID values, and some users are likely to have high FID values. ”

Why most sites fail FID

Unfortunately, many content management systems, themes, and plugins were not built to comply with this relatively new metric.

This is why so many publishers are appalled to find that their sites do not pass the First Input Delay test.

Advertising

Continue reading below

But that is changing as the web software development community responds to demands of different coding standards from the publishing community.

And it is not the case that software developers who make content management systems are to blame for producing products that do not meet these metrics.

For example, WordPress addressed a flaw in the Gutenberg website editor that made it score less well than it could.

Gutenberg is a visual way of building websites using the interface or metaphor of blocks. There is a widget block, a contact form block and a footer block, etc.

So the process of creating a web page is more visual and done through the metaphor of building blocks, literally building a page with different blocks.

There are different kinds of blocks that look and behave in different ways. Each block has a corresponding style code (CSS), how much of it is specific and unique to each block.

The default way of encoding these styles is to create a style sheet that contains the styles that are unique to each block. It makes sense to do it this way because you have a central location where all the code specific to blocks is located.

Advertising

Continue reading below

The result is that on a page that might consist of (let’s say) twenty blocks, WordPress would load the styles of those blocks plus all the other blocks that are not used.

Before Core Web Vitals (CWV), it was considered the standard method of unpacking CSS.

Since the introduction of Core Web Vitals, this practice has been considered as code softening.

This is not meant as a bit against the WordPress developers. They did an amazing job.

This is just a reflection of how quickly changing standards can hit a software development stage bottleneck before integrating into the coding ecosystem.

We went through the same thing with the transition to mobile-first web design.

Gutenberg 10.1 Improved performance

WordPress Gutenberg 10.1 introduced an improved way to load the styles by loading only the styles that were needed and not loading the block formats that were not to be used.

This is a huge gain for WordPress, the publishers who rely on WordPress, and of course the users who visit sites created with WordPress.

Advertising

Continue reading below

Time to fix the first input delay is now

Going forward, we can expect more and more software developers responsible for CMS, themes, and plugins to move to First Input Delay-friendly coding practices.

But until that happens, the burden is on the publisher to take steps to improve First Input Delay. Understanding this is the first step.

Quotes

Chrome user experience report

PageSpeed ​​Insights

Chrome Dev Tools Lighthouse

Google Search Console (Core Web Vitals Report)

Optimize first input delay

First input delay

User-oriented performance metrics

GitHub Script for measuring core vitality

    Leave Your Comment

    Your email address will not be published.*