[Web] Web Vitals

1. Time To First Byte (TTFB): This is a measurement of the responsiveness of a web server. It is the time it takes from the user or client making an HTTP request to the first byte of the page being received by the client's browser. It includes network latency, and it's a good measure of how quickly a server responds to a request. High TTFB can mean issues with server performance, network issues, or application issues.

 

2. First Input Delay (FID): This measures the time from when a user first interacts with a page (for example, when they click a link or tap on a button) to the time when the browser is actually able to respond to that interaction. It gives an idea of how quickly your site responds to user inputs. A high FID suggests that your website may feel unresponsive to user interactions, which can be frustrating for the user.

It depends on the Long task, and when the user interaction happens. 

 

3. Time to Interactive (TTI) is a performance metric that measures the time from when the page starts loading to when all its main sub-resources have loaded and it is capable of reliably responding to user input quickly.

After Long task ends, with 5 seconds time period, there is no more long task happens. 

4. Total Blocking Time (TBT): This is a metric that measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. Essentially, it quantifies how non-responsive a page is before it's fully loaded. It can be useful to look at alongside FID, because it covers the entire loading period, not just the first input.

Total time is 149ms.

 

One huge Long task vs multi small Long task

5. Cumulative Layout Shift (CLS): This is a metric that measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next. This metric provides insight into the visual stability of a page. High CLS can indicate that your site is visually jumpy or unstable, which can be disorienting or annoying for users.

 

6. Interaction to Next Paint (INP) is a pending Core Web Vital metric that assesses a page's overall responsiveness to user interactions by observing the latency of all qualifying interactions that occur throughout the lifespan of a user's visit to a page. https://web.dev/inp/