Google launched Core Web Vitals on May 28, 2020, to improve user experience and boost website ranking. It assesses website speed, responsiveness, and visual stability - providing more opportunities for a website ranking boost.

1. Google Core Web Vitals: The Ultimate Guide
July 10, 2022 Leave A Reply
Google launched Core Web Vitals on May 28, 2020, to improve user experience and boost
website ranking. It assesses website speed, responsiveness, and visual stability - providing
more opportunities for a website ranking boost.
In this post, we will look at what Google Core Web Vitals are and how they affect Google's
ranking and how does it assist web developers and site owners in understanding how
visitors interact? I have explained it in detail so that our readers can easily understand.
So let's begin with the description of core web vitals.
What Exactly Is The Google Core Web Vitals?

2. Core Web Vitals is a set of metrics used by Google to more accurately measure user
experience. These metrics are related to page load time, page interactivity, and the visual
stability of content as it loads.
Google's goal is to ensure that all of the websites in their index provide the best experience
for their searchers.
According to Google's official statement, Google prioritizes pages with the best overall
information. Google Core Web Vitals is now a significant ranking signal. As a result, you
must evaluate these new Page Experience signals or scores.
These scores are calculated on a page-by-page basis for both desktop and mobile; if
websites perform well, their visibility may improve.
It's a good time to go over other critical aspects of your website, such as on-page
optimization, content depth, internal linking, and so on.

3. What Is The Significance Of Core
Web Vitals?
Google Core Web Vitals have an impact on not only user experience but also page
performance. Google intends to make a page's experience a deciding factor in your
website's ranking.
As a result, these Core Web Vital scores will most likely be used to determine the page
experience score for your company's website.
While a high page experience score is important, keep in mind that it is only one of many
factors that contribute to search engine optimization ranking and will not automatically
propel your website to the top spot.
Here are the three main reasons why every website owner should be concerned with Core
Web Vitals:

4. 1- Visitors prefer fast sites that are simple and enjoyable to use on any device and from any
location. If you provide a great user experience, you will make more money.
2- Core Web Vitals, as mentioned in the beginning, have become a ranking factor. While we
don't expect to see a major change right away, and relevance is still much more important,
we do expect it to grow in more importance over time.
3- Passing the Google Core Web Vitals evaluation will result in fewer users returning to the
SERP because you're providing a good user experience—and Google has begun showing a
"Good Page Experience" badge in their search results.
These are referred to as "indirect ranking factors" because they impact searcher behavior,
for example, more clicks for pages with this badge, which is then fed back into Google's
algorithms.

5. Core Web Vitals Metrics-
Without further ado, let’s dive into each of the Web Vitals metrics, starting with the Core
Web Vitals!
We'll go over some core web vitals metrics that will provide you with some scores to assist
you to measure page experience.
There are 3 most important Web Vitals metrics to help site owners measure user
experience on the website.
Some non-Core Web Vitals metrics are also there which we will discuss later in this post.
Each metric gives you a clear view of how “good” one part of the Page Experience is.
Largest Contentful Paint (LCP)

6. Image Source
LCP is typically represented by an image or a text block. It could, however, be a video or
animation.
The LCP element may differ between mobile and desktop environments.
As one might expect, the largest element is the most important for user experience and
perceived load speed.
The Largest Contentful Paint (LCP) metric measures the time it takes for the largest
element to become visible in the viewport. Almost nothing on the page will be visible until
the LCP loads.
This is due to the fact that the LCP element is always above the fold — that is, at the top of
the page.

7. Its purpose is to determine when the page's main content has finished loading. It is
preferable to reduce the LCP.
The Largest Contentful Paint (LCP) metric counts the number of seconds that pass
between when the page first loads and when the largest text block or image element
appears on the screen.
Its goal is to determine when the main content of the page has finished loading. Lowering
the LCP is preferable.
Because it is a metric that measures perceived load speed, a fast LCP assured users that a
page is useful. LCP is available in both field and lab data formats.
Consider this: if the page's main element does not load quickly, your user experience will
suffer. You'd be staring at a nearly blank page, waiting for it to load. You could even
abandon the website! A few seconds can make a huge difference when browsing.
As a result, Google has included LCP as one of the Google Core Web Vitals metrics, which
measure how good your user experience is.
Important factors to consider
The biggest text block or image element on a page may change while it is loading, and the
most recent candidate is used to calculate the LCP.

8. Consider the case where an H1 heading is the largest text block at first, but a larger image
is loaded later. In evaluating the LCP, the larger image becomes the leading candidate.
Please keep in mind that "SVG" elements are not currently considered candidates for the
Most Contentful Paint. As a result, if you load a large logo as an "SVG" element, it will not be
considered an LCP candidate.
This decision was made to keep things simple, and it may change in the future.
LCP Score Standard
 Good: <= 2.5s (2.5 seconds or less)
 Needs to be improved: > 2.5s <= 4s (between 2.5 and 4 seconds)
 Poor: > 4s (more than 4 seconds)
The cause of a low LCP Score.
A low LCP score can be caused by a variety of factors, including render-blocking JavaScript
and CSS, slow server response times, and having your largest content resources be too
large and take too long to load.
Suggestions for Improving LCP
Make sure that all images are compressed and should be in the next-generation format,
which means that the image sizes are around 100 KB or less and do not take long to load.
Scaling and defining image sizes can also improve LCP issues by ensuring that images load
only as small or large as desired.

9. Trying to improve the Largest Contentful Paint metric is one of the more challenging
Google Core Web Vitals to troubleshoot because there are so many variables that can
influence it.
You can improve your LCP score by optimizing your critical rendering path, CSS, and
images. It's really tough to describe all of the factors in a single post. Instead, I recommend
visiting the web.dev's resources on optimizing LCP scores.
Largest Contentful Paint is important not only for providing a great
user experience, but it is also important for improving your SEO
performance.
Furthermore, LCP accounts for 25% of the total PageSpeed Insights score. You will most
likely improve your page speed grade by improving its performance.
In short, LCP is currently one of the most important performance metrics.
What Is First Input Delay (FID) And Why Does It
Matter?

10. Image Source
First Input Delay (FID) is another most important Google Core Web Vitals metric that
measures how long it takes the browser to respond to the first user interaction with a
page, such as clicking a link, tapping a button, or interacting with another element.
FID measures the time in milliseconds between when a user interacts with your site for the
first time by clicking a link, tapping a button, or pressing a key and when the browser is
able to respond to that interaction.
Assume you arrive at a website and click on a link. Of course, you'd want the page to
respond as soon as possible, right?
Regrettably, this is not always the case.

11. For example, you might click on a link and nothing happens for a while because the
browser is unable to process the user's request immediately.
In more technical terms, this is because the browser's main thread is busy with another
request and is unable to respond to the users. The requests that keep the browser busy are
frequently related to the processing of JavaScript files.
So, to return to you: you click on a link and wait for something to
happen on the page... Isn't it aggravating?
As a result, FID is a Core Web Vitals metric that helps measure a page's user experience.
Important factors to consider
As compared to other Google Core Web Vitals metrics, First Input Delay (FID), can only be
measured on the ground — after all, it is all about user interaction. Scrolling and zooming
are not considered actions in FID.
As the name implies, this metric can only be measured in the field because it is dependent
on user interaction. The FID is only available as field data. Lowering the FID is preferable.
As a result, some tools, such as Lighthouse, cannot measure First Input Delay and must rely
on Total Blocking Time as a proxy. TBT is a laboratory metric that assesses interactivity
and responsiveness (without user interaction).

12. The FID grade should be fine as long as the TBT score is good.
TBT accounts for 25% of the total PageSpeed Insights score. It is the heaviest, and only LCP
has the same one. You will most likely improve your page speed grade and FID
performance by improving TBT performance.
FID Score
 Excellent: = 100ms
 >100ms and =300ms require improvement.
 Poor: more than 300ms
The reason for a low FID Score
One of the most common causes of a low FID score is a browser's main thread. When the
main thread is busy, it is unable to respond to user interaction.
Raising your FID Score
If you want to improve your FID score, you should investigate what is preventing the
browser from becoming interactive. You can improve your FID score by doing the
following:
 JavaScript execution time is being reduced.
 Work in the main thread is being minimized.
 lowering the influence of third-party code
The scope of this article extends beyond describing the intricacies of increasing your FID
score. As a result, we recommend that you look into the web.dev's resources for improving
FID scores.

13. Cumulative Layout Shift (CLS):
Image Source
The third is the Cumulative Layout Shift metric, which measures
the visual stability of the page and has a significant impact on the
user experience. Regardless of whether you clicked on a link or not,
a layout shift occurs whenever the content changes.
CLS is available in both field and lab data formats. The better the visual stability, the lower
the CLS score.
The Cumulative Layout Shift score is determined by the sum of all these shifts.

14. How many times have you been reading an article when the content was pushed down due
to new ads? Or, have you ever tried to click on a button only to end up clicking on another
link because a new large image pushed the content down?
All of these are layout shifts, caused by some elements on the page becoming unstable and
shifting their position on the page.
Elements change positions for a variety of reasons. A new image or ad, for example, loading
above the fold (at the top of the page) forces some content to move down and occupy
another section of the page.
You can imagine how inconvenient this is for users.
As a result, Cumulative Layout Shift is one of the three Google Core Web Vitals metrics
used to assess the user experience of a page. CLS, along with Largest Contentful Paint and
First Input Delay, was added to the Page Experience ranking factor in June 2021.
The Cumulative Layout Shift is a highly relevant metric for user experience and the new
ranking factor, accounting for 15% of the PageSpeed score. As a result, it may have an
impact on your SEO performance.
CLS is not measured in seconds, unlike most other metrics. It is based on the size of the
viewport, refers to elements that move between two frames, and measures their
movement in the viewport. The layout shift score is divided into two components:
"distance fraction" and "impact fraction."

15. Image Source
The "impact fraction" is the percentage of the viewport that the
unstable element occupies in both frames:
The "distance fraction" is the greatest distance traveled by the unstable element between
both frames divided by the largest dimension of the viewport (width or height).

16. Image Source
Important factors to consider
"A page's entire lifecycle" means that even if the page is open for days or weeks, the CLS is
measured throughout. Obviously, this is where CLS field data and lab data will differ,
because tools only collect lab data for a short period of time.
Testing for unexpected layout shifts in test environments can be difficult because some
functionality may be disabled or work differently. Some examples include: cookie
notifications being disabled, live chat support being disabled, and personalized content not
being loaded.

17. CLS Score
 Good: <= 0.1
 Needs to be improved: > 0.1 <= 0.25
 Poor: > 0.25
Factors causing a poor CLS Score
Unexpected layout shifts are frequently caused by images or ads with undefined
dimensions, asynchronously loaded resources, and situations in which new DOM elements
are dynamically added to a page above previously loaded content. This causes content that
has already been loaded to be removed.
Raising your CLS Score
You can avoid unexpected layout shifts by, for example, always including size attributes for
your images and videos and not inserting content above already loaded content. To learn
about the full range of improvements available, I recommend reading the web.dev's article
on optimizing CLS scores.
Now we'll look at non-Core Web Vitals:
 Total Blocking Time (TBT)
 Speed Index (SI)
 Time to Interactive (TTI)
Total Blocking Time (TBT)
Total Blocking Time (TBT) measures the total time in ms between FCP and Time To
Interactive (TTI) when the main thread is blocked for a long enough period of time that it
becomes unresponsive to user input.

18. TBT Score
 Good: <= 200ms
 Needs improvement: > 200ms <= 600ms
 Poor: > 600ms
Speed Index (SI)
The Speed Index (SI) determines how quickly the contents of a page are visible during page
load. It is calculated by analyzing your page's load behavior frame by frame and counting
the visual progression between frames captured every 100ms.
SI Score
 Good: <= 3.4s
 Needs improvement: > 3.4s <= 5.8s
 Poor: > 5.8s
What might be causing a low SI score?
Anything that slows down the page's loading time will lower your SI score. Some of the
causes mentioned for the other metrics, such as the main thread being blocked, also apply
here.
Increasing your SI Score
If you concentrate on improving overall page load performance, your SI score will improve
as well. I recommend visiting web.dev's resource on this topic here.

19. Time to Interactive (TTI)
Time to Interactive (TTI) is the time it takes from when the page first loads to when it is
fully interactive.
In order to be fully interactive, it must:
Show relevant content (measured by First Contentful Paint).
Render the most visible page elements.
Within 50 milliseconds, respond to user interactions.
While it is possible to measure TTI in the field, it is not recommended because user
interaction can have a significant impact on the TTI of your page. As a result, you should
only use TTI in a lab data environment.
TTI Score
 Good: <= 3.8s
 Needs improvement: > 3.8s <= 7.3s
 Poor: > 7.3s
What might be causing a low TTI score?
Similar to the Speed Index metric, many of the factors that contribute to poor scores in the
other metrics we discussed apply to TTI as well because it is a metric that includes those
other metrics.

20. Enhancing your TTI score
For the next steps on how to improve your TTI, I recommend reading this web.dev article.
Does Core Web Vitals affect SEO?
It's the most frequently asked question in the SEO world since Google launched Core Web
Vitals.
"Does the update to Google's page experience metrics affect a website's search ranking?"
The answer is complicated. There are also methods for determining whether a site's search
ranking has been affected by the update to the page experience.
The Impact of Web Vitals on Site Traffic
In a meeting, Google's very own SEO specialist John Mueller addressed this question and
opened up about the signs to look for to determine whether Core Web Vitals scores are
impacting a site's ranking... and when they aren't.
During the meeting, someone shared a story about how their website experienced a 20%
drop in organic search traffic after Google rolled out the update, and how they noticed the
impact right away.

21. They then inquired whether fixing flaws in Core Web Vitals would aid in regaining its
traffic level.
"Is it safe to assume that the site will regain traffic once we resolve the Core Web Vitals
issues?" they inquired. "How long will it take, and will we have to wait for another massive
update?"
In response, John gave a detailed explanation. "I don't think that's related." I don't believe
that would be related because we began rolling out this update in July and finished it at the
end of August. However, the rollout was essentially done page by page.
"That means if we noticed your website was slow for Core Web Vitals, you'd notice a
gradual improvement." If you see an exact drop on that date, it appears to be something
else. So I don't believe it's from the Google core web vitals."
The questioner then asked if this was true for sites that had experienced traffic increases,
which John confirmed. He went on to say that "the updates happen automatically."
"So it's something in Search Console that you'll notice the data is always delayed, I believe
28 days, but it's gradually updated." It is not necessary to wait for a larger update."
Following that, John went on to describe how the changes to Google's Page Experience feel.
This is extremely useful for diagnosing large and sudden changes in search engine rankings
because we now know that the effect on ranking - whether negative or positive - is felt
gradually.

22. Occasionally, an SEO specialist or publisher will notice a change in traffic numbers. And, at
times, this is simply randomness, a coincidence.
It wouldn't be very helpful to simply blame changes in Google's algorithm and the unrolling
of Core Web Vitals.
However, any future changes to a website's Core Web Vitals will not have to wait for a
major Google update to take effect.
Core Web Vitals check - Metrics Tools
Google now has six methods for measuring key web metrics.
 Search Console.
 PageSpeed Insights.
 Lighthouse.
 Chrome DevTools.
 Chrome UX Report.
 Web Vitals Extension
Conclusion:
Pagespeed Insights and AMP have long been used by Google to
promote page speed. And now, with Google Core Web Vitals, it's
truly inseparable from SEO. Pagespeed optimization is similar to
other aspects of SEO in that one improvement may not yield results
on its own, but after several improvements, you will see an increase
in your SEO performance.