In May of 2020, Google revealed that Core Web Vitals—a set of metrics first introduced by the Chrome team just weeks prior—were going to be much more important than anyone realized. Rather than simply serving as a way for webmasters to evaluate their sites, Core Web Vitals would begin to directly affect sites’ Search rankings in under two years’ time.
This change was part of the larger page experience update, which began rolling out in June 2021. But if you’re unfamiliar with Core Web Vitals, then you’ll have a hard time determining how to use the update to your site’s advantage. That’s where we come in: ahead, we’ll explain everything you need to know about Core Web Vitals and why it’s crucial for your SERP success.
- The Context Behind Core Web Vitals
- What Are the Core Web Vitals?
- Why Is Core Web Vitals Important?
- How to Measure Core Web Vitals
- How to Improve Core Web Vitals
The Context Behind Core Web Vitals
As mentioned above, Core Web Vitals was initially debuted not by Google’s Search experts but by its Chrome team on May 5, 2020.
As that first blog post about Core Web Vitals explained:
The user-centric focus of this announcement came as no surprise for those familiar with Google’s core mission “to organize the world’s information and make it universally accessible and useful.” In fact, Google has been obsessed with the user experience since its infancy—one of its original ten philosophies was to “focus on the user and all else will follow.”
And that’s precisely what the page experience update is all about: identifying and improving the aspects of a site that make it a pleasure for visitors to use.
What Are the Core Web Vitals?
Google’s Core Web Vitals are comprised of three main metrics:
- Largest Contentful Paint (LCP), which measures the amount of time it takes for a page’s largest piece of content to load;
- First Input Delay (FID), which measures the amount of time it takes for a page to respond to a user’s first interaction; and
- Cumulative Layout Shift (CLS), which measures a page’s visual stability (or lack thereof) by analyzing how much its layout shifts while loading.
Each one is tailored to provide a deeper understanding of how users experience and interact with a page. For instance, a page’s overall speed may be decent, but if its LCP is too high then users will still have to wait impatiently for the largest (and possibly most important) piece of content to load.
Similarly, a page’s layout may be thoughtfully designed, neatly coded, and visually appealing, but if its CLS is over 0.1 users will have to put up with a jumpy and unpredictable experience.
In short, Core Web Vitals as a whole is intended to shed light on the aspects of a page that make it pleasant for humans to navigate. As such, each Core Web Vital can be measured using field data (data gathered from real users) rather than lab data (data gathered by automatic, computer-run tests). The difference between the two is clearly illustrated in this graphic from SEO pro Izzi Smith:
Google’s emphasis on Core Web Vitals is good news for less technically-experienced site owners, too. As Google puts it:
And with an increasing number of small businesses relying on their websites to stay afloat, any changes that make SEO more accessible to more people are changes we can support.
Why Is Core Web Vitals Important?
It goes without saying that any metric (or set of metrics) Google declares to be a ranking factor is important. After all, every SEO practitioner is looking for ways to improve their sites’ SERP rankings, and capitalizing on Google’s ranking factors is an effective way to do so.
But Core Web Vitals is an especially significant ranking factor because it directly affects the way users will experience your site. This is in contrast to other site elements that can help improve rankings but go largely unnoticed by users, such as Schema markup and XML sitemaps.
After all, what would your opinion be of a page that took a long time to load its most important piece of content, wasn’t immediately responsive to your first interactions, and had an unstable layout? It likely wouldn’t be positive, and you probably wouldn’t be itching to visit it again.
So for both SEO beginners and seasoned professionals, optimizing Core Web Vitals can be a satisfying endeavor that produces noticeable user experience improvements immediately and can effectively boost Search rankings over time.
How to Measure Core Web Vitals
Since Core Web Vitals was intentionally designed to evaluate vital aspects of the user experience, it makes sense that they can all be measured with field data. More specifically, you can use any of the following field data-based tools to analyze your site’s LCP, FID, and CLS:
- Chrome User Experience Report (CrUX);
- Search Console’s Core Web Vitals report;
- PageSpeed Insights; and
- the web-vitals JavaScript library..
If you’d prefer to use lab data, you can choose to do so for LCP and CLS (but not FID) using any of these tools:
- Lighthouse;
- Chrome DevTools; and
- WebPageTest.
And if you’re so inclined, each of the three Core Web Vitals can also be measured in JavaScript:
- For LCP, use the Largest Contentful Paint API.
- For FID, use the Event Timing API.
- For CLS, use the Layout Instability API.
How to Improve Core Web Vitals
Since Core Web Vitals comprises three separate components, fully optimizing it will require a multi-pronged approach that considers LCP, FID, and CLS alike.
Largest Contentful Paint (LCP)
The LCP metric defines “the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.” In other words, it measures how long it takes for a page’s biggest piece of content to fully load.
To provide a snappy user experience, Google recommends an LCP of 2.5 seconds or less:
If your LCP exceeds 2.5 seconds, you can improve it with the help of a few targeted tactics:
- Using image optimization techniques to increase the speed at which your site’s media loads.
- Reducing code bloat by minifying JavaScript and CSS.
- Improving server response times, such as by implementing a content delivery network (CDN) and/or server-side caching.
First Input Delay (FID)
The FID metric can show you how long it takes for your page to respond after a user has made their first input. For example, let’s say a user clicks a button that’s supposed to open a dropdown menu. In this case, FID displays the amount of time it takes for said menu to actually open.
So what is a good FID, anyway? Google says that site owners should aim for 100 milliseconds or less:
If your FID clocks in above the 100-millisecond threshold, there are a few measures you can take to mitigate it:
- Adopt progressive loading and lazy loading.
- Code-split unused JavaScript with the async and defer attributes.
- Break up Long Tasks into smaller, less resource-intensive pieces.
- Use a Web Worker to run JavaScript on background threads.
Cumulative Layout Shift (CLS)
The CLS component of Core Web Vitals concerns the extent to which a page’s layout moves around (i.e., shifts) after loading. This goes beyond simply an aesthetic perspective—from a purely practical standpoint, a shifting layout can make it difficult for users to click the button they want or keep track of their place in an article.
In order to maintain a seamless user experience, Google suggests a CLS score of 0.1 or less:
If your site’s CLS score exceeds 0.1, though, you’re not out of luck. You can reduce your CLS score in a number of ways:
- Specify the exact width and height of your site’s images and videos (you can do so right from your site’s HTML code).
- Also specify the dimensions of ads, IFrames, and embeds.
- Use the font display CSS descriptor, implement the Font Loading API, or take other measures to reduce font loading times.
- Control how dynamic content affects each page’s layout by specifying its parameters or allowing users to choose whether they want to load more content.
Core Web Vitals Is More than Just Metrics
Between LCP, FID, and CLS, Google’s Core Web Vitals is more than just a set of useful metrics. Rather, it represents the very essence of a site’s user experience. And with the page experience update now fully rolled out, it’s more important than ever to understand (and optimize) all three.
So now that you’re familiar with each of the Core Web Vitals, don’t hesitate to start improving your site’s rankings today.
Image credits
Google / Accessed October 2021
Izzi Smith / November 2020
Screenshots by author / October 2021
