Core Web Vitals or CWVs is a buzz phrase these days. If you are the owner of a website or online store, you must have heard it several times in the past few months. People might have also said that CWVs were important for some reason, and you wondered what it was.
So you started looking for answers and landed on this page. Right in the bull’s eye! In this post, we will dot all the i’s and cross all the t’s as far as CWVs are concerned.
Core Web Vitals: The Basics
If you look up the word “core” in a dictionary, you will see that it means “the central part or the part inside an object that is nearest its center.” The word “vital,” in turn, means something, “important, necessary, or essential.”
Now answer, what is a central, essential characteristic of any website? That’s right. User experience. The success of any website or online store largely hinges on how convenient it is for the people who visit it.
Elaborating further, we can say that a site is convenient, among the rest, when it loads fast, allows users to interact with it immediately, and has its content firmly in place instead of jumping around all the time.
Surprise, surprise! Google knows this, too. That’s why in May 2021, it announced that it would update its algorithm by introducing new Core Web Vitals. These are a set of three key measurements designed to gauge user experience:
LCP — Largest Contentful Paint
FID — First Input Delay
CLS — Cumulative Layout Shift
All three have the corresponding “poor,” “needs improvement,” and “good” thresholds.
Along with non-Core Web Vitals (safe browsing, mobile friendliness, intrusive interstitials, and HTTPS), these metrics constitute one single “Page Experience Signal,” as the tech giant dubbed it. Starting from June this year, Core Web Vitals are an official page experience ranking factor.
Let’s go over each of the Core Web Vitals now.
Core Web Vitals: The Three Metrics in Detail
Largest Contentful Paint (LCP)
The present-day Internet is several light years faster than it used to be a couple of decades ago. Back then, when you opened a website with a high-resolution image, it often loaded in portions, painfully slowly.
It’s all different now. Thanks to powerful hardware and fast Internet, even visually heavy websites can load in split seconds. It’s precisely these seconds that Google decided to focus on with the new Core Web Vitals metric — Largest Contentful Paint.
In essence, it’s the time it takes a page to load the largest visible piece of content. This can be a hero image, a video background, or a large chunk of text.
Unlike some other page speed measurements, LCP is user-centered. It gauges how fast a visitor to your site can actually see the majority of its content.
What if there are several big blocks of content that are equal in size? These are treated on the last-come-counts-higher basis. For example, if a large video background loads after a sizable chunk of text, Google considers the background as the LCP primary reference point.
LCP Thresholds
Good ( <= 2.5s)
Needs Improvement (> 2.5s <= 4s)
Poor (> 4s)
First Input Delay (FID)
Most of us have been in this situation at least once when visiting one website or another. A registration page seems to have been loaded. You click inside a form field, expecting to start editing it straight away, but discover that the box is still disabled.
That’s when the First Input Delay metric comes in. It measures the time it takes for a user to perform an action on a web page after opening it in the browser.
Note that FID is not concerned with the time it takes to process the event. Nor does it care about the time it takes to re-render the interface after the event has been processed. No. It’s only focused on how fast the page responds to a user-initiated event.
Apart from filling in text fields, possible events include choosing a dropdown option, clicking on a link, selecting a checkbox, and other interactions. Scrolling and pinching are not counted as interaction events owing to their specific nature.
For some sites, FID is not as critical as for others. For instance, if you own a blog without a sign-up/sing-in form or user menus, you can safely ignore this metric. Otherwise, especially if you are an e-commerce website owner, FID is over-important. Leave it poor and risk losing customers.
FID Thresholds
Good (<= 100ms)
Needs Improvement (> 100ms <= 300ms)
Poor (> 300ms)
Cumulative Layout Shift (CLS)
The purpose of this metric is to measure how stable the content on a web page is as it loads in the browser. That is, what total effect all page elements that “shift” during the loading process have on user experience.
Consider this example. You hit a “Request a Quote” button but see a page with a large photo of the latest model of a vacuum cleaner. Why is that? What happened?
The truth is that you probably clicked on the banner ad right beneath the button. Why? Because the page content suddenly shifted a bit.
CLS is a score that represents the sum of all unexpected layout shifts (like the example above) within a page as it loads. The higher it is, the less stable the page is in Google’s eyes.
Layout shifts occur when a piece of content is added after another without observing layout rules properly. For instance, a banner that loads after a link can push the latter to the right or left.
CLS Thresholds
Good (<= 0.1)
Needs Improvement (> 0.1 <= 0.25)
Poor (> 0.25)
NOTE: To pass Google’s CWV test, you need to have a “GOOD” SCORE FOR EVERY METRIC — LCP, FID, and CLS.
How Much Can Core Web Vitals Scores Affect Your Page Rankings?
Page experience is one of the most important factors that can have a profound effect on search engine visibility. Users hate slow-loading, unstable, and hard-to-interact-with sites. When they land on a site like that, they tend to hit the back button immediately. This may increase the bounce rate and push the website down in search results.
Of course, the page experience signal is only one of around two hundred other indicators that Google uses to rank sites. Still, the latest algorithm update implies that the tech giant is very serious about punishing sites with bad user experience.
There are also rumors that Google will introduce the “Good Page Experience” badge soon. This will be displayed next to “good” sites on search results pages. Such sites will definitely get more clicks than those without the badge.
Good page experience is particularly crucial for the owners of online stores and sites used for lead generation. The bottom line: if you don’t want to lose search engine visibility and keep your traffic flow stable, you need to improve your Web Core Vitals scores now. There is no time to wait any longer.
How Can You Improve Your Core Web Vitals Scores?
There are a number of ways in which you can bring your CWV scores to a level that Google considers acceptable. Here are some of these:
LCP: minify CSS files, reduce image file sizes, get rid of web fonts.
FID: revise your site’s reliance on third-party code and minimize the number of server requests.
CLS: avoid adding new content atop the content that’s already on the page.
These measures are not something that an ordinary user without a web development background can easily implement. That’s why the best solution as far as Core Web Vitals optimization goes is to seek professional assistance.
Core Web Vitals Optimization Service from GetDevDone
To help businesses meet Google’s tough CWV requirements, GetDevDone has launched a Core Web Vitals optimization service for WordPress-based sites.
We will begin by checking your current CWV scores for free. If we discover that they are in the “poor” or “needs improvement” zone, we will take all the necessary steps to make Google paint them green.
Don’t let your site’s rankings drop. Order our Core Web Vitals optimization service today to keep your existing clients and generate leads!
Confused by the difference between frontend and backend development? We’re here to help you clear the fog away. Front end vs back end development, full stack developer vs front end developer, UI developer vs front end developer… the list goes on. These and other terms may sound bewildering to many, especially to those without a […]
Do you have a Figma design and wonder how to convert it into a functional WordPress website? Read this post to discover three possible methods to approach this task, including their pros, cons, and challenges.