• Home
  • /
  • Blog
  • /
  • Core Web Vitals UX: Google’s Metrics For Measuring User Experience
You may have heard lately about the core web vitals from Google, which was formerly known as the page speed report. This is similar to the old speed report, but it includes new key metrics that are geared towards better UX. 

So, in today’s article, Core Web Vitals: Google’s Metrics For Measuring User Experience, we will be talking about core web vitals, what this is, and the new key metrics that you should be eyeing on.


What are the core web vitals?

Google’s core web vitals are a new addition to the search engine’s overall page experience score, which is a means to help improve a website’s overall UX. 

The core web vitals sets specific factors that Google considers important in a website’s UX. These web vitals factors are made up of three specific page speed and user interaction measurements: largest content contentful paint, first input delay, and cumulative layout shift.

If you head over to your Google Search Console account, you can find your site’s core web vitals data under the “enhancements” section as shown below:



Why are core web vitals important?

On the Google Search Central Blog, Google announced their plans of making page experience an official Google ranking factor.  

Google further explained that these new web vital metrics will be added to the existing metrics for page experience to provide a holistic web user experience for the searcher. 

Google’s page experience consists of several factors that Google considers vital for better UX. This includes the following:

  • HTTPS
  • Mobile-friendly
  • Lack of interstitial pop-ups
  • Safe-browsing (no malware)

The new core web vitals will play an important role in the above metrics. In fact, the core web vitals may be one of the biggest metrics that Google will consider when it comes to page experience score. 

However, also note that a great user experience score alone won’t be enough to rank you on the number one spot in Google. 

There are approximately around 200 ranking factors used by Google to rank websites in search results.

The good news is Google also announced that the changes in the page experience score won’t be rolled out not until next year and there will be another announcement from them within 6 months before the rollout. This will give plenty of time for everyone to improve their web sites based on the new UX core web vitals metrics from Google. 

If you are interested in starting to make changes to your web site, great. Because in the next section, we will be outlining Google’s three core web vitals metrics with tips on how you can improve them. 


The 3 core web vitals

As we initially explained, Google’s web vitals core will be the requirements to fulfill customer expectations. According to Google, the core user experience needs loading, interactivity, and visual stability. And the metrics used for these page experiences are the following:

  • Largest Contentful Paint
  • First Input Delay
  • Cumulative Layout Shift


Largest contentful paint (LCP)

LCP measures the load speed and identifies the point in the page load timeline as to when the page main content is likely to load. It is suggested that LCP should load happen within 2.5 seconds to load the page. 

For most users, you can have 75 percentile of mobile and desktop loads to be able to measure the page loading time and to ensure that you meet this requirement. 

The following are the elements considered under the Largest Contentful Paint API:

  • <img> elements
  • <image> elements inside an <svg> element
  • <video> elements (the poster image is used)
  • An element with a background image loaded via the url() function (as opposed to a CSS gradient)
  • Block-level elements containing text nodes or other inline-level text elements children


First input delay (FID)

FID measures the responsiveness and the user experience delay when it comes to interaction with the page first. It is suggested that the pages should have an FID of under 100 milliseconds in order to provide a good user experience. 

Again, the 75th percentile of mobile and desktop loads is a good basis to measure your FID. The FID serves as the user’s first impression of the response time made on your web site. Additionally, first impressions are very important in forming the overall impression of the quality and reliability of a web page. 

FID as mention, measures the response time of a page during loading. Because of this, it focuses mainly on the input events alongside specific behaviors like clicks, swipes, and button presses.


Cumulative layout shift (CLS)

CLS measures visual stability and the amount of unexpected page content layout shifts. For a better user experience, your pages should have a CLS below 0.1.

To further explain what CLS actually means, layout shifts occur when existing elements change their starting location. Like for example, the right and left positions in the default writing mode change positions between two frames. These elements are considered unstable. 

CLS does not count if the element changes its size or if a new element is added, as long as the elements do not change the starting position of the other visible elements. You can refer to the photo below to better understand CLS:



How to measure the three core web vitals

Tools you can use to measure the core web vitals

Let us explore the ways where you can measure the web vitals core. There are so many available tools in Google that you can utilize to measure these metrics. The following tools are:


Chrome User Experience Report

The Chrome User Experience report shows how Chrome users experience the website in the real environment, thus, capturing the core web vitals. You can use the PageSpeed Insights and CrUX dashboard, or you can customer reports and check out granular metrics using BigQuaery trades. You can also use API to integrate with other applications. 


Page Speed Insight

The PageSpeed Insight offers an easy and interactive way to check the vitals core web. You just need to place the URL into the search box and you will be redirected with the recent performance distribution, which is available for both desktop and mobile performance. 


Google Search Console

The Google Search Console can also generate reports for the vitals core web. To use this, just head over your GSC dashboard and click on the core web vitals under the enhancements section. 


GTMetrix

GTMetrix is a general web performance tool that you can use to take further steps in measuring your core web vitals. 


Other tools

Some other tools you can also use include Lighthouse and ChromeDevTools. However, these two cannot measure the FID metrics. You may also try Web Vitals Chrome extension. 


Measuring largest contentful paint (LCP)

As discussed, LCP measures the time a page loads from the point of view of an actual user in the real world. This means, when the link is clicked, LCP begins to measure the time it takes for someone to see the majority of the content on screen.

You need to also understand that LCP is different from other page speed measurements, in which many of these metrics do not necessarily represent how it is like for a user to open a webpage.

LCP is more about knowing what really matters in terms of page speed, which is providing the user a chance to see and interact with the page as soon as possible. 

A tool you can use to check your LCP score is Google PageSpeed Insights  

Check LCP on Google PageSpeed Insights

The Google PageSpeed Insights is very helpful when it comes to checking the areas that need improvement. You also get to see your page’s performance based on Chrome browser data. 

What you want to look more into when interpreting your LCP data is your Search Console.

<image>

The reason for looking more at your GSC is like PageSpeed Insights, the data in your Search Console comes from Chrome User Experience Report. 

However, unlike PageSpeed Insights, you can see LCP data of your entire website. Instead of looking at only random pages one by one, you can see a list of URLs that are good, bad, etc. 

You need to get familiar with the LCP guidelines, which are broken down into three parts: Good, Needs Improvement, and Poor


First Input Delay (FID)

The next metric is the FID, which is all about user interaction on the page. FID measures the time it takes for the user to interact with your page. Examples of these interactions include:

  • Choosing an option from a menu
  • Clicking on a link in the site’s navigation
  • Entering your email into a field
  • Opening up “accordion text” on mobile devices

FID is considered important because it takes into account how real users interact with web pages. FID also provides criteria for what is an acceptable FID

FID is in a sense a page speed score as it technically measures how long it takes something to happen on a page. However, FID goes one step further and also measures the time it takes for users to do something on the page. 

You can also use the search console to look at your FID report. For heavily content-based sites, FID is not huge of a deal as the only interaction is mostly scrolling down the page or zooming in and out. 

On the other hand, web pages with login pages, sign up pages, or anything that users need to quickly click on, FID is a big deal. 

For pages with sign up and log in features, the time it takes the page to load is not important. What is more important is how quickly the user can start typing on the login and sign up sections. 


Cumulative Layout Shift (CLS)

CLS measures how stable a page as it loads, which points out to visual stability. CLS in other words, if the elements on the page move around as the page loads, then CLS is high, which is a bad sign.

Make sure that your page is stable when it loads up. This way, users do not have to be confused relearning where your links, images, and other elements are when the page loading is complete. Another bad user's experience is when users click something by mistake because the elements on the site are unstable. 

Below are the criteria of CLS



Final thoughts

With Google’s core web vitals being implemented in the near future, we can see a huge shift in how UX is taken into account when it comes to ranking websites for search. For business site owners, digital marketers, SEO, and web developers, the same tactics and strategies can be applied as before, but with an addition of an extra element, that is the good user experience. 

Improving user experience based on the core web vitals will mean that you need to ensure that the pages load faster, the codes are clean, and the interface should be better functioning than before. 

To sum up, you need to have your checklist to meet the minimum requirement for the different metrics that are under the core web vitals:

  • Try to understand the core web vitals in order to properly measure the important factors that you will need to improve the user experience on your page. 
  • For agency site owners, SEO professionals, and digital marketers, it is very important to also explain the core web vitals to your clients so they know its importance and how it affects their websites and ranking
  • Properly track, measure, and audit everything so you can provide the right results and make the right changes

Remember, the pending release of the core web vitals from Google aims to reward the end-users with a better user experience. Expect that Google will bring in constant changes to its products geared to better UX, especially their search engine. 

Mary Ann Dalangin

About the author

A content marketing strategist and a UX writer with years of experience in the digital marketing industry.

Leave a Repl​​​​​y

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Userpeek

COMING SOON

We are on a misson to build the ultimate Remote User Testing Solution.

For UX Professionals, User Researchers, Growth Hackers, CROs and Product Managers.

Join our private Facebook Group to gain early access.
 
Join Facebook Group
close-link