Core Web Vitals: FID

No comments

In May 2020, website owners and SEO professionals were excited about the news from Google. The reason was Core Web Vitals. It is a new algorithm that evaluates websites by their loading speed. In other words, it analyzes how quickly the user can interact with the content. However, Covid-19 delayed the implementation of the update.

With this innovation, Google wants to increase the number of websites that meet user expectations. Also, it wants to reduce the number of websites with negative user experience. Therefore, the search engine will start paying more attention on how fast your content loads. In addition, it will consider the stability of your website’s layout elements. The speed of the user interaction with the contents also matters.

Web Vitals Metrics

Web Vitals consist of different metrics. Below there are the three main of them.

  1. Largest Contentful Paint (LCP) is a main content download speed. It can be an image, text block, video, heading, or other content. LCP shows how quickly the page loads. Thus, to provide a good user experience, LCP should be within 2.5 seconds after the page starts loading.
  2. First Input Delay (FID) is the waiting time before the first interaction with the content. FID measures the time starting from the user’s first interaction with your website to the browser’s actual response to that action. The user’s first interaction is clicking on a link, image, or button. If users click on one of the website’s elements and interaction happens very slowly, FID is high. Therefore, this means customers will have a bad experience. For a positive experience, web pages should have a FID of less than 100 milliseconds.
  3. Cumulative Layout Shift (CLS) is a metric of visual stability of the website. It shows the displacement of the web page elements during page loading. If the content is pushed aside after the website’s loading, CLS will assess how critical it is for visitors. To provide a good user experience, web pages should maintain a CLS of less than 0.1.

Why FID is an important metric?

Have you noticed that website slows down when you are scrolling the page? Certainly yes. You also have faced another problem, when you click on a button and it only works after a couple of seconds. All these problems happen due to a high First Input Delay. FID directly relates to user actions. It measures the experience of the users when they interact with the pages. 

FID is the user’s first impression of your website’s responsiveness. Therefore, it has a vital role for building user loyalty. The biggest problems with the interactivity on the Internet appear during page load. That’s why it is crucial to focus on improving the experience with the first user of the website. It will have the greatest impact on improving the overall interactivity of the web.

Google recommends implementing, monitoring and tracking the behavior of real users. This will allow you to understand what kind of experience they get.

What is a good FID score?

For a good user experience, the value must not exceed 100 milliseconds. The goof benchmark for makeing sure you achieve this goal is the 75th percentile of page load. This score is for mobile and desktop.

How to measure FID?

The measurement of FID requires a real user interaction with your page. You can measure FID using the following tools.

  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
  • web-vitals JavaScript library

How to optimize FID?

The main reason for a bad FID is the execution of heavy JavaScript. Therefore, optimizing JavaScript compilation and execution on your web page will reduce FID.

The browser cannot respond to user interaction while the main thread is busy executing JavaScript. To improve this, you need the following steps.

  • Break up Long Tasks
  • Optimize your page for interaction readiness
  • Use a web worker
  • Reduce JavaScript execution time

Break up Long Tasks

In order to reduce the amount of JavaScript that loads on a single page, you can break down long-running code into smaller tasks. Long tasks are a sign of potential JavaScript bloat, which means it loads and gives more than the user need right now. Breaking up long tasks can reduce FID on your website.

Optimize your page for interaction readiness

There are some common reasons for poor FID and TBT scores in web applications that rely on JavaScript.

  • First-party script execution can delay interaction readiness. JavaScript size augmentation, long execution time, and inefficient blocking can slow down page responsiveness to user input. It can also affect the FID. Progressive loading of code and features can help separate this work and increase interoperability.
  • Data-fetching can impact many aspects of interaction readiness. Waiting for cascading fetches like JavaScript can affect interaction latency. Your goal is to minimize the reliance on cascading data fetches. It would be best if you minimize the amount of data that needs to be post-processed on the client-side.
  • Third-party script execution can delay interaction latency too. Sometimes, third-party scripts like advertisements can preempt the main scripts in priority. It can also impact bandwidth on the main thread and delay the page’s readiness for interaction. Try to prioritize downloads that you think offer the most value to users.

Use a web worker

One of the main reasons for input delay is a blocked main thread. Web workers allow JavaScript to run on a background thread. Moving non-user interface activities to a separate worker thread can shorten the main thread’s blocking time. Therefore, this will improve FID.

Reduce JavaScript execution time

You can also limit the amount of JavaScript on your page. It will reduce the time the browser needs to spend parsing, compiling, and executing JavaScript code. This speeds up the browser’s response to any user interaction. To reduce the amount of JavaScript running on your page, you need the following steps.

  • Defer unused JavaScript. You should only load the code required for the web page or which responds to user input. To reduce the amount of unused JavaScript, you need to code-split your bundle into multiple chunks. You should also defer any non-critical JavaScript, including third-party scripts.
  • Minimize unused polyfills. One of the main performance issues with including polyfills and transpiled code on your website is that newer browsers don’t need to load them if they don’t need them. To reduce your JavaScript application size, minimize unused polyfills and limit their usage where they are needed.

There are different tools for measuring and improving FID. To measure your website’s FID, we recommend you to use one of the most user-centric tools. That tool is the Web Vitals Chrome Extension. It allows you to follow up on three key metrics for any web page you visit. 

Experience is the key

User experience is at the core. To improve it, Google is continuously developing the web industry. For that purpose, Google considers new metrics that improve user’s search engine experience.

Adminmation TeamCore Web Vitals: FID

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 47 = 53