As digital penetration continues to grow and people switch to the web for almost every query, developers, SEO experts, UI & UX designers, have all been focusing on enhancing the user experience. It simply means the experience of a user when using a product with keen focus on usability and accessibility.
Why User Experience Matters?
A bad user experience attributes to a high bounce rate. In extreme cases, users may not even return to the website. Reports suggest that if page load time, one of the key metrics for a good user experience, increases from 1 to 3 seconds, bounce rate increases by 32%, and by 106% if it increases to 6 seconds.
Over the years, Google has empowered developers with several tools to measure and report the website performance. Even then, improving the user experience can become challenging. To simplify the landscape and focus on a few key metrics, Google has introduced web vitals.
Web Vitals
On May 5, 2020 Chrome introduced Web Vitals, an initiative by Google to improve the user experience. Web vitals consist of an array of performance metrics that are essential for a great user experience on the web. To focus on the key metrics, Google introduced Core Web Vitals. Termed an essential metric for a healthy site, core web vitals will help the owners of a site to understand and quantify the user-friendliness of a site and quickly identify opportunities for improvement.
So, let us dive in deeper.
What are core web vitals?
Core web vitals provide a clear set of foundational metrics for website developers to help build and improve online experiences. Optimizing the website to speed, visual stability, and interactivity are at the heart of a good user experience.
Each metric focusses on a specific aspect of user experience. These metrics will be introduced across a variety of tools like lighthouse, chrome dev tools, and page speed insights.
With this announcement, the speed report on Google search console is now christened Core Web Vitals. Expected to evolve over time, the current set of core web vitals majorly includes the following metrics:
- Largest Contentful Paint which measures the perceived page load speed and marks the point when the main content of the page is lightly loaded.
- First Input Delay which measures the responsiveness and quantifies the user experience during the first interaction.
- Cumulative Layout Shift which is a measure of the visual stability and quantifies the extent of layout shift of the visible page content.
As the web continues to evolve, so does the effort to create a perfect user experience. With Google now including Core Web Vitals for evaluating the page experience, it only makes sense to understand the metrics and be able to measure them for actionable insights.
Largest Contentful Paint
Understanding how quickly the main content on the page loads has always posed a challenge for developers. With LCP to the rescue, much like First Contentful Paint (FCP), developers can understand the time required for the main content on the web page to be readable for the user.
FCP clocks in the time required for the any part of content to be displayed once the page starts loading. LCP, on the other hand, is a measure of the time required for the largest constant element to render. For a good user experience, LCP occurrence should be within 2.5 seconds.
In the image below, the FCP occurs in the second frame because that’s when the first element is rendered. The LCP occurs in the third image as that’s where a major part of the elements is loaded. This becomes the key distinguisher between the two.
First Input Delay
FID is the measure of time between the first interaction of the user to the time the web page can respond to it. When we interact with a web page, we expect that the elements would start loading right away. Often, this isn’t the case. This happens when the browser is already processing an existing request.
Long FID generally occurs between FCP and TTI. This means while some elements on the page may have loaded, the page isn’t interactive yet.
TTI stands for time to interactive and as the name suggests, measures the time required for the page to load completely and become capable of responding to the user input.
For a good user experience, the FID score should be less than 100 milliseconds.
Cumulative Layout Shift
This is something we are all familiar with. Sometimes, when we are interacting with a page, say reading a blog, the text suddenly moves, and you feel lost. Or maybe you are about to tap a link and you inch closer, it suddenly disappears. It makes for a bad user experience. Such random shifts can be frustrating but can also be damaging in some cases.
What is Cumulative Layout Shift (CLS)?
CLS measures the sum of all individual layout shift scores for every unexpected layout shift that may occur during the entire lifespan of a page. A layout change simply refers to any random movement of elements from one frame to another.
The CLS metric helps us understand how often layout shift occurs and address the issue before on time. For a good user experience, the CLS score for a website should be less than 0.1
The metric can be measured in the lab or in the field using the following tools:
Field tools
Lab tools
Conclusion:
To summarize, core web vitals are a set of real-world metrics which consider the key factors of user experience. They measure the overall stability by measuring the load time, visual stability, and interactivity. While LCP and FID essentially focus on the load speed of your page, CLS gives an understanding of the stability of elements on the page.
A Google study of over a million pages revealed that when a site meets the core web vitals metric expectations, users are 24% less likely to abandon the page before it loads completely. For all we know, users on the web are like travelers on a journey. It is not just the destination that matters but the journey as well. Nobody enjoys a bumpy ride. So, hover over to the tools, check the health of your website, and take the necessary steps to create a seamless user experience.
Soon after the announcement of web vitals, Google swiftly revealed its intention to consider page experience as a ranking metric. Although this isn’t due until 2021, it does re-emphasize the significance of a well-structured and healthy website.
