You should optimize your web pages for a seamless user experience. But how can you measure the quality of user experience on a site? That’s where Core Web Vitals come in.

 

Core Web Vitals are a set of metrics used to assess how users experience a webpage. They measure dimensions of the website such as load time, responsiveness, and interactivity. 

 

Google gives importance to UX, and Core Web Vitals are a part of enhanced UX. Therefore, improving the Core Web Vitals score of your website helps to improve the SEO. 

 

In this article, I will discuss what Core Web Vitals are, how they impact SEO and share the different ways to improve Core Web Vitals metrics to boost UX.

 

Let’s begin!

 

How/Where to Find Core Web Vitals Report?

 

The Core Web Vitals report indicates the performance of your web page based on real-world usage data. It shows URL performance grouped by status, metric group, and URL group (Group of similar web pages)

 

Google provides you with several ways to measure Core Web Vitals’ performance. These include:

 

  • Google Search Console
  • PageSpeed Insights
  • Chrome DevTools

 

Here’s how to use these tools to measure the Core Web Vitals score.

Core Web Vitals Report in Google Search Console

You can evaluate your site’s Core Web Vitals via the new report in Google Search Console. 

 

To find the report, go to “Core Web Vitals” under “Experience,” as shown in the image below.

 

core web vitals in google search console

 

There are two distinct reports, one for mobile and one for desktop.

 

moble and desktop reports in search console

 

In each report, you’ll find data about URLs and their performance. 

 

core web vitals report

 

This is ideal because you’ll find information about your whole website, instead of just one page. From the report, you can identify web pages that require attention. 

 

For instance, in the below screenshot, you can see there are no pages with LCP issues.

 

lcp issue on mobile

 

You can click on the URL to see all the similar URLs that have the same error(s).

 

However, some URLs might be omitted from this report for lack of enough data to report. This happens when your site is brand new or has few landing pages.

Core Web Vitals in PageSpeed Insights

You can also assess Core Web Vitals report via Google’s PageSpeed Insights (PSI). This report is based on the Chrome User Experience Report (CrUX) data. 

 

In this report, you’ll also find additional information about elements affecting the Core Web Vitals metrics. PSI also provides you with suggestions for improving the Core Web Vitals score.

 

To get your page speed, simply enter your website URL in the given box and hit the “Analyze” button.

 

google page speed insights

 

Now, the tool will display the Core Web Vitals result for both desktop and mobile, as shown in the image below.

 

pagespeed insights check

pagespeed insights check 2

 

Along with the issues, PageSpeed Insights also provides you with various optimization opportunities, as you can see in the image below.

 

pagespeed recommendations

Web.dev

The updated Chrome dev tools allow you to find and fix visual instability issues on a page. 

 

Besides, these tools also measure Total Blocking Time (TBT). 

 

TBT is displayed in the bottom left corner of the window. 

 

Follow the following steps to analyze web core vitals using ChromeDev tools.

 

  • To open Dev Tools, right-click your mouse, select “More tools,” and click on “Developer tools.”
  • Navigate to the Performance tab.

 

chrome dev tools

 

  • Click on the record button and reload the page.

 

record button in dev tools

 

  • Once the page has reloaded, stop the recording.
  • You’ll see details of the different metrics.

 

chrome dev tools results

 

Core Web Vitals and Their Impact on SEO and Google Ranking

 

Core Web Vitals are essential for SEO as they give you a sense of how users experience your site. 

 

When visitors have a flawless experience on your site, they are likely to return, and they are also likely to recommend the website to their friends. 

 

Similarly, if the web page is unresponsive and full of pop-ups, they won't visit the site again.

 

Hence, Google prefers sites that deliver a good experience, and Core Web Vitals measure the impact of UX on your site.

 

Components of Core Web Vitals

 

Here are the major components of Core Web Vitals:

Largest Contentful Paint (LCP)

This is one of the metrics you can use to measure user experience. LCP measures the loading time. More specifically, it measures the time it takes to render the largest content element visible to the user's screen. 

 

Your webpage needs to load fast to create an enjoyable user experience. As you already know, pages that load faster have a higher SEO ranking. Besides, load time also impacts engagement and conversion rates. So, what does LCP measure?

 

Depending on the page elements, this is what LCP considers:

 

  • Images
  • H1
  • Blocks of text
  • Video poster images
  • Background images loaded within the URL() function.

 

What Factors Affect LCP and Cause a Low Score?

 

  • Slow server response times: Slow server slows the load time and increases the LCP score since it takes longer to render the images on the screen.
  • Render blocking JavaScript and CSS: If JavaScript and CSS are blocked, the content requested will take long before being displayed.
  • Slow resource load times: Images, videos, and other files can also affect load speed and LCP.

Cumulative Layout Shift (CLS)

You need to ensure that users find it easy to engage with links and buttons on your site for higher conversions. 

 

CLS is a metric that measures the visual stability of a page. It helps to identify links or buttons that shift after loading a webpage. It also shows the levels of difficulty users will experience when engaging with your site.

 

For sure, you'll be frustrated if a webpage shifts elements while you're reading or interacting with it. 

 

CLS helps prevent this by letting you know if images or links shift on a page after loading. This helps decrease bounce rates and also improves sales and user experience. 

 

Google multiplies the impact fraction (the percentage of the viewpoint that shifted) by the distance fraction (how far the elements moved during the shift) to calculate your CLS score.

First Input Delay (FID)

FID is a metric that measures time latency. This is the time between the first user input on a website, e.g., a click, a swipe, or a tap, and when the page responds. 

 

Delays can be frustrating to any online consumer. Therefore it is important to ensure your website is responsive to improve engagement and usability throughout the site.

 

How to Improve Core Web Vitals

 

Now that you understand the different components of Core Web Vitals let's look at each metric's ideal values/scores.

What are the Ideal Values/Scores for Core Web Vitals?

  • LCP: According to Google, an LCP of 2.5 seconds or less is good. If it's between 2.5 seconds and four seconds, the site needs improvement, and a score higher than four seconds is considered poor.
  • FID: To provide a good user experience, pages should have an FID score of 100 milliseconds or less. 
  • CLS: For an excellent user experience, a site should maintain a CLS of 0.1 or less.

How to Improve LCP

lcp loading time
Source

 

Here's how to reduce LCP that is longer than 2.5 s or 4 s on mobile and desktop.

 

Reduce Server Response Time and Improve The Time to First Byte

 

The slow server response is one of the causes of bad LCP. To measure the server response time, check the Time to First Byte (TTFB). 

 

Whenever you want to consume any web content, the browser requests it from the server, and TTFB measures the time it takes the browser to receive the first byte of information from the server. If you improve TTFB, you improve the response time.

 

You can reduce your server response time by upgrading to a high server. You can get in touch with your web hosting company to discuss the available options. 

 

Use a CDN

 

A CDN helps reduce time latency. If your web page visitors are located far from the server, it may take time before all the images, and other files are sent. This will increase both latency and the round trip time (RTT). 

 

RTT is measured in milliseconds and is the duration from when a browser sends a request to when it receives a response from a server. 

 

However, using a CDN, both time latency and RTT will reduce no matter where your users are.

 

Defer JavaScript

 

JavaScript files can cause a bad LCP score. However, if you defer JavaScript, the JS files will be processed only after parsing the HTML document and building the DOM tree. Because nothing will be blocking the process, the LCP metric will improve. 

 

Remove Unused JavaScript

 

Removing unused JavaScript is another way of eliminating the render-blocking resources. These unused JavaScript files block the browser from dealing with other pages load tasks. As such, this will delay your page's First Paint. So, removing unused JavaScript files will have a huge impact on your pages' performance. To find the list of unused JavaScript files, check the Google PageSpeed Insights report.

 

Optimize Your Images

 

To improve LCP, you also need to optimize images on your webpage. Ensure the images load well on both mobile and desktop. Ask your developers to scale down every image according to the requirements to avoid LCP issues.

How to Improve FID

fid loading time
Source

 

Here are the top ways to improve the FID score: 

 

Optimize Your CSS Code

 

CSS files should be downloaded and parsed to reduce their impact on FID. You can optimize CSS by removing unused CSS codes or minifying and compressing your files.

 

Optimize Your JavaScript Code

 

JavaScript tasks can block the browser’s main thread for an extended length of time. You can minimize the time JavaScript blocks the main thread by:

 

  • Breaking long tasks into smaller, asynchronous tasks. Keep your tasks under 50ms to be safe.
  • Minimize the amount of data that needs to be post-processed on the client side.
  • Explore the on-demand loading of third-party code such as tags or analytics. They often block the main thread.
  • Delegate some main thread work to web workers. This will reduce the workload on the main thread and improve FID.

 

Remove any Non-Critical Third-Party Scripts

 

Third-party scripts can have a negative impact on FID. Therefore, you should keep third-party scripts on your site to a minimum to have an excellent FID value.

How to Improve CLS

cls score
Source

 

Layout shifts can be discouraging and annoying. Here are some of the top ways to fix CLS issues:

 

Reserve Space for Ads, Embeds, and iFrames

 

Ads are usually loaded asynchronously and can result in a shift. You thus need to reserve space for them in advance. 

 

In some instances, the ad network doesn't deliver the ad. Don't collapse the container if this happens because it will cause a layout shift. Instead, use a placeholder.

 

Optimize Font Delivery (FOUT/FOIT)

 

Not optimizing your fonts can also lead to layout shifts. 

 

When a browser needs a font from the web browser, any element that uses the font will be hidden until the font asset has been fully downloaded. This is known as the flash of invisible text (FOIT). 

 

Browsers stay in this mode until the custom one loads, creating a flash of unstyled text (FLOUT). To prevent layout shifts resulting from different fonts, your site should load fewer font lines.

 

Size Dimensions for Media

 

One of the easiest CLS fixes is adding height and width attributes to images and videos. This lets the browsers know how much time to allocate each video or image in advance. 

 

If you don't add these attributes, the next image will shift to make way for it after it loads. You can find dimensions for the image or video you upload by opening DevTools and tapping through the element.

 

Disable Animations

 

You can create powerful elements with CSS/JS. However, they can cause layout shifts. If you must include animations, ensure that they provide context and continuity from state to state. Otherwise, avoid animations.

 

Conclusion

 

In sum, Core Web Vitals are the measurements that Google uses to evaluate the speed of a particular URL. Its core components are LCP, FID, and CLS, and these metrics measure different aspects of user experience. Because user experience is important in increasing sales and conversions, you should always strive to improve your scores.

 

Remember to use Google Search Console and PageSpeed Insights to monitor how your page performs. These tools will accurately reflect how users experience your site. Start optimizing your Core Web Vitals score to boost your SEO.