Home Technical Articles How to Measure My Site’s Core Web Vitals
Applications

How to Measure My Site’s Core Web Vitals

About The Author

Outline

Original source: Layer0

In April 2021, Google began rolling out the Page Experience Update which includes a ranking algorithm change favoring top-performing web pages in the search results. Performance is based on a website’s Core Web Vitals, a web page metrics that greatly impact the user experience.

Read on to quickly understand whether your site passes or fails Core Web Vitals.

What are Core Web Vitals

As part of Google’s effort to create a faster Web for all, the Chrome team has been working to standardize a set of metrics to measure how users experience the performance of a page. Core Web Vitals has become a major piece in solving this performance puzzle; these metrics focus on loading, interactivity and visual stability.

The following metrics make up Core Web Vitals:

  • Largest Contentful Paint (LCP): Measures when the largest content element is fully visible on the screen. LCPs of 2.5 seconds or less is considered good loading experiences.
  • First Input Delay (FID): Measures the time from when a user first interacts with a page (click or taps) to the time when the browser is actually able to respond to that interaction. FIDs of 100 milliseconds or less is considered good interactive experiences.
  • Cumulative Layout Shift (CLS): Measures how often users experience unexpected layout shifts. CLS’ of .1 or less is considered a very visually stable experience.

To pass Core Web Vitals, each of the above metrics needs to hit the recommended target for 75% of all users who visit your page, segmented across mobile and desktop devices.

How to Measure Core Web Vitals

When a site passes Core Web Vitals, users are 24% less likely to abandon pages. That being said, any website owner can and should measure these metrics. The easiest way to check if your site passes its Core Web Vitals is through PageSpeed Insights.

1. Go to https://developers.google.com/speed/pagespeed/insights

2. Type your website URL into the search box, press Analyze and wait 5-10 seconds

PageSpeed Insights analyzer

3. Scroll down to the Field Data. Immediately, you will see whether or not your site passes or fails the Core Web Vitals assessment in the text above the bar charts.

Field data

4. To assess the Core Web Vitals metrics, pay attention to the LCP, FID, and CLS measurements, still under field data. The blue bookmark symbol also marks these.

Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS)

5. Check your average scores. LCPs of 2.5 seconds or less, FIDs of 100 milliseconds or less, and a CLS of .1 or less are considered good user experiences.

Average metric data

6. To determine whether you pass a single Core Web Vital metric, check the percentage in the green bar. If it’s 75% or higher, you pass. This means your web page delivers a good user experience for that particular metric at least 75% of the time someone visits it.

Core Web Vital threshold – 75th percentile

Ignore Lab Data

There are both lab and field data on the PageSpeed Insights page. Field data is from real users who actually load and interact with your page. Lab data is measured with a controlled test under ideal conditions and does not capture real-world bottlenecks (ie. device, network conditions, settings, etc.).

Google does not use lab data or the Lighthouse performance score to rank your site. Rank is only based on the field data shown in the image below.

Rank is based on Field Data

How to Improve Your Core Web Vitals

You are likely not passing Core Web Vitals due to several reasons. PageSpeed Insights offers audits for LCP and CLS. While FID is not included, the optimization that improves Total Blocking Time (TBT) should also improve FID in the field.

To see your audit, follow the steps below:

Scroll down to the Opportunities section of the page and see Audits for specific metrics.

PageSpeed Insights opportunities

2. Click on the metric you want to improve and you will access more in-depth techniques for improving load times, interactivity, or visual stability on your web page.

PageSpeed Insights audits

Generally, there are a few common reasons why a Core Web Vital fails.

The Largest Contentful Paint is easily affected by the following factors:

  1. Slow server response times
  2. Render-blocking JavaScript and CSS
  3. Long resource load times
  4. Client-side rendering issues

First Input Delay is impacted by:

  1. Long tasks that block the main thread for 50 milliseconds or more
  2. First-party script execution delaying interaction readiness
  3. Heavy JavaScript execution time

Visual instability, or Cumulative Layout Shift, is an issue when:

  1. An image, video, or ad resizes itself
  2. Font loads late and is displayed larger or smaller than intended

For solutions on how to fix each of these issues, see this Core Web Vitals Optimization blog.

Prep Your Site for a Good User Experience

By August, Google will completely change the page experience update ranking. If your site passes Core Web Vitals, you will see higher SEO and lower bounce rates. More importantly, you will deliver an exceptional experience that satisfies your users enough to stay and return.

Layer0 built a free tool to track, measure, and optimize your Core Web Vitals. Your site doesn’t need to be hosted on Layer0 to take advantage of these analytics. It’s yours with just a script tag.

Guide to Iceland, Iceland’s largest travel website, failed all three metrics before coming onto the Layer0 platform. Its site speed has improved by 55% and passes Core Web Vitals with flying colors.

If you have questions about the Page Experience update or how to speed up your site, get in touch with a site speed expert today. If you’re ready to try out the platform, sign up here!