Web Vitals from Google to Measure User Experience
Vital measurements for User Experience from Google, affecting page rank for websites.
There are many ways to optimize the user experience of websites. But knowing the best and optimal method from the beginning can save time and cost drastically.
Google introduced Web Vitals to measure websites’ user experience and use those measurements as part of their ranking algorithm. To get a better understanding, let’s see what those Vitals are.
Core Web Vitals & Web Vitals
You don’t need to be an expert in any area to understand Web Vitals. They are simple things like mobile-friendliness, browsing safety, HTTPS, interactivity, visual stability, loading time, etc.
Out of these Web Vitals, Google has identified three main measurements as Core Web Vitals common across all types of websites.
- Largest Contentful Paint (Loading Performance)
- First Input Delay (Interactivity)
- Cumulative Layout Shift (Visual Stability)
Let's take a look at the Core Vitals in detail.
LCP - Largest Contentful Paint (Loading Performance)
LCP measures the loading speed of the web page from the point of view of a real user. It’s the time duration between the first point of page load and the point where the viewport’s largest content is rendered.
In other words, LCP measures the rendering time duration taken by the visible area on your web page.
Let’s compare the LCP of a medium article with and without images.
Article with the image took 3.57 seconds to lead, while the article without the image took only 2.32 seconds to load.
Google insists all developers and product owners measure those Core Web Vitals of their applications regularly and provided tools to assist the measurements.
FID - First Input Delay (Interactivity)
FID relates to the interactivity between user and web page. It measures the time duration, starting from the first user interaction until the point where the browser responds to that action. These user interactions can be a button click, link click, or any JavaScript-based custom control.
According to Google benchmarks, optimal time durations for interactivity should be below 100ms while anything above 300ms is considered poor.
One can argue that these time gaps are tiny and make no difference by adjusting a few hundred milliseconds. But in reality, these slight changes could significantly impact end-users.
CLS - Cumulative Layout Shift (Visual Stability)
Sometimes you may have noticed movements of elements in web pages when they load, and I’m sure that it’s not the best user experience you look for. CLS comes in handy in such scenarios to measure the performance of web pages.
CLS shows how many times the components moved here and there while the page loads. As you all can understand, CLS needs to be on the minimum side to achieve a good user experience.
The following image shows the CLS difference between medium.com and site, which is not visually stable.
In the above example, medium.com showed a CLS of 0.097.
Does that mean the medium.com home page shifted 0.097 times on load? → NO!!!
This value is calculated considering the viewport size and the movement of unstable elements in the viewport between two rendered frames.
layout shift score = impact fraction * distance fraction
CLS values (layout shift score) can easily be calculated using the above equation. The impact fraction in this equation refers to the impact of unstable elements on the viewport, while the distance fraction refers to the distance that unstable elements have moved.
For example, let’s assume that an unstable element covers 40% of the total viewport size, and it moves 20% down when the page loads. In this case, the impact fraction will be 0.6 since the unstable element has utilized 60% of the total viewport. The distance fraction will be 0.2 since the unstable element moved 20% downwards.
So, the final layout shift score = 0.6*0.2 = 0.12
Tip: Share your reusable components between projects using Bit (Github).
Bit makes it simple to share, document, and reuse independent components between projects. Use it to maximize code reuse, keep a consistent design, collaborate as a team, speed delivery, and build apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
I think now you have a good understanding of Core Web Vitals and their duties. So, now it's time to learn how to measure them.
Measuring Web Vitals is Way Easier Than You Think
As I mentioned initially, measuring Web Vitals is a straightforward process, and anyone can do it. In fact, there are many tools that you can use to measure Web Vitals, including browser extensions.
Lighthouse, Chrome DevTools, PageSpeed Insights, Chrome UX Report, and Web Vitals Extension are top in the list.
Although these tools serve the same purpose, they can be further divided into 2 groups as Lab testing tools and Field testing tools.
Lab Testing Tools
The lab tools’ primary purpose is to test performance alongside the development process to ensure the required benchmarks before release. Chrome DevTools and Lighthouse can be used to measure Core Web Vitals in the development environments.
But these lab tools can’t measure FID since there are no end-users to calculate interactions. Instead of that, these tools use an equivalent measurement called Total Blocking Time (TBT).
The below image shows the performance test result of a web page using Lighthouse:
Field Testing Tools
Lab testing tool results can not be 100% accurate since real users are not interacting with the webpages. Field testing tools can be used to fill this loophole. Besides, unlike lab testing tools, field testing tools can measure all 3 Core Web Vitals as it is.
PageSpeed Insights, Chrome UX Report, and Web Vitals Extension are some field testing tools we can use to measure Core Web Vitals when real users interact. These field testing tools anonymously collect real-time data from webpages allowing us to check Vitals without running anything manually.
Let's assume that you have measured the Core web Vitals of your website, and the results are not as promising as you expected. So, what can you do to improve those scores?
Steps to Improve Web Vitals
Since you know how to measure Web Vitals now, let’s see how you can improve your website if there are gaps.
As you all know, technical fixes for performance-related issues are not that simple. Most of the time, they are complicated and time-consuming. However, there are general guidelines you can follow to improve these Core Web Vitals.
You can improve the LCP of your website by:
- Remove or avoid using large page elements that take too much time to load. You can easily find these elements and their impact by analyzing results from the measuring tools we discussed earlier.
- Avoiding unnecessary 3rd party JavaScript libraries. Following analysis showed that usage of 3rd party libraries had blocked the main thread for 2700ms.
- By setting up lazy loading & deferring offscreen images.
- Reducing server response time.
Similar to LCP, There are a few simple things you can follow to improve the FID values of your website:
- Using efficient caching policies to load page content faster.
- Similar to LCP, you can enhance FID values by committing out unnecessary JavaScript libraries.
- Minimizing will improve page load time, and users will be able to interact with the page instantly.
The final measurement of Core Web Vitals is CLS, and you can improve CLS scores by:
- Using fixed dimensions for images and videos.
- If your website is displaying ads, make sure to leave the necessary space for them.
Conclusion
I hope you have understood the importance of maintaining good Web Vitals for your websites. These measurements provide the much-needed support to keep your site user friendly.
Although these measurements are highly promising, there can be scenarios where you need to improvise and go beyond these measurements to ensure the user experience you need. Therefore, watch out for those.
Thank you for Reading!!!
