What Are Core Web Vitals? Metrics That Affect Google Rankings

If you follow Digital Marketing topics, you have probably come across a term that SEOers have been discussing a lot lately: Core Web Vitals. In this article, let's Mona Media take a closer look at the Core Web Vitals concept.

What are Core Web Vitals?

Core Web Vitals are metrics measured by the Chrome UX Report and Google Search Console to evaluate website performance and SEO. Each metric evaluates one aspect of user experience for a website, matching these ranking factors:

• Loading: Page load speed
• Interactivity: Interactivity
• Visual stability: Visual stability of the site

With these three metrics you can tell whether your content loads quickly, whether the browser responds quickly to user input, and whether the page stays stable while it loads.

Why do Core Web Vitals matter for SEO?

Google Search Central announced that Core Web Vitals would roll out and become one of the search ranking factors. They were introduced to improve the experience of people searching for information on Google.

Slow page loading is one of the reasons you can lose potential customers. That is why you need to optimize your site for both speed and performance.

However, many SEOers focus only on performance and neglect optimizing the user experience on the actual site.

For example, to make a site load fast you compress images to reduce their file size, but do you check whether the images still look sharp on the page? Can users still read the information in them?

These seem like small details, but they have a big effect on the user experience.

Page load speed alone is not enough to judge user experience. With Google's Core Web Vitals you get a more complete frame of reference to measure what visitors actually experience on your site.

Read more:

• How to check your website speed
• 10 How to speed up your WordPress website

The Core Web Vitals metrics

The Core Web Vitals currently include Largest Contentful Paint, First Input Delay and Cumulative Layout Shift. Below we describe each metric in detail.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is the metric used to measure page loading performance. Put simply, it is the time from when a user clicks a link to when the content is displayed on their device.

Google usually divides LCP into three groups: Good, Needs improvement, and Poor (fix immediately).

• Green, 2 seconds or less means well optimized.
• Yellow, up to 4 seconds means it needs improvement.
• Red, up to 6 seconds means it needs fixing immediately.

To get all green, every page on your website needs an LCP under 2.5. If your LCP is between 2.5s and 4.0s, you should work on improving Core Web Vitals. If it is above 4.0s, you need to improve it right away.

Getting an LCP under 2.5 is not easy for a site, especially a large one with many features, but you can improve LCP in the following ways:

• Remove unnecessary third-party scripts: Third-party scripts slow your site down and hurt Core Web Vitals. To keep the site running at its best, remove the scripts you do not need.
• Enable lazy loading: Lazy loading so that images on your site load as the user scrolls.
• Remove large elements from the page: Google PageSpeed Insights shows you which elements are slowing your site down.
• Remove unnecessary CSS: Adding too many effects also slows the page down a lot.
• Upgrade your plan hosting: Finally, if you have tried everything above and still see no improvement, upgrade your hosting so the site runs more reliably.

First Input Delay (FID)

First Input Delay (FID) is the metric used to measure the response time to a user's first interaction on the site. Google pays close attention to it because it reflects how real users interact with websites.

A user does many things on a site. Examples of interactions include clicking a menu, placing an order, searching, scrolling, and filling in an email in a sign-up form.

• Green, 100ms or less is considered well optimized.
• Yellow, up to 300ms is considered in need of improvement.
• Red, 500ms is considered in need of immediate fixing.

For blogs whose content is plain text, like news sites and online newspapers, FID may be quite low because users mostly just scroll.

Still, if you want to improve FID, you can try the following:

• Minimize JavaScript: Users cannot interact with a page while the browser is still loading JS. Reduce or defer JS on the page to improve FID.
• Remove third-party JavaScript: Some third-party scripts, such as Google Analytics, heatmaps and others, can hurt FID. Remove the scripts that are not essential.
• Use the browser cache: This helps your content load faster.

Cumulate Layout Shift (CLS)

Cumulate Layout Shift (CLS) is the metric used to evaluate how stable a page is while loading, also known as visual stability. If elements on your site appear too slowly while loading, users' search for information gets interrupted.

Here are the specific thresholds Google gives for CLS.

• Green, 0.1 or less means well optimized.
• Yellow, up to 0.25 means it needs improvement.
• Red, 0.3 means it needs fixing immediately.

When the page layout keeps shifting during loading, users have to find the links, images and fields again once the page is fully loaded. This easily leads to accidental clicks.

Here are some steps you can take to limit CLS.

• Use size attribute dimensions for media files (images, video, GIFs, infographics and so on): The user's browser then knows exactly how much space each element will take on the page.
• Reserve enough space for ad elements: Otherwise these elements can suddenly appear on the page and push content down, up or sideways.
• Place elements below the first screen: If you use an element that changes often, put it below the first screen so it does not push down content that users expect to stay in place.

Tools for analyzing Core Web Vitals

Google PageSpeed Insights

Most SEOers know the PageSpeed tool Google uses to check website speed. With PageSpeed Insights you get a detailed report on site performance on both desktop and mobile, along with specific suggestions for fixing your site.

Although Google Pagespeed Insight has a user-friendly interface and returns results quickly, its measurement servers are located abroad, so the figures in the report sometimes do not accurately reflect page load speed for sites hosted in Vietnam.

Google Search Console

Google Search Console hardly needs an introduction, since SEO people know it well. You need to set up Google Search Console and sign in before you can view the Core Web Vitals report in Search Console.

Web Vitals extension for the Chrome browser

Download and install the Web Vitals extension for Chrome and you can quickly see the metrics of any web page. You can also use Chrome DevTools (Ctrl + Shift + I) to check or analyze any website in Chrome.

How to check Core Web Vitals for your website

Google Search Console is an effective tool for seeing how many pages on your website are affected by Core Web Vitals.

The specific steps to check Core Web Vitals in Google Search Console are:

• Step 1: First, go to Google Search Console
• Step 2: Click “Core Web Vitals” under “Experience”
• Step 3: Then click the “Open report” button under “Desktop” or “Mobile”
• Step 4: Check each issue type to see which URL are having problems

How to fix Core Web Vitals issues

If you want to improve the user experience on your site, it is time to improve your Google Core Web Vitals. Every website runs into different errors, so to pinpoint yours you need to study and analyze your pages and prioritize the most beneficial updates.

In practice, many issues are common across websites. Below are the usual fixes for problems you may run into.

How to improve LCP:

• Use instant loading with the PRPL pattern
• Optimize the rendered URL
• Optimize your CSS files
• Optimize image size and compress image files
• Optimize or remove website fonts
• Optimize or reduce your JavaScript (for client-side rendered websites)

How to improve FID:

• Reduce the impact of third-party code
• Reduce JavaScript execution time
• Minimize main-thread work
• Keep request counts low and transfer sizes small

How to improve CLS:

• Include size attributes on your images and video elements, or reserve space with CSS aspect ratio boxes
• Do not insert content above existing content, except in response to a user interaction
• Prefer transform animations over animations of properties that trigger layout changes

Besides optimizing Core Web Vitals yourself as above, you can reduce the risk of technical errors from the start by choosing a professional website design. At MONA Media, every design project, create a website is built for performance from the structure of the source code, to meet Google's Core Web Vitals.

For the custom website designplan, we pay particular attention to:

• • Clean, fast-loading code with unnecessary scripts kept to a minimum.
  • Overall speed optimization, from hosting and data structure to UI/UX.
  • Interface Responsive design, displaying smoothly on every device.
  • Transparent website design quotes based on your actual requirements.

A good-looking website is not enough. It has to be stable, fast and pleasant to use to keep visitors and rank high on Google. If you want to build a new website or rebuild an old one to meet Core Web Vitals, contact MONA Media today and start building a website that lasts.

To get a website to the top of Google, besides useful and engaging content, optimizing the on-page user experience is very important. We hope this article has helped you understand What are Core Web Vitals? in improving the user experience on your website. From here you can set your direction and plan how to fix the problems your website has.