Performance

What is Google Core Web Vitals?

September 10, 2020

What is Google Core Web Vitals?


Core Web Vitals are a set of specific factors that Google considers important in the overall user experience of a web page. Core Web Vitals is made up of three specific measures of page speed and user interaction: paint with larger content, first post delay, and cumulative layout change.

In short, Core Web Vitals are a subset of factors that will be part of Google's "page experience" score (basically, how Google evaluates the overall UX of your page).

You can find the Core Web Vitals data for your site in the "enhancements" section of your Google Search Console account.

Why are the building blocks of the Web important?
Google plans to make the page experience an official Google ranking factor.

The experience of the page will be a mix of factors that Google considers important to the user experience, including:

  • HTTPS
  • Compatibility with mobile devices
  • Lack of interstitial pop-ups
  • "Safe browsing" (basically, no malware on your page)
  • And Core Web Vitals will be a very important part of that score.

In fact, judging from the ad and the name itself, it's fair to say that vital web building blocks will make up the majority of the page's experience score.

It's important to note that an excellent page experience score won't magically take you to number one on Google. In fact, Google was quick to point out that page experience is one of several (roughly 200) factors they use to rank sites in searches.

That said, there is no need to freak out. Google said it has until next year to improve its site's Core Web Vital scores.

But if you want to improve your Core Web Vitals score before then, great.

Because in this guide I'm going to break down the three fundamental elements of the Web. And show you how to improve each of them.

Largest Contentful Paint (LCP)


LCP is the time it takes for a page to load from a real user's point of view.

In other words: it's time to click on a link to see most of the content on the screen.

LCP is different from other measures of page speed. Many other page speed metrics (such as TTFB and First Contextual Paint) do not necessarily represent what it is like for a user to open a web page.

On the other hand, LCP focuses on what really matters when it comes to page speed: being able to see and interact with your page.

You can check your LCP score using Google PageSpeed ​​Insights.

In short, you want every page on your site to reach LCP in 2.5 seconds.

This can be a real challenge for large web pages. Or pages with many functions.

That is why the LCP on that page is 5.1 seconds (which is considered "poor").

That is not an excuse. But it shows that improving LCP is not as simple as installing a CDN. In this case, we may need to remove some images from the page. And clean the page code.

Hard work? Safely. Worth it? Definitely.

With that, here are some things you can do to improve your site's LCP:

Eliminate All Unnecessary Third-Party Scripts - Our recent page speed study found that each third-party script slowed down a page by 34ms.
Upgrade your web host: better hosting = faster load times overall (including LCP).
Set up lazy loading - Lazy loading causes images to only load when someone scrolls down your page. Which means you can achieve LCP significantly faster.
Remove large page elements: Google PageSpeed ​​Insights will tell you if your page has an element that slows down your page's LCP.
Minimize your CSS: Bulky CSS can significantly delay LCP times.

Cumulative Layout Shift (CLS)


Cumulative Layout Change (CLS) is the stability of a page while loading (also known as "visual stability").

In other words: if your page elements move as it loads, then you have a high CLS. Which is bad.

Instead, you want your page elements to be fairly stable as they load. That way, users don't have to relearn where links, images, and fields are when the page is fully loaded. Or click something by mistake.

Here are some simple things you can do to minimize CLS.

Use the dimensions of the size attribute set for any medium (video, images, GIF, infographics, etc.): That way, the user's browser knows exactly how much space that element will occupy on that page. And it won't change it on the fly since the page loads completely.
Make sure ad elements have a reserved space - otherwise, they can suddenly appear on the page, pushing content down, up, or to the side.
Add new UI elements to the bottom of the page - that way they don't push down the content the user "expects" to stay where it is.

Learn more

UX Basics: Core Web Vitals (and Google's "page experience" metric in general) are trying to quantify user experience. So the better your overall UX, the better your page experience scores. Google's "UX Basics" guide is an excellent manual.

Chrome Lighthouse Overview - A handy tool built into Google Chrome that analyzes why a page loads (or not) quickly.

Work With Us

Have a project? Create your website now.

We make high level websites