As we are now aware of the groups of metrics, let us look at some key metrics which belong to these groups.
Time to Interactive(TTI)
This is the point where everything is stable enough to handle user interaction. In other words, when the layout has stabilized, key web fonts are visible, and the main thread is available free enough to handle user input. This metric is key to understand how long the user has to wait in order to interact with the website without any delay or lag.
First Input Delay (FID)
Largest Contentful Paint (LCP)
Denotes the point in the page lifecycle where the page’s important content has likely loaded. Although this is based on an assumption that the most important element of the page is the largest one visible in the user’s viewport. If the content has been rendered above and below the visible region(fold), only the one above is taken into consideration — the part which is visible to the user.
Total Blocking Time (TBT)
TBT is a metric that helps quantify the severity of how long a web page takes to be interactive. TBT measures the time between the first paint and Time to Interactive (TTI). A lower TBT is an indicator of good performance.
Cumulative Layout Shift (CLS)
CLS examines how unstable the website elements are. It highlights how often users experience unexpected layout shifts (reflows) and their impact on the overall user experience.
Let’s have a look at how unexpected layout shifts can have a negative impact on the UX.
The speed index measures how quickly the page contents are visually filled. This score is computed based on the visual progress yet it is merely a calculation. As this metric is concerned on the visual perspective, the viewport size has a direct impact on the speed index. Therefore you need to define your viewport sizes to match your target audience to get a more meaningful score.
CPU time spent
This metric reveals the time the main thread is blocked. It shows how often and how long the CPU/main thread is blocked for tasks such as painting, rendering, scripting and loading. If your web application has a high CPU time, it would give the user an unpleasant laggy experience. Can be calculated with the help of WebPageTest.
Component-Level CPU Costs
Can be implemented with the help of Puppeteer.
When a user gets frustrated, they leave your web page. All of the above-discussed metrics focus on individual events. But the frustration index by Tim Vereecke concentrates on the gaps between metrics instead of looking at them individually. This metric takes a look at the key milestones in the page and calculates the level of frustration the user will endure during the page load, as a score.
This is a key performance indicator for user experience as it wholely focuses on the user.
Ad Weight Impact
If your web site has advertisements to generate revenue, it is essential for you to know the extra burden it would cause the user as it can degrade the performance of your web page. A script created by Paddy Ganti helps you find out the weight of your ad-related code.
We spoke about a lot of different metrics. But one of the issues with all of the above metrics is consistency. The variance in your results shows how reliable your web site is across the network. This would also signify as to how much attention you must give to your system and infrastructure to provide a streamlined service. Specific pages can give a bigger variance due to some external scripts which are pretty unreliable. As Vitaly says, it is also a good idea to keep track of the browser versions supported to get a better idea on performance.