min read

Intro to Core Web Vitals

Written by

Search Historian

Edited by

Emanuel Skrobonja

TL;DR:

Core Web Vitals is a set of page experience metrics for page speed, interactivity, and layout stability

What are Google Core Web Vitals?

Core Web Vitals is a set of metrics that measure:

Loading - how fast your site loads,
Interactivity - how long it takes until your site becomes interactive
Visual Stability - how stable the site is while it's loading

Or as Google puts it:

Core Web Vitals is a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page.

The Core Web Vitals report is evaluated based on three metrics:

1. Largest Contentful Paint (LCP),

2. Interaction to Next Paing (INP)

3. Cumulative Layout Shift (CLS)

How to Test Your Website for Core Web Vitals?

There are three main ways to test your website for Core Web Vitals:

PageSpeed Insights Tool
Chrome Lighthouse Test (inside your Chrome browser)
Core Web Vitals panel in your Search Console

How to Optimize Core Web Vitals in Webflow

If you are interested in actionable steps you can make for each Core Web Vitals error, we wrote a separate article about optimizing Core Web Vitals on Webflow websites.

There you will find all the tips and tricks we know about how to make that page experience better for each visitor on your site!

Is Core Web Vitals a Ranking Factor?

Core Web Vitals have been introduced by Google in early 2020. Currently, different page experience metrics are signals within different ranking systems.

This means that if you want to rank high in SERPs, there are much more important things you should focus on first, like:

Technical SEO - is website easy to crawl and can be fully indexed?
Content - does your web pages, navigation and taxonomy matches user intents and solves users problems/needs?
Domain authority - can this site be trusted? Are there signals (off-page) that signify that this website is eligible for ranking?

And having fast loading times so optimizing your page speed and great Core Web Vitals can be considered the last step after that.

That's because Core Web Vitals mostly focuses on user experience benefits.

In other words, once you are getting traffic, making sure that those visitors are greeted with fast website helps you with user behavioral signals, such as lower bounce rates, increased page views and even longer sessions on your website.

Core Web Vitals for UX

This makes Core Web Vitals less of a topic for SEO strategies and more of a best development practice with the main focus being user interactions and UX.

When you think about it, this was quite clear from the beginning - page experience (alternative name for Core Web Vitals) sounds like something from the field of UX (user experience).

And it is. Core Web Vitals allows users to have better website experiences, thus reducing bounce rates, which results in signals that prove your website's value.

What Are the Main Metrics for Core Web Vitals?

There are three main pillars of Core Web Vitals:

Loading (speed)
Interactivity (speed)
Stability (layout)

Loading

The performance of your website in terms of how fast your website will load for the average user is the first important Core Web Vitals metric we should discuss.

In the most simple terms: loading performance speed checks how fast visitors will see the majority of the content after clicking on a link.

Loading performance speed is measured by the Largest Contentful Paint (LCP) metric.

What Does LCP Measure?

To determine the Largest Contentful Paint, we should look at factors like:

Server Response Time (usually amazing on Webflow)
JavaScript and CSS
Resource loading times (images, fonts, etc.)
Client-side rendering

If oversimplified, loading speed requires optimized code, optimized images or other resources, and a great server connection.

We wrote a more in-depth article discussing LCP in Webflow in more depth.

Interactivity

Interactivity is the next step in any visitor's journey, making it the second most important factor within Core Web Vitals metrics.

Simply put, interactivity checks how fast can “users use the website”. This means clicking on buttons or links, scrolling down, and interacting with sliders or other elements.

To rephrase, how fast will the website be usable?

Interactivity with Core Web Vitals was measured by First Input Delay (FID) in initial years and recently has been changed to Interaction to Next Paint (INP).

What Does INP (previously FID) Measure?

First Input Delay (FID) measured website responsiveness but had known limitations by the way it determined when the website is actually responsive.

In 2023, Google started gradually changing FID to Interaction to Next Paint which aims to provide better measurements of website responsiveness “as real users would experience it”.

First Input Delay only reports on how fast the user can make the first possible interaction.

Interaction to Next Paint (INP) test goes beyond just analyzing the initial interaction with a web page.

Instead, it considers all potential interactions and focuses on identifying the slowest interactions that could occur on the page.

Additionally, the test also evaluates the time it takes not only for the interaction itself but also for the outcome or result of that interaction.

This provides a more comprehensive understanding of how user interactions impact the overall performance and responsiveness of the webpage.

To simplify: INP calculates the time of all possible interactions on your page and measures how long it will take for those interactions to “conclude”.

Let’s look at a real example:

Page loads
You click on a link
Next page loads

That’s the Next Paint in Interaction with Next Paint. Your next page loaded = next paint.

We wrote an in-depth article about FID and INP in Webflow where you can learn more about this.

Visual Stability

Last on the Core Web Vitals list is web page visual stability. While the past two core metrics were more performance-based, this one is a bit of… Annoyance based?

Visual stability looks at how stable the loading experience is. It’s a measurement of whether or not components “move around” while loading and if they do, how much they move?

Visual stability is measured by Cumulative Layout Shift (CLS).

What Does CLS Measure?

Cumulative Layout Shift (CLS) takes frames of your webpage while it’s loading and checks if any elements changed position in different frames while the page was loading. It then calculates how severely elements moved (shifted) from their initial or final position.

To simplify: did any elements change their position during the page rendering process?

Simplest example:

Page loading starts
You see the button
When hovering on the button and just before it’s clicked an ad loads above
This pushes the button down the viewport so it’s not in the same position as at the beginning of loading

Check our in-depth article about CLS where you can learn more about layout shifts and best practices on how to avoid them in Webflow.

Core Web Vitals Report on GSC

With enough traffic and data, you can review your Core Web Vitals report on Google Search Console.

It will continually report on every web page indexed by Google, by providing both mobile and desktop scores. These scores are based on real-world usage data (other tools provide lab data).

This means - the Core Web Vitals report from GSC is as accurate as it really gets because it takes a look at actual experiences your visitors had, not try to mimic fake lab tests (PageSpeed Insights) or show you what experience you personally are getting (Lighthouse).

Keep in mind that this means your user base can negatively or positively affect the results shown on GSC.

For example: if most of the traffic comes from countries with low internet speed and slower devices… This will mean your Core Web Vitals scores will be calculated on that average, so you might need to optimize your website even more to get better results than you would if your users would have a better internet connection.

Now you probably understand why Core Web Vitals can’t possibly be a true ranking factor.

Bigger websites can’t possibly be faster than smaller ones (on average) when in reality bigger websites rank better than small ones. Though it’s a great secondary signal that proves you care about your visitors and their experiences on your web pages.

You can only view these reports for websites you own (have on GSC).

Core Web Vitals Report on PageSpeed Insights

PageSpeed insights in a web tool that tests any URL you provide in a “lab environment” and lists issues that can be potentially addressed.

You can test any website, including websites you don’t own.

Core Web Vitals Report on Lighthouse

If you press F12 on your Chrome browser, and find the Lighthouse tab - you can run an infield CWV test of any webpage you are currently using.

As opposed to PageSpeed Insights, this will not be a “lab test” and will happen in a real environment (your browser). That’s why any plugins, Chrome extensions, your personal internal speed, and even your computer speed will affect your scores.

And yes, running Lighthouse tests on an incognito browser tab is common practice to get better scores, though in my personal opinion… It defeats the purpose of running a real-world speed test if you remove actual obstacles that exist when you are browsing other websites and your visitors wouldn’t be viewing your website on incognito tabs anyways.