Core Web Vitals – Essential Metrics for Publishers

What are Google’s Core Web Vitals?

In May 2021, Google announced that they are going to roll out the official ranking factor change – Core Web Vitals. Typically, when Google publishes an update that affects search rankings, it’s all about content. In this case, the update is about a better user experience on your site in terms of speed of loading, reliability, and responsiveness. 

Today, we’re going to interpret the specifics of Core Web Vitals and help you understand how your search rankings will be affected.

The Metrics Explained

Core Web Vitals are a set of particular factors that Google deems important in a webpage’s user experience and the metrics will progress over time. 

So far, Google has defined three main criteria, which publishers and developers need to focus on to improve page experience rankings: largest contentful paint, first input delay, and cumulative layout shift.

  • Largest Contentful Paint (LCP): This represents the time it takes to load the main content of a website in seconds. Focus on making your LCP score of 2.5 seconds or faster.
  • First Input Delay (FID): The emphasis here is on assessing the time it takes for a web page to become interactive. Focus on bringing the FID score down to less than 100 ms.
  • Cumulative Layout Shift (CLS): This explains the impact of unexpected layout changes for visual page content. Focus on bringing the CLS score down to less than 0.1.
Source: Google

In summary, Core Web Vitals are a group of variables that will be an aspect of Google’s “page experience” score.

How to measure Core Web Vitals?

To measure your website’s Core Web Vitals you can use all of Google’s popular web developers tools to help you more easily diagnose and fix user experience issues if any. This includes Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev’s measure tool, the Web Vitals Chrome extension, and the latest Chrome UX Report API.

Source: Google

Check out the information that the tools will provide you with. This way you can detect errors faster, and you will be able to start fixing them right away.

Why are web vitals important?

Whether your focus is on ad monetization, growing your SEO rankings/organic web traffic, or both, page speed, and most importantly, page experience signals count.

The Core Web Vitals are set to take effect in 2021. The clock is ticking and the earlier you patch the corresponding page experience signals, the better.

Explore your site’s performance and see if you can determine some easy wins to get our site(s) up to speed. You can miss out on serious ad revenue and lose your SEO rankings due to slow-loading web pages and/or ads.

Google can decide whether your page is loading quickly enough to keep users from bouncing. If this is not the case, you could face a ranking penalty and be replaced by a website that is loading correctly.

Also, focus on recognizing the time it takes for your ads to load. While not entirely what Core Web Vitals is focused on, it’s a vital SEO ranking factor. You’d be shocked at the impact that those little twitches will have on your digital publishing business.

Once you identify all the elements you need to improve, start fixing them to avoid your Core Web Vitals score to go down. Even more so, to not have a negative impact on your SEO rankings.

How to improve  

In this section, we will provide some tips on how to improve each of three Core Web Vitals.

  • LCP

As we mentioned above, LCP is the metric that presents how long it takes a page to load from the point of view of an actual user. It differs from other the pagespeed measurements like TTFB and First Contextual Paint and don’t necessarily represent what it’s like for a user to open up a webpage.

Furthermore, LCP focuses on what is really important when it comes to page speed, in other words the interaction with a web page.

To understand what needs to be done check the Google’s LCP guidelines

Google's largest contentful paint guidelines
Source: Google

An ideal situation would be that every page of a website hits LCP within 2.5 seconds. This is a real challenge for large web pages and ones loaded with features.

After all that said, here are some things you can do to improve your site’s LCP:

  • Minify your assets to reduce their size;
  • Use a Content Delivery Network (CDN) to reduce your page’s resources download time;
  • Benefit from HTTP Caching by adding Cache Headers;
  • Initialize your page’s header area before the other parts (such as the footer and the lower sections);
  • Minimize the number of render-blocking external stylesheets;
  • FID

Let’s take a look at Google’s second Core Web Vital: First Input Delay. It measures the time it takes for a user to actually interact with your page. Just like LCP, Google have a set of specific criteria for FID

Google's first input delay guidelines
Source: Google

It detects and measures how long it takes for an action to occur on a page. So it is related to the page speed score. But it goes a bit further than that and measures the time it takes for users to take a specific action on a web page.

For pages that are 100% content, FID probably isn’t a big deal, as the user engagement goes as far as scrolling down the page. Yet, for contact us, a login page, sign up page, or other page where users need to quickly click on something, FID is quite important. For a login page, for example, the time it takes to load the content is not that important. However, what matters is how fast a user can start typing their login info. 

With that in mind, here are some tips to boost the FID scores of your web page.

  • Minimize (or defer) JavaScript: It’s almost impossible for users to interact with a page while the browser is loading up JS. So minimizing or deferring JS on your page is key for FID.
  • Exclude any non-critical third-party scripts: Just like with FCP, third-party scripts (like Google Analytics, heatmaps etc.) can negatively impact FID.
  • Apply a browser cache: This helps load content on your page faster. Which helps your user’s browser blast through JS loading tasks even faster.
  • CLS

Cumulative Layout Shift is the metric that shows how stable a page is when it loads. To put it simply, if elements on your page move around as the page loads, then it is more likely that the CLS scores high. It can also lead to accidental clicks by web users, and that can have a bad impact on your web vitals score.

This metric is of high priority for digital publishers as it measures web pages’ layout and overall stability. Same as the previous two, Google has in place basic requirements for CLS

Google's cumulative layout shift guidelines
Source: Google

Here are some actions to take to minimize CLS:

  • Use set size attribute dimensions for any media (video, images, GIFs, infographics etc.): That way, the user’s browser knows exactly how much space that element will take up on that page and won’t change it on the fly as the page fully loads.
  • Ensure all ads have a reserved placement to avoid them of suddenly appear on the page and push the main content around;
  • Minimize layout shifts for multi-size ad slots via reserved space for the largest size configured to serve. Another option is to reserve space for the size most likely to serve, determined by examining historical fill data from Google Ad Manager reporting;
  • Configure new UI elements below the fold, so they don’t push content down that the user expects to stay where it is; 

Final Thoughts

Core Web Vitals will roll out in 2021, we highly suggest to take your time and start to improve your website’s performance to avoid surprises in your rankings and therefore traffic. 

These updates are all about getting a better web experience for everyone. Use the suggested recommendations, check out the Google Search Console, or use the alternative methods listed above to help you find hiccups faster and you’ll be able to start fixing them right away.