In May 2020, Google announced that they would be rolling out their new core web vitals. This new set of metrics enhances user experience by monitoring several factors of website performance. Over half of web traffic comes from organic search, so a web page’s Google ranking is more important than ever. As a result, many marketers have been paying close attention to these changes. In this article, we will learn about these new web vitals and why you should pay attention to them. We will also learn how to measure these metrics and some helpful tips for improving user experience.
What Are Core Web Vitals?
Core web vitals are a new set of specific factors that Google uses to evaluate a website’s user experience. This means that these factors are now a part of Google’s overall “user experience score,” which has a big impact on a site’s overall rankings. While these web vitals were originally created for developers, all site owners and/or marketers can use them to understand how users are experiencing their web pages.
Why Are Web Core Vitals Important?
Google algorithm changes happen often, but they are usually pretty small and may even go unnoticed. However, when an algorithm change is significant enough to affect the “core” of the ranking algorithm, Google will make a public announcement. In June 2021, Google began the release of a new core algorithm update called “The Page Experience Update.” This update is meant to enhance user experience by measuring and ranking sites based on new core vital metrics. Site owners and marketers should pay close attention to any Google updates because they can have a big effect on search engine rankings.
The 3 Main Core Web Vitals Metrics (and How to Improve Them)
Now that we know what the new core web vitals are and why they’re important, let’s take a look at each one individually. Each web vital measures its own UX element, but all three come together to give Google an accurate picture of a page’s total user experience.
Largest Contentful Paint
Largest Contentful Paint (LCP) measures how long it takes for a page to load from a user’s point of view. LCP is different from other page speed metrics. Most other measurements don’t focus on the user or represent what the page speed experience is like for them. LCP, on the other hand, shows Google what a user can see when they interact with your page. The Largest Contentful Paint metric represents the time it takes from the first click to see the majority of a page’s content on the screen. Keep in mind that this is only for the content sections visible on the screen (like images or block text). Nothing “below-the fold” (the portion you need to scroll to see) is considered.
Google has very specific guidelines for LCP, which are broken down into three categories:
- Good (Green): 0 to 2.5 seconds
- Needs Improvement (Yellow): 2.6 to 4 seconds
- Poor (Red): Over 4 seconds
Site owners should always stay in the green and make sure that the major elements of their page load within 2.5 seconds. Here are some steps you can take to improve your website’s Largest Contentful Paint metric:
- Remove unnecessary 3rd party scripts: Studies have shown that each 3rd-party page script can slow a page down by 34 ms.
- Upgrade to a better web hosting service: Upgrading to a better host can increase all loading times, including LCP.
- Set up “lazy loading”: Lazy loading keeps images from loading until the user scrolls down the page, which can help your LCP be faster.
- Remove page elements that are too large: PageSpeed Insights will tell you if you have any elements that are slowing down your loading speed.
- Streamline your CSS: Bulky CSS can have a negative effect on LCP.
First Input Delay
Google’s second core web vital is First Input Delay (FID). This metric measures how well users can interact with the content on your web page. Google considers this a very important piece of data because it allows them to see what it is like for visitors to complete various interactions with your site. These interactions can include things like:
- Choosing an option from a pull-down menu
- Entering information into landing page fields
- Expanding “accordion text” on mobile devices
- Clicking a site navigation link
You may think that FID is just another page speed measurement. However, this metric takes it one step further by measuring how long it actually takes for users to complete an action on your page. Interactive pages (like sign up or login pages) are where the FID score comes into play. If the entire page has loaded, but no information can be entered, it can become a really frustrating experience for the user.
Like LCP, Google has specific measurements for FID:
- Good (Green): 0 to 100 ms
- Needs Improvement (Yellow): 101 to 300 ms
- Poor (Red): 301 to 500 ms
As with the other web core vitals, site owners should aim to stay in the green and have their page interactions available to start within 300 ms. Here are a few tips to improve your site’s FID scores:
- Remove unnecessary 3rd party scripts: Lastly, 3rd party scripts can negatively impact your FID scores (just like with LCP).
Cumulative Layout Shift
The last important new metric that Google has rolled out is Cumulative Layout Shift (CLS). This metric measures how stable a page is while it loads content. This can also be referred to as “visual stability.” If the elements on your pages move around while loading, it can lead to a poor CLS score. You’ve likely encountered this issue before. We’ve all clicked on an article and started to read, only to have the text bounce around the page while other content (like images or banner ads) tries to load. Ideally, you want everything to be in the right place during loading to keep your users from being confused. If your content moves, users might get lost or accidentally click on something they didn’t want.
Google’s specific criteria for CLS scores is:
- Good (Green): 0.0 to 0.1
- Needs Improvement (Yellow): 0.2
- Poor (Red): 0.3
The higher your CLS score, the more issues on your page that you have to work on. Here are a few tips to help lower your page’s CLS scores:
- Set size dimensions for media (videos, images, infographics, etc.): If you set these attribute dimensions, the browser will know exactly how much space each element will take up.
- Make sure ads have their own space: If ads don’t have a dedicated space, they can suddenly appear and move/push down important content.
- Add new user experience elements “below-the-fold”: If you add new content below-the-fold (where the user scrolls down), then there is less of a chance of it pushing important content out of place during loading.
How to Measure Web Core Vitals
There are many tools to help marketers and site owners track the new web vitals. When the core web vitals were first introduced, they could only be tracked through the Chrome UX report. As of 2021, Google now offers 6 different ways to measure these important metrics. These include:
- Google Search Console
- Page Speed Insights
- Chrome DevTools
- Chrome UX Report
- Web Vitals Extension
As these new metrics are now a factor in Google ranking scores, many SEO tool sites have come up with their own web core vitals trackers as well. You may choose to use a variety of tools, or find that one provides all the data you need. After making any improvements to your site’s UX design, be sure to recheck your scores and see if they changed. Monitor your scores frequently to make sure that your website is fully optimized for search.
New Web Vitals Metrics for a Better Website
Google is constantly looking for new ways to enhance user experience and give site owners opportunities to improve their website. This means frequent updates to the ranking algorithm. As a marketer or website owner, it’s very important to keep up with these changes to make sure that your website is fully optimized.
At SEO Design Chicago, an expert team of digital marketers can help you to set up and manage your Google Analytics, Search Console, and Webmaster tools. They will work with you to analyze all of your data, craft an effective strategy, and ensure that you are maximizing your marketing budget. Contact SEO Design Chicago today to get started!
- What are core web vitals?
- Why are web core vitals important?
- What is Largest Contentful Paint (LCP)?
- How can I measure web vitals?
- How can I improve my web core vitals scores?