All You Need to Know About Core Web Vitals: A Comprehensive Guide

Web Vitals – an array of website metrics relating to the quality of a website’s user experience, which Google uses as indicators of a healthy website. As of 2021, when Google’s Page Experience Algorithm Update rolled out in full effect, Core Web Vitals are now used as a ranking factor and, thus, became an essential part of SEO.

While the reason behind Google’s ever-changing criteria is to offer the best possible user experience, it can be hard to keep up, and it may feel like an everlasting battle. With the latest algorithm update, digital marketers now need to ensure their website’s user experience is in good shape, beginning with Core Web Vitals. Failing to do so can potentially damage your rankings, visibility, and organic traffic.

Even if you’re not an expert, we can help you understand these new metrics by explaining the concepts behind each Core Web Vital and examining why each of them is a vital search signal for page experience. So, to stay in the loop, here’s everything you need to know about Core Web Vitals, how to make the most out of them, and use them to gain an edge over your competitors.

Let’s dive into the core!

What are Core Web Vitals?

In the effort to provide users with a smooth experience when using their search engine, Google takes a user-centric approach to metrics defining a website’s performance. This means that Google is interested in the user’s subjective perception of the quality of their interaction with a website and “rewards” websites that provide their users with fast loading times, responsiveness, and visual stability.

Since user experience signals are numerous, Google aims to simplify understanding the quality of user experience for website owners and developers by identifying the most important metrics to focus on – the Core Web Vitals.

Core Web Vitals are the essential Google Web Vitals metrics. Each corresponds to an aspect of user experience, is quantifiable, and represents the user’s subjective experience. As you might expect, the Core Web Vitals metrics are expected to evolve, which will likely result in the list of Core Web Vitals expanding.

However, Core Web Vitals presently focus on three distinct user experience aspects: loading, interactivity, and visual stability. At the heart of the latest Google Core Web Vitals update are their corresponding metrics that have been introduced to measure and score your website’s user experience: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

Why Are Core Web Vitals Important?

As Google made page experience an official Google Search ranking factor in 2021, Core Web Vitals now play an important role in measuring the quality of a website’s UX and page experience and obtaining Google’s recommendations for improving performance scores and optimizing site performance.

Maintaining a positive user experience requires continuous work, and keeping track of these metrics allows you to monitor how your site is performing in this sense. Knowing the strong and weak points in your website’s performance will give you a clear idea of what actions you need to take to improve your rankings.

Not only that, but paying attention to your CWV could be a tie-breaker. Having a good page experience score might just give you the edge you need to overtake similarly ranking competitors.

Ready to dig deeper? Learn how to optimize, measure, and improve your Core Web Vitals.

Loading: Largest Contentful Paint (LCP)

Good loading performance is crucial for a website to have a good user experience. LCP is a user-centric metric used to measure the perceived load speed by determining the time required to load the page’s main content – the largest image or text block. In other words, it’s a measurement of how long the most prominent element on the page takes to render.

Unlike some of the metrics used in the past, LCP captures the moment when the largest piece of useful and relevant content (from the user’s point of view) has loaded. Naturally, the sooner the Largest Contentful Paint occurs on a website, the better. Scores under 2.5 seconds are considered good, and anything over 4 seconds is categorized as poor.

How Is the Size of Elements Determined?

When determining the largest content element that is to be reported for Largest Contentful Paint, only those portions of the element visible within the viewport are considered. Any margins, padding, or borders are not considered for determining the size.

Image elements are compared based on either their intrinsic or visible size – whichever of the two is smaller for each of them, while the dimensions of text elements are determined based on the size of their text nodes.

Why is Having a Good LCP Score Important?

LCP is integral to the user experience. Apart from it now being a ranking factor, having a fast-loading website is also essential for another reason. Users expect an efficient interaction with your website. If it takes too long to load, they’ll likely leave your website and seek out another resource, leading to a higher bounce rate, and your overall rankings could be taking a hit.

The first couple of seconds is crucial in convincing your website visitors that they are at the right place and that they can find the information they are looking for on your site. Websites with short loading times are more likely to avoid bouncebacks, and it is only logical that you want to keep the visitors on your webpage.

Achieve all your digital marketing goals with us.

Please fill out this short survey to help us get to know you and your business better.

---

PlayMedia is the digital marketing agency that will take you to the top, and help you grow your business through dedication, transparency, and a unique, highly individual approach.

Mladen Maksic CEO
Play Media

How to Measure LCP

LCP is measured both in the lab and in the field. Field data is based on stats coming from real users, each using a unique device and network connection to visit the page. In contrast, lab data is collected in a controlled environment, where device and network connection settings are predefined.

You can use several tools to measure LCP both in the lab and in the field:

Field tools:

• Chrome User Experience Report
• PageSpeed Insights
• Google Search Console (Core Web Vitals report)
• JavaScript

Lab tools:

• Chrome DevTools
• Lighthouse
• WebPageTest

What are the Causes of Poor LCP

The list of what could cause poor LCP is practically endless. It could be anything that’s taking up a lot of space. But the four main experience factors that can cause slow loading times are:

• Slow server response times
• Render-blocking JavaScript and CSS
• Slow resource load time
• Client-side rendering

If you have performance issues with your website’s loading time, one or more of these factors is likely to be the cause. You can find an in-depth guide on how to optimize LCP here.

Interactivity: First Input Delay (FID)

First Input Delay is also a vital metric used to measure how users perceive your website’s responsiveness. Rather than just measuring how quickly content loads onto a page, FID is designed to measure how quickly users can interact with that content.

Once the content of your website has loaded, hopefully, the user will try to interact with your content. FID measures the time between the user’s first interaction (clicking a link or tapping on a button, for example) and the website’s response.

We should note that continuous actions, like zooming and scrolling, are not related to FID.

Why Only FID?

• There are three primary reasons why first input delay is measured, and not any other delay, even though it affects the user experience.
• First input is the first impression you make
• Most problems occur during page load, so improving them will have the greatest impact on improving interactivity.
• Solutions for improving FID are often not the same as those used to fix input delays after page load, so the guidelines can be more specific.

Why is FID Important?

In terms of the mentioned user-centric approach, First Input Delay can help you measure how smooth of an experience your website visitors are having. Short FID times indicate an interactive and responsive website, while long FID times indicate the opposite, which can often result in user frustration.

Leaving a good first impression on the website visitor can mean the difference between them bouncing to look elsewhere and coming back again in the future. In general, FID is considered to be good if under 100 milliseconds.

It’s important to note here that FID only measures the delay between the interaction and the response in terms of event processing and does not include the event processing time, even though it does affect the user experience.

How to Measure FID

Since it requires real user interaction with the webpage, FID can only be measured in the field using some of the following tools:

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals report)
• JavaScript

FID should be less than 100ms to be considered good. FID more than 100ms needs improvement, while anything over 300ms is regarded as a poor experience.

What Causes Poor FID?

In short, the principal cause of a poor FID is heavy JavaScript execution – it’s usually the main culprit here. This is because the browser is unable to respond to most user interactions while the main thread is busy executing JavaScript. Luckily, there are several things you can do to mitigate this issue:

• Reduce JavaScript execution time
• Break up long tasks
• Optimize your page for interaction readiness
• Use a web worker
• Reduce the impact of slow third-party code

Visual Stability: Cumulative Layout Shift (CLS)

Visual stability is exactly what it sounds like: the stability of content on a page. Cumulative Layout Shift is used to measure the visual stability of the website by quantifying the frequency of unexpected layout shifts that users experience. In simple terms, these layout shifts can mean any sudden changes on the page – from an article text shifting place unexpectedly to other elements, such as links, suddenly moving.

CLS measures the total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. To ensure a positive user experience, the recommendation is to try to keep the cumulative layout shift score lower than 0.1.

Are All Layout Shifts Considered Bad?

A layout shift hurts the user experience only if the user isn’t expecting it. This means that layout shifts that are a result of user interaction are not considered bad, as long as the user is aware of the relationship between an interaction and a shift. For instance, good animations and transitions that move naturally positively impact the user experience.

Have you ever been reading an article only to have an ad or image load above what you’re reading, causing the content to move on the screen? Even worse, have you ever clicked on a link only to have something load and cause the link to move, meaning you’ve clicked the completely wrong thing? This is when layout sifts lead to a bad user experience.

How to Measure CLS

You can use CLS to monitor how frequently users may encounter a poor user experience on your website due to content shifting on the screen. CLS can be measured using different tools for both in the lab and the field measurements:

Field tools:

• Chrome User Experience Report
• PageSpeed Insights
• Google Search Console (Core Web Vitals report)
• JavaScript

Lab tools:

• Chrome DevTools
• Lighthouse
• WebPageTest

The differences between field and lab measurement results can be significant when it comes to CLS. This is because lab tools can only measure layout shifts that occur during page load, so the real users may experience more layout shifts than CLS values reported by lab tools would suggest.

How to Improve CLS

Google provides a few guiding principles, that should help you avoid all and any unexpected layout shifts:

1. Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes.
2. Never insert content above existing content, except in response to user interaction. This ensures any layout shifts that occur are expected.
3. Prefer to transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.

Let’s Sum It Up: Core Web Vitals TL;DR

LCP – Measures how fast the largest relevant element on the page is displayed and is indicative of the user’s perception of the website’s loading speed.

FID – Measures how quickly the website is able to respond to user interaction – longer delays are more likely to frustrate visitors.

CLS – Measures how often unexpected layout shifts occur (visible elements changing positions from one rendered frame to the next)

So, those are the basics of Core Web Vitals, but what does their recent introduction as direct ranking signals mean for website owners and developers? Read on to keep up with the latest changes.

Core Web Vitals After Google’s Page Experience Update: How The New Ranking Signals Impact SEO

Google has always been user-centric. From eliminating keyword stuffing to making page load time a ranking factor, they’ve constantly pushed for a better user experience. Core Web Vitals are simply yet another push in that direction.

Core Web Vitals rolled out in full effect and started affecting search rankings in May of 2021. As of lately, more specifically, as of February 2022, Google’s Page Experience Update for desktop devices has also been implemented. Page experience signals (which are influenced by Core Web Vitals) are now included in search rankings, can be used as tie-breakers for equal quality content, and Google plans to incorporate more signals going forward.

At this point, it seems like Google’s statement that followed the anticipated (or dreaded) algorithm update that the SEO community “should not expect drastic changes” continues to hold up. Nonetheless, user experience is an important factor for most visitors, and optimizing it can improve conversion rates.

Optimizing Core Web Vitals Complements SEO

There are over 200 factors that Google uses to rank pages. So, will Core Web Vitals guarantee you the top spot? Probably not, at least not on their own. However, if you don’t optimize your website for the newest algorithm update, you might risk giving your competitors an edge with the Page Experience Update now all rolled out.

Google Core Web Vitals are measurable SEO performance metrics that can give you a sense of how people experience your website. They provide you with specific and quantifiable data on improving the overall user experience on your website, so users are more likely to return.

It provides your audience with a superior digital and browsing experience, which translates to more engaged customers, higher conversion rates, and other benefits. Your goal is to please users or potential customers. Improving your page experience via Core Web Vitals optimization can help you accomplish that, regardless of its impact on your rankings.

While page experience is important, Google still pays attention to content quality and ranks pages with the best information overall. The Page Experience Update won’t make underperforming websites land on top of SERPs or break sites that are otherwise doing well. It’s simply another addition to your SEO arsenal.

So, the key to improving your Google ranking, ultimately, continues to be the full SEO package: creating high-quality and original content while also optimizing your pages and monitoring your Core Web Vitals to provide the best possible user experience.

Some Practical Advice

Performance optimization may not be a silver bullet for rankings, but that’s not the only reason why we optimize. Core Web Vitals are just the tip of the spear that you can sharpen to cut through the digital noise and offer a better user experience overall, leading to more trust, authority, and ultimately, higher rankings and more organic traffic.

So, content creators and web developers should take Core Web Vital scores into account and apply them to improve UX while continuing to do what they have always done to best optimize their content for search.

However, Google has stated that they will update page experience signals each year. So, make sure you stay in the loop and keep an eye on them, as they will probably evolve over time.

We sure will.

Drago Djukic, Author at Play Media