Core Web Vitals: The Complete Guide

‍

Introduction

What are Google Core Web Vitals?

Largest Contentful Paint (LCP) ‍

First Input Delay (FID)

Cumulative Layout Shift (CLS)

Core Web Vitals FAQs

How Marketwake Can Help

‍

Introduction

Ahh, the almighty Google strikes again. 

‍

In June of 2021, the technology behemoth made some major updates to its infamous algorithm, causing an SEO ripple effect that negatively impacted millions of businesses around the world. Why? This shift introduced a new ranking factor called page experience, which many businesses—even those with robust SEO strategies—were not previously optimizing for. While the concept of user experience is nothing new, the metrics that help determine your search ranking are, and they’re known as Core Web Vitals.

‍

What does that mean for your website? Well, a few things. 

‍

Going forward, your Core Web Vitals will be just as important as the content you write and the keywords you use. It means that adapting your SEO strategy to account for Google’s latest metrics—largest contentful paint, first input delay, and cumulative layout shift—will be paramount. 

‍

It also means you may have quite a few questions about how to appease the Google gods and maintain your standing in search results. Don’t let the ever-evolving algorithm intimidate you, though. We’re covering it all in this handy guide so that you improve, optimize, and climb the search-ranking ladder to success. 

‍

Let’s dive in.

‍

What are Google Core Web Vitals?

When you go to the doctor, the first thing they typically do is take your vitals: body temperature, pulse, respiration rate, and blood pressure. These measurements tell you that you’re alive (yay!) but they also provide your doctor with important benchmarks. A fluctuation of your vital signs in either direction will signal to your healthcare provider that something’s up. 

‍

Core Web Vitals function in a similar way: They are Google’s standardized metrics designed to measure performance, responsiveness, and visual stability. Changes in these metrics alert you to the “health problems” of your website, specifically around user experience. 

‍

You might be wondering what page experience and performance have to do with SEO, and the answer is a lot. Google’s extensive research revealed that users prefer sites with a great page experience, meaning that they’ll spend more time on websites that don’t take too long to load, are mobile-friendly, and are easy to navigate. 

‍

The idea is that, by adding page experience to its repertoire of ranking signals, Google can help more people easily access the information they’re looking for and help website owners provide a better experience that keeps users coming back for more. 

‍

It all sounds pretty great when you look at it that way. But the reality is, for many businesses, optimizing for these new metrics is easier said than done. Questions are bound to arise, like “Where can I find my Core Web Vitals score?” and “How do I fix Core Web Vitals?” Not to mention, there are still over 200 other ranking factors to consider when optimizing your website. 

‍

If you’re overwhelmed at the thought of it all, pause here for a minute. Take a deep breath. Now, let’s take it one step at a time. Up first? Take a look at the three metrics that comprise Google Core Web Vitals so you can determine what’s working (and what isn’t) when it comes to page experience.

‍

‍

Largest Contentful Paint (LCP) 

Largest Contentful Paint, or LCP, refers to the time it takes for the largest element to appear relative to when the page first began loading. Your largest “element” is most likely an image, but according to Google, they can also include the following:  

‍

• <img> elements
• <image> elements inside an <svg> element
• <video> elements
• An element with a background image loaded via the URL() function
• Block-level elements 

So, how does Google measure LCP? 

The Largest Contentful Paint should happen within the first 2.5 seconds of page loading. If your LCP falls between 2.5 and 4, performance needs improvement. Anything over 4 seconds is considered poor performance.

Now, you might be thinking the size of your image or element is the reason why it’s not loading as quickly as it should be. But poor LCP performance can be caused by several factors, including slow server response times, render-blocking JavaScript and CSS, slow resource load times, and client-side rendering.

‍

What can you do to fix it?

There are several tools available you can use to discover which elements (if any) are causing trouble. PageSpeed Insights (PSI) is one example. It looks at mobile and desktop page performance and then provides improvement suggestions. PSI can also identify the LCP on your website and can be viewed in the diagnostics section.

‍

Once you identify your LCP, there are a few ways to optimize. One of the simplest things you can do is to optimize and compress images using a tool like Imagemin. Another option? Skip the image altogether if it doesn’t add value. Converting images to newer formats, using responsive images, or using an image CDN are valid options as well.

‍

Looking for more ways to troubleshoot? Check out this article from Google Developers for an in-depth look at how to optimize LCP across the board.

‍

First Input Delay (FID) 

First Input Delay, or FID, measures the time it takes for the browser to respond to a user’s first interaction, such as clicking a link, a button, or a checkbox. In other words, it’s a measure of responsiveness that pertains to the following interactions:

‍

• Taps, clicks, and key presses
• Selecting items in dropdowns
• Text fields
• Links
• Not included: zooming or scrolling

FID is especially important on CTA pages when the user is asked to take action or when the page is interactive in one way or another. The faster the browser reacts, the better the user experience. The slower the browser reacts, the more frustrated viewers are likely to become and the more likely they are to leave the site. 

‍

Why does this happen? For one, browsers are busy little buggers—but they can’t do everything at once. Another reason is that JavaScript-powered websites are becoming increasingly complex, and browsers have to work overtime to accommodate user interactions. 

‍

How does Google measure FID?

The interesting thing about FID is that data must be measured from real users. There is no “predicting” or “lab testing.” With that being said, FID looks at all interactions that occur during the page loading and Google requires a score of 100ms or less to be considered responsive. FIDs between 100ms and 300ms need improvement, and anything over that is considered “poor performance.”

‍

What can you do to fix it?

Now, we know what you’re thinking: If the problem is with the browser, how can I control or influence my FID score? In some cases, improving your JavaScript code can reduce execution time. You can also, according to Google, reduce the impact of third-party code, and keep request counts low and transfer sizes small. These improvements can get quite technical, so we recommend checking out the “How to Improve FID” section in this Google Developers article. 

‍

Cumulative Layout Shift (CLS)

Cumulative Layout Shift, or CLS, determines the “stability” of assets on your website—quite literally, a shift in layout. If you’ve ever been reading something online and the text moves abruptly, or you try to click on a button and it shifts as the page finishes loading, those are examples of instability. Not only is this movement annoying, but it can contribute to a negative user experience. The CLS metric can help you solve these issues by reporting how often it’s happening.

How does Google measure CLS?

According to Google, CLS measures “the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.” Let’s break that down: 

‍

• A layout shift is when any element on a page changes positions.
• A burst of layout shifts is when multiple shifts occur in rapid succession. This is also called a session window and occurs when there is one second or less between each shift and a max of five seconds for the total window duration.
• The largest burst is the session window with the most layout shifts (aka the maximum cumulative score).

‍

Google notes that a good user experience should have a CLS score of 0.1 or less. Scores between 0.1 and 0.25 need improvement, and anything above 0.25 is considered poor.

What can you do to fix it?

Google lists a few simple guidelines for avoiding unexpected layout shifts. For one, they recommend always include size attributes on images and videos so that the browser can allocate space accordingly. Google also recommends that you avoid inserting elements above existing content. To learn more about CLS and how to improve your score, give this Google Developers article a read. ‍

How Marketwake Can Help 

As much as we love a good DIY project, tackling Core Web Vitals on your own is no easy task. SEO, in general, can also be complicated without the right tools—or the right partner. 

‍

If you’re not sure where to start, let’s just say you’ve come to the right place.

‍

At Marketwake, our team doesn’t just know SEO—they’re SEO experts who can help you rank higher so that customers can find you. And that translates to real results. Our clients see an average of 510% increase in traffic from organic search in just four months of working with us, which can equate to millions of dollars in revenue. 

No matter where you land, keep this Core Web Vitals Guide handy so you can stay on top of your game—and at the top of search rankings.