Google Core Web Vitals: Everything You Need to Know But Were Afraid to Ask!
User-experience has always been an essential part of Google ranking algorithms. It affects how your site performs in the search engine result pages (SERPs) and determines your chances of getting to the #1 spot.
Google recently decided to take that to the next level by introducing Core Web Vitals. Which are performance metrics intended to improve user experience and SERP rankings.
You’ll learn in this guide everything you need to know about Google Core Web Vitals. We’ll explain why they’re important and show you how to measure and optimize them for maximum results.
Ready?
Let’s dive in.
What are Google Core Web Vitals?
Core Web Vitals are a set of user-centered factors recently launched by Google to assess page experience. Each of them reflects a specific aspect of the user experience — including loading, interactivity, and stability.
They are all after the same objective:
How soon can users start consuming content while browsing your web pages?
The three factors are:
Largest Contentful Paint (LCP) deals with loading performance. It measures how fast the largest element of your page appears on the screen. That includes plain text, images, videos, or any other form of content.
First Input Delay (FID) measures your website’s interactivity to user inputs. Which could be mouse-clicks or keypresses (such as a tap on a button or filling a login form.) The faster the browser reacts, the more responsive your page is.
Cumulative Layout Shift (CLS) is a new metric that assesses how stuff moves around the page while it loads. It deals with visual stability and how long it takes for your page elements to stop moving.
We’ll cover each of these metrics in more detail in the rest of this guide.
But first, let us understand how these metrics are better than simply measuring page speed and what makes them important to your website.
What Makes Google Core Web Vitals Important?
Quality users deserve better content. And vice versa.
That has been Google’s vision from the first day they launched the search engine. This is why they included user-experience as an integral part of SEO.
Google made sure their users got the best results anyone could find online. But they also wanted their high-quality content to get as many visitors as possible.
Read our full guide to learn more about how and why user experience affects SEO.
Accurate results require more metrics than just keyword density and backlinks.
Google must find new ways to assess user satisfaction and understand what the customer wants. It needs to understand how users are interacting with the top results. And it must know if those results are the best the algorithm can serve.
Search engines are just beginning to understand user experience and measure it accurately. They’re always after discovering the next metric that can help them serve their users best.
That explains why Google launched the Core Web Vitals project.
Core Web Vitals Google Search Central
The sure thing is:
Google will continue to improve on the ranking algorithm it has today. And it will surely introduce more complex ranking signals in the future.
Do Core Web Vitals Affect SEO?
There are over 200 ranking factors Google uses to rank websites today. So it’s unlikely this one update will have a huge effect on how your site performs in the SERPs.
However…
Google will continue to develop and launch new ranking signals and the impact will become more significant as time goes by. Consequently, if you don’t follow Google’s advice after these updates, you’ll miss excellent opportunities to improve.
Even worse:
Your competitors will surely comply with these ranking systems changes, which puts them at an advantage to rank over you.
But don’t worry — we have great news:
Google has given webmasters a year to start working on their sites and improve them.
Even if you’re reading this after May 2021, you can still optimize your Core Web Vitals and boost your rankings.
How to Measure Core Web Vitals?
Now that you’re certain of the importance of optimizing your Core Web Vitals scores, it’s time to show you how to fix them. But before you can do that, you first need to learn how to measure them.
You can use many tools to test your Core Web Vitals however, the results between the tools don’t always align due to different testing server locations or algorithms.
And the thing is…
Google only considers PageSpeed Insights results when assessing Core Web Vitals scores. That’s why we always recommend using only PageSpeed Insights or Google Search Console.
Let’s show you how to use them.
1- PageSpeed Insights
First, copy your site’s link, then go to PageSpeed Insights and paste it there.
The tool will take a few seconds to analyze your website and measure your scores. It will then generate a detailed report on your site’s performance.
Keep in mind that your results for mobile and desktop aren’t the same. Therefore, you must check them both to ensure that you’re fully optimizing your website.
Also, there are two conditions for performance scores you must know:
Lab data are performance metrics collected in a controlled environment with a predefined device and network settings. Meaning, these scores are generated by the tool at the time of the analysis. They don’t rely on data from real users, which makes them less accurate. However, they’re still useful for websites with no real traffic.
Field data are metrics based on real data of how users interact with your site. That makes them more useful to the test as they help the tool get an accurate measure.
Largest Contentful Paint (LCP)
As you may know, your web elements appear one after another until the whole page loads. LCP is the time required for the most important part (which is also the largest) on your page to load.
Here’s an example of a test run by Google:
Largest Contentful Paint — Web Vitals
The green box represents the biggest text on the page, while other elements continue to load. Once the image is fully loaded, it becomes the largest part of the page. So, the time required for it to load is what Google considers LCP.
Google defines Largent Contentful Paint scores as:
Good < 2.5 sec
Needs improvement > 2.5 sec and < 4.0 sec
Poor > 4.0 sec
The lower your LCP, the better your user experience (UX) scores are. Unlike PageSpeed and it’s old metrics, LCP focuses on how real users interact with the page. It identifies how they see the content and how soon they can interact with it.
Improving your LCP score is easy and won’t require a lot of work. Sometimes, the solution is as simple as resizing or compressing your images.
First Input Delay (FID)
A web page can load fast and show us all the content we need within a couple of seconds. But there are still ways it could come short in terms of user experience.
How?
An unresponsive website is just as bad as one that takes long to load.
You may notice this in yourself when surfing the web. How many times have you left a website immediately as soon as it failed to start playing a video you wanted to watch?
That can happen when the browser is busy running another code or operation. Because of that, Google developed FID as a new metric to measure the time needed for browsers to begin processing an event.
But here’s something to keep in mind:
This metric doesn’t measure how long it takes for an event to be fully processed. Instead, it focuses on the time required for it to begin processing.
So it doesn’t matter if your Javascript code takes five seconds to complete. As long as it starts running fast, your FID scores will be good.
Google defines First Input Delay scores as:
Good < 100ms
Needs improvement > 100ms < 300 ms
Poor > 300ms
Keep your First Input Delay below 100ms to ensure the best user experience for your visitors.
Large Javascript files and third-party codes are often the cause for poor FID scores. So, improving that depends mainly on optimizing your JS codes and their execution.
Unfortunately…
FID is a field metric that requires tests from real users to be accurate. So if your site doesn’t have enough data from real visitors, you may not be able to measure it correctly.
The silver lining is:
While the measurement process is different, the optimization is the same. So you have nothing to worry about!
Cumulative Layout Shift (CLS)
A layout shift happens when a visible element on a web page changes its position (moves up or down, for example). So, CLS measures the total sum of layout shifts on your viewport until the page is fully loaded.
When this metric is high, it creates a very poor browsing experience for the user.
For example, an image might appear a second later and push the main text to the top. That can result in miss clicks or poor readability to the visitor.
Google defines Cumulative Layout Shift scores as:
Good < 0.1
Needs improvement > 0.1 < 0.25
Poor > 0.25
Layout shifts are usually caused by third-party ads or large image files with no specific dimensions (width and height).
Even if you don’t know what’s causing your high scores, that shouldn’t be a problem. You can easily spot which areas you should improve on your page by using the PageSpeed Insights tool.
2- Google Search Console
Google recently added a Core Web Vitals report to Google Search Console (GSC). You can find it under the “Enhancements” section of your dashboard.
The great thing about this update is that the report generated analyzes all your web pages at once. It will then give you the scores for each page, along with some recommendations on what to improve.
(Screenshot from GSC with real data)
The only problem is:
While PageSpeed Insights uses both Lab data and Field Data, GSC can only generate reports if your website has real users. That might be a challenge if you’re just getting started in your online journey.
You can always use PageSpeed Insights while you gather some real data.
How to Improve Your Google Core Web Vitals
Let’s be honest here…
Optimizing your Core Web Vitals scores will require some time and effort on your part. However, it’s a one-time thing that will yield amazing results once done.
Google understands how difficult it is for webmasters to always be keeping up with algorithm updates. That’s why they’ve given you all the resources you need to implement these new changes.
You’ve identified which Core Web Vitals you need to improve on your site in the previous step.
Now — it’s time to do some work!
The optimization process is different for each metric depending on what it’s based on. We’ll cover each one of them individually:
How to Improve LCP On Your Website
LCP is a bit more complicated than FID and CLS because it differs based on the content of the page. For example, you may get a good score on your about us page and a bad one on your home page.
That’s because each page on your site runs on a different code and contains unique content on its own.
To improve your LCP scores, you need to:
- Use better hosting — choosing a hosting provider with better server response times can significantly affect your site speed.
- Leverage page caching — that allows your visitors to store your site files and use them again for faster browsing in the future.
- Optimize your images — which means reducing the size of your image files and saving them in small dimensions for the web.
- Minify your CSS and Javascript codes — this step helps you eliminate unnecessary code, which reduces your CSS and Javascript file sizes. Also, be sure to remove any third-party scripts that are slowing down your site speed.
- Use a content delivery network (CDN) — A CDN is a platform of geographically distributed servers. By using one, you’ll make sure your visitors are always browsing your site from the closest server to their location. That allows you to reduce physical distances and serve your site content faster.
If you’re using WordPress, there are many plugins to help you do most of these steps.
For example, you can use:
- Smush to optimize your images
- W3 Total Cache to activate browser caching
- Cloudflare to install a content delivery network
How to Optimize FID On Your Website
Since FID is mainly affected by Javascript codes and files, optimizing it requires some coding knowledge. This is the part where you might need the help of a web developer.
To improve your FID scores, you must:
- Delete unwanted Javascript files/code
- Minify and compress your JS files
- Split up long Javascript tasks
- Eliminate unnecessary third-party scripts (from plugins, themes, etc.)
- Enable browser caching to save your files for later use
As a WordPress user, you must keep your plugins number to a minimum. And you also need to use a modern, fast theme for your brand. That’s how you’ll keep your FID times low and make sure your site loads faster.
How to Reduce CLS On Your Website
Unspecified dimensions or undefined spaces are often the cause of bad CLS scores. Thus, the work in this step has to focus on those issues first.
To reduce your CLS scores, you must:
- Set fixed dimensions for all images and ads — which tells the browser how much space your image/ad will take, even before it loads.
- Preload custom web fonts — using modern custom fonts is necessary for branding and design. But, most of these fonts take a moment to download, which can cause big layout shifts once they load. Because of that, you must preload your fonts to reduce the time necessary for their download.
- Limit your embedded content and iframes — whether it’s YouTube videos, Tweets, or Instagram posts, embedded content without specific dimensions is a huge cause for poor CLS scores. So, be sure to limit your embeds and set predetermined sizes for each of them.
It’s possible to reach a perfect score of “0” on your CLS if you follow these practices. All you need to do is analyze your site and implement the required changes repeatedly.
Wrapping It Up
Google is working hard on improving its’ UX metrics and fulfilling users’ needs. They’ve recently introduced the Core Web Vitals, which tells us a lot about the future of user experience.
These metrics go way beyond measuring how fast a page loads. They try to understand how users perceive and interact with websites in real-time.
To show their importance, Google decided to consider LCP, FID, and CLS as official ranking factors — as of May 2021. But it has given webmasters complete guides with clear instructions on how to optimize and improve each one of them.
Follow our complete guide to learn what these metrics are, how to test them, and what the best practices around them are.
Need help transforming your business with SEO? Contact us or give us a call today at 1-416-840-4411. We’ll be happy to discuss your project needs.
