{"id":119109,"date":"2020-11-04T17:02:28","date_gmt":"2020-11-04T09:02:28","guid":{"rendered":"https:\/\/seo-hacker.com\/?p=19109"},"modified":"2021-05-11T05:48:40","modified_gmt":"2021-05-11T05:48:40","slug":"first-input-delay","status":"publish","type":"post","link":"https:\/\/seo-hacker.com\/first-input-delay\/","title":{"rendered":"Core Web Vitals Guide Part 3: First Input Delay (FID)"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Have you ever experienced trying to click on a button or a link on a website but it doesn\u2019t seem to respond right away? That small delay leaves a bad impression on users that may ultimately be the reason why they don\u2019t visit more pages on your website or worse, not return at all.<\/span><\/p>\n

In this third part of our Core Web Vitals guide, I will walk you through the second Core Web Vitals metric, First Input Delay (FID).<\/span><\/p>\n

<\/p>\n

If you haven\u2019t read what the Core Web Vitals are yet, I highly recommend that you read the first part of our guide first by going to this link<\/a>.<\/span><\/p>\n

And if you\u2019re interested to read about Largest Contentful Paint<\/a>, the first metric in the Core Web Vitals, I highly recommend that you go check out our guide for that as well.<\/span><\/p>\n

What is First Input Delay?<\/span><\/h2>\n

First Input Delay or FID measures the time it takes for a page to respond to a user\u2019s first interaction with it. It is a metric that focuses on the interactivity of a web page which means if a user did not interact with the page, FID is not measured.\u00a0<\/span><\/p>\n

To fully understand what FID is, let\u2019s have a quick run-through of the loading process of a web page.<\/span><\/p>\n

When you open a web page, the browser will make a couple of network requests from the website to load necessary files and then process it in the <\/span>main thread<\/span><\/a>. While the main thread is still processing CSS and JS files, some parts of the website may now be visible to the user. However, that does not mean that the website has fully loaded all of its functionalities.<\/span><\/p>\n

If a user interacts with the website while the main thread is still busy, it creates a delay because the main thread needs to finish executing all JavaScript files, especially long tasks, before it could respond to the user\u2019s request. The entire duration the user has to wait is what we call the First Input Delay.<\/span><\/p>\n

First Input Delay is different from Time to Interactive (TTI)<\/a> because TTI measures the time until the page is interactive, not the response time of the page to the interaction. First Input Delay happens between the First Contentful Paint (FCP) and Time to Interactive.<\/span><\/p>\n

\"first-input-delay\"<\/a><\/p>\n

A good FID score is 100ms and below.<\/span> Users will perceive loading speeds of 100ms and below as instantaneous<\/span><\/a>.<\/span><\/p>\n

Anything between 100ms and 300ms needs to be improved and scores above 300ms are considered poor. According to Google, a good threshold is 75% of the total page loads (mobile and desktop). However since FID is a metric that directly relies on human interaction with the page, they highly recommend looking at the 95 to 99 percent of page loads\u00a0<\/span><\/p>\n

Why the First Input Only?<\/span><\/h2>\n

I\u2019m pretty sure you\u2019ve heard of the quote \u201cdon\u2019t judge the book by its cover\u201d, well that\u2019s not true when it comes to websites. The first impression of a user to your website has a huge impact, especially if they are a new visitor. A small delay can make your website feel clunky.\u00a0<\/span><\/p>\n

Also, according to <\/span>web.dev<\/span><\/a>, they have found out that most interactivity issues on the web happen during page load and they believe that focusing on optimizing the first user interaction will have a bigger impact on optimizing the overall interactivity of the web.<\/span><\/p>\n

Although the first input delay is the main metric in the core web vitals, other interactions are also important but Google decided that it is best to separate the two metrics to provide web developers with more specific guidelines.<\/span><\/p>\n

How is First Input Delay Measured?<\/span><\/h2>\n

FID is unique from other metrics because it is the only metric that can only be measured using field tools. You cannot use lab tools to measure FID because it requires real users to interact with your website.<\/span><\/p>\n

Lab tools to measure First Input Delay:<\/span><\/p>\n