Understanding Google Core Web Vitals [New Guide in 2024]

Table of Contents [show]

Have you ever waited forever for a webpage to load or found it frustrating when elements on a page suddenly shift around? These experiences can make browsing the web a real pain. That's where Core Web Vitals come in. It's a helpful project from Google that gives website owners like you clear instructions to make your site awesome for visitors.

Understanding Core Web Vitals

Web Core Vitals are three special tools that check how fast, responsive, and steady a webpage is. They're super important because they help your site do better in search results and make visitors happier. If your website loads quickly, responds when clicked, and doesn't wiggle around too much, it's more likely to show up higher in Google searches, giving people a better time when they visit.
 

In simple terms, Core Web Vitals are like a report card from Google for your website's overall user experience. They're part of what Google looks at when deciding how good your website is. So, ensure your website passes these tests – loading fast, being easy to use, and staying still. However, you're not just making Google happy but also making your visitors happier.

How Does It Affect SEO?

Search engines like Google use bots called web crawlers or web spiders to check out websites. These bots look at what each website talks about and help decide when it should appear in search results. They also pay attention to how fast a website loads and works. So, if your website is quick and smooth, it's more likely to show up higher in Google searches.
 

Now, exactly how much things like Largest Contentful Paint (LCP), Interaction to Next Paint (INP) before March was known as First Input Delay (FID), and Cumulative Layout Shift (CLS) affect search rankings needs to be clarified. Google keeps its ranking rules pretty secret. But these Core Web Vitals (CWVs) matter much for search engine optimization (SEO). Many experts have done tests and found that changes in a website's CWVs can make it show up higher or lower in search results.
 

Suppose two websites, Website A and Website B, are both known for giving good info about the history of the internet. They both have detailed information about ARPANET, for example. If everything else is the same, but Website A loads faster, responds quicker and doesn't jump around as much, Google will probably put Website A higher in the search results. Even though both sites have similar info, Google likes the one that's faster and smoother.

What is the Largest Contentful Paint?

The largest Contentful Paint (LCP) is the immense part of a webpage, which could be a picture or a chunk of text. It tells us how long it takes for that big part to show up when you open a webpage. According to Google's rules, an LCP measurement is considered "good" if it happens in under 2.5 seconds.
 

LCP doesn't tell us how long it takes for the whole webpage to load, but it gives us a good idea of how quickly things are happening. Since the amplest thing on a webpage is usually the primary stuff you want to see, like the main text or pictures, the LCP time gives us a good clue about when the webpage seems to load to a user.
 

There used to be another measure called First Meaningful Paint (FMP), which was about when the main content of a webpage first shows up. However, Google decided it needed to be more reliable and stopped using it in some of its tools for checking webpage speed. So now, we look at LCP to see how quickly a webpage loads its significant parts.

Now, we will understand the next core web vitals assessment, INP (replaced FID in March 2024) in the upcoming section.

What is the Interaction to Next Paint (INP)?

INP, early known as First Input Delay (FID) is like the time it takes for a webpage to respond when you click on something for the first time. Let's say you're on a webpage about shoe polishing, and you click to see the following picture of shoe polish. FID measures how quickly the webpage reacts to your click. According to Google's rules, a "good" FID happens in 100 milliseconds or less, which is fast.
 

Moreover, FID doesn't tell us how long it takes for the webpage to finish doing what you asked, like loading the following picture. It only tells us how quickly the webpage starts to do it after you click. So, if you're Alan and click the arrow to see the shoe polish picture, FID is the time between your click and when the picture starts to load.
 

Now, FID is what we call a "field metric," meaning based on watching real people use the webpage, not just guessing. Some other measurements are there, like Total Blocking Time (TBT) and Time to Interactive (TTI), but they're more. TBT measures the duration between when the webpage starts loading and when you can start doing stuff on it. And TTI tells us how long it takes for everything to look loaded and ready for you to play with.

What is the Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is the third main component of core web vitals which aids in measuring how much a webpage disrupts as it loads. When you open a webpage, and things start moving around unexpectedly, that's what CLS is all about. According to Google's rules, a "good" CLS is when this disruption is equal to or less than 0.1.
 

When different parts of a webpage move up, down, or sideways as it's loading, that's called a layout shift. Now, imagine if these shifts happen all together in a big group within just a second – that's what we call a burst. This burst can last up to five seconds and have various layout shifts happening at once.
 

So, let's say Alan is trying to click on the right arrow to see the subsequent picture of shoe polish, but as the page loads, the picture suddenly drops down, and Alan ends up clicking on some text instead. That's a layout shift, and it can leave Alan feeling pretty confused. If this happens a lot on a webpage, it's likely to have a poor CLS score because it's moving around too much while loading.

How to Measure CLS?

Google calculates Cumulative Layout Shift (CLS) scores using a simple equation: the impact and the distance fraction. The impact fraction is like looking at how much of the screen changes when things move around. So, if a webpage loads and suddenly 200 out of 400 pixels on the screen shift, that's a 50% impact fraction because half of the screen changed.

impact fraction * distance fraction = layout shift score

Now, the distance fraction is about how far things move on the screen. For example, a new element on the webpage pushes another element down by 50 pixels. If the screen is 400 pixels high, that's a distance fraction of 12.5% because 50 pixels is 12.5% of 400 pixels. So, the distance fraction measures how much stuff moves around relative to the size of the screen.
 

When you multiply the impact fraction by the distance fraction, you get the layout shift score. It helps Google understand how stable a webpage is and whether it gives users a smooth experience or not. So, the lower the layout shift score, the webpage is more stable and the less likely to confuse visitors.

How to Test Core Web Vitals?

The following section will elaborate on some popular core web vitals testing tools to measure core web vitals:
 

• Chrome UX Report (CrUX): This tool provides accurate data from Chrome users, showing how people experience your website. It gives site owners valuable insights into their Core Web Vitals (CWVs) based on genuine user interactions.
• Google Lighthouse: A free tool that offers lab metrics for CWVs. It's a virtual lab where you can test your website's performance and get practical advice to improve. Lighthouse covers not only CWVs but also SEO, accessibility, and more.
• Google PageSpeed Insights: Combining the functionalities of CrUX and Lighthouse, PageSpeed Insights offers real-world data and lab metrics for CWVs and other necessary web vitals. It's a handy tool for website owners to assess their performance and make necessary improvements.
• Google Search Console: This tool utilizes field data from CrUX to provide CWV performance insights by URL or groups of URLs. It's a helpful resource for monitoring how your website's CWVs are performing and identifying areas for optimization.

Our Learners Also Reads: Google Search Console Tutorial - Full Detailed Guide

How to Fix Core Web Vitals?

The following section will elaborate on three types of Google web vitals for testing each of them.

Improving LCP:
 

• Use a content delivery network (CDN): CDNs are super-fast delivery services for website content. They store copies of your website in different places worldwide, so when someone visits your site, they get it from the nearest location. However, it makes your website load faster for users no matter where they are.
   
• Optimize images: Big images can slow down a webpage, so it's necessary to make them as small as possible without losing quality. This means compressing images to reduce their file size. By doing this, you can help images load faster and improve the Largest Contentful Paint (LCP) metric.
   
• Implement lazy-loading: Lazy-loading is a savvy way of loading stuff on your website. Instead of loading everything at once, it waits until someone needs it. It can make your website load faster because it's not trying to load everything all at once. However, too much lazy-loading can slow things down, so it's best to use it wisely. Google suggests using lazy-loading for images that are "below the fold" or parts of the webpage that users have to scroll to see.

Improving FDI:
 

• Reduce the size of JavaScript functions: If your website has advanced features and interactive stuff, it might slow things down. However, it happens because the browser has to wait for all the code to load before it can do anything. One way to speed things up is by making your JavaScript code smaller. This process, called minification, trims down the code so it loads faster and responds quicker.
   
• Build static webpages: They're simple and quick to read. These pages load much faster than the fancy dynamic ones because they don't have to fetch data from a database every time someone visits. You can learn about static site generators or check out Jamstack, which is all about using static content for faster websites.
   
• Remove unnecessary third-party tools and scripts: Sometimes, we add extra stuff to our websites, like analytics or chat features. But too many of these can bog down your website and make it slow. By removing unnecessary tools and scripts, you can speed up your website and make it more responsive for users. 

Improving CLS:
 

• Minimize third-party page elements: Third-party elements, like ads or social media widgets, can sometimes mess with how a webpage looks as it loads. However, it happens because they come from different places and may take longer to show up. By using fewer elements, you can reduce the chances of your page layout shifting around.
   
• Reserve space for embedded content: Sometimes, you can't remove those pesky third-party elements, like ads, because they're essential for your website's business. But you can make things smoother by setting aside space on your webpage for them to load before everything else. This way, your page layout stays more stable, and visitors won't be surprised by things suddenly popping up.
   
• Ensure images load in the optimal size: You want to ensure your images are just the right size for each screen size, whether a desktop or a smartphone. As a result, it helps prevent your page from jumping around when images load.
   
• Include height and width for images and video: By specifying the height and width of images and videos in your webpage code, you're helping the browser reserve space for them before they even load. As a result, it keeps everything nice and tidy.
   
• Use CSS aspect ratio boxes: With CSS tricks, you can create boxes on your webpage that keep the right proportions even if the content inside changes. It's a neat way to make sure your layout stays consistent no matter what.

Conclusion

Ensuring your website meets Core Web Vitals isn't just easy; it's about giving your visitors a great time. By keeping an eye on things like how fast your site loads, how easy it is to use, and whether it jumps around. Moreover, you're making sure your website stays top-notch. Use the tips we've discussed, keep checking how your site is doing, and keep making it even better.