Introduction
When we design an application, we often think about performance and there are many good reasons for that. Over the years, multiple case studies have shown that performance can increase growth and conversion rate in a company. Simply visiting WPO stats website, you can find several studies that verify that. However, how we measure performance and which tools are available to us? In this post, I will attempt to answer both questions. Let's get started.
Web Vitals
Web Vitals in an initiative by Google which aims to provide a suite of metrics to measure the quality of the user experience. Those metrics are related to load time, visual stability, interactivity, and many others. Over the years, multiple metrics have been developed to measure performance, but we will be focusing to the most important ones.
First Paint (FP)
It measures how long it takes for the browser to render pixels to the screen. In other words, this metric will measure the time it takes to move from a completely blank page to something visually noticable. However, this metric doesn't address one issue. How meaningful is that paint? This question is addressed by FCP.
First Contentful Paint (FCP)
It measures the time it takes to load meaningful content on your screen. This is the point where a page starts to load until the point that it renders some 'content'. The 'content' can either be text, an image, an element with a background image using the url() function, svg elements, or non-white canvas elements.
Largest Contentful Paint (LCP)
While FCP aims to measure how quickly something is rendered, LCP measures how long it takes to load the largest chunk of information within the viewport. This can either be a text block, an image or a video(the poster image).
Time To First Byte (TTFB)
This metrics measures how long the browser needs to request an HTML document and receive the first byte of information. This involves tasks such as triggering a network request, resolve the server domain to an IP address(DNS resolution), initiate a connection with the server, generate the HTML document on the server-side, and send the output through the network. However, this metric doesn't account the amount of information we send through the network and sometimes can be misleading. A good example is when we compare the TTFB score between a client-side (CSR) and server-side (SSR) rendered application. Often, an CSR application scores lower to an SSR app, which although can give the impression that is a more efficient rendering approach, in reality is not. When the browser receives the HTML document, it has so much work to do, that is preferred to spent more time on the server to render the HTML document with some extra content.
Time to Interactive (TTI)
This metric identifies how interactive is your page. Specifically, it measures the time from when the page starts loading to when its main sub-resources have loaded and is capable to reliably respond to user inputs. If you have a performance trace in your hands, you can follow the steps below to roughly estimate TTI:
Find where FCP starts in your page.
Then, search forward in time for a quiet window. A quiet window is a five seconds timeframe where the main thread doesn't run any long tasks, and has at most two network requests running. A long task is anything that can take more than 50ms.
When you identify that window, start to move backwards until the last long-running task. TTI is the difference between LCP and that point. If you can't find any long-tasks, then TTI is the same as FCP.
First Input Delay (FID)
FID is also related to interactivity and it measures the browser delay processing a user event. An event can be a click on a link, a tab on a button or anything that triggers some code in the background. If you get a high FID score, this means that the main thread is busy and has to juggle between a lot of tasks at the same time.
Total Blocking Time (TBT)
TBT is the time where the main thread is blocked between the LCP and TTI window. At most, a task can take up to 50ms. Anything more will block the main thread and is added to the TBT. Therefore, TBT is the time wasted in those long tasks. For example, if task A takes 70ms and task B 80ms, then TBT is 50ms(20ms + 30ms).
Cumulative Layout Shift (CLS)
This metric is related to the visual stability of a page and it measures the content shift(layout shift) of a document. A layout shift relates to the change of the position of an element over different rendering frames. This is often the case when you an image or video element is set without dimensions. Another case is when fonts are loaded with a fallback that has a different size.
Core Web Vitals
This is a subset of web vitals that represent a distinct facet of the user experience. Those metrics are related to loading time, interactivity and visual stability. As of now, Largest Contentful Paint(LCP), First Input Delay(FID), and Cumulative Layout Shift(CLS) are part of core web vitals, which means that various performance tools are using them as a baseline to measure the performance of a website. Tools like Lighthouse, Performance Insights, WebPageTest and PageSpeed Insights are using them internally to rank pages based on their score.
Summary
Performance is an important aspect of our application and over the years, multiple metrics have been developed to evaluate the performance of a website. Those metrics fell under the umbrella of web vitals and aim to address issues related to the loading time of a website, interactivity and visual stability. A few of those metrics are Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift, which are also part of core web vitals.