What Are Core Web Vitals?
Google considers Core Web Vitals to be a set of unique factors that contribute to a webpage’s overall user experience. Three basic page speed and user engagement metrics make up Core Web Vitals: largest contentful paint, first input delay, and cumulative layout change.
In a nutshell, Core Web Vitals are a subset of variables that will be used in Google’s “page experience” score (basically, how Google evaluates your page’s overall user experience).
The Core Web Vitals data for your site can be found in the “enhancements” section of your Google Search Console account.
Why Are Core Web Vitals Important?
Page experience will be an official Google ranking consideration in the future.
The user experience on a page will be a jumble of factors that Google considers significant, including:
- HTTPS is the secure version of HTTP.
- Adaptability of mobile devices
- There aren’t any interstitial pop-ups.
- “Safe-browsing” (basically, not getting malware on your page) will be a big part of that ranking, and Core Web Vitals will be a big part of that.
Indeed, based on the announcement and the name, it’s safe to assume that core site vitals will account for the majority of your page experience ratings.
It’s important to note that a high page experience score won’t automatically propel you to the top of Google’s search results. In fact, Google quickly clarified that page experience is one of many (approximately 200) factors that they consider when ranking websites in search.
That being said, there’s no reason to panic. You have until next year to boost your site’s Core Web Vital ratings, according to Google.
However, if you want to boost your Core Web Vitals score before then, that’s fantastic.
Since I’m going to break down all three Core Web Vitals in this guide. And I’ll show you how to make each one better.
Largest Contentful Paint (LCP)
LCP is the time it takes for a website to load from the perspective of a real user.
In other words, it’s the time it takes from when you click a link to when you see the majority of the content on your computer.
LCP is distinct from other pagespeed indicators. Many other page speed metrics (such as TTFB and First Contextual Paint) don’t always represent what it’s like to open a webpage for a consumer.
LCP, on the other hand, focuses on the most important aspect of page speed: the ability to see and communicate with your page.
Google PageSpeed Insights will help you determine your LCP ranking.
Which is beneficial. Especially when it comes to identifying areas for improvement. When you use Google Pagespeed Insights instead of a method like webpagetest.org, you can see how your page worked in the real world (based on Chrome browser data).
However, I suggest that you examine your LCP data in your GSC.
What is the reason for this?
The data in Search Console comes from the Chrome User Experience Report, much like it does in Google PageSpeed Insights.
Unlike PageSpeed Insights, however, LCP data is visible throughout the entire web. As a result, rather than reviewing random pages one by one, you get a list of URLs that are good, bad, or somewhere in the middle.
Google has detailed LCP guidelines on the subject. They categorise LCP speed into three categories: good, needing improvement, and poor.
In other words, you want every page on your web to reach LCP in less than 2.5 seconds.
For massive web sites, this can be a real challenge. Alternatively, sites with a lot of features.
This page on our web, for example, contains hundreds of high-resolution photographs.
As a result, the LCP on that page is 5.1 seconds (considered “poor”).
That isn’t a justification. However, it demonstrates that enhancing LCP is more complicated than simply installing a CDN. We will have to delete some photos from the page in this situation. Also, clean up the code on the website.
Is it difficult to work? Certainly. Is it worthwhile? Without a doubt.
Following that, here are some items you can do to boost the LCP of your website:
- Remove any unnecessary third-party scripts: according to our recent pagespeed report, each third-party script slows a page by 34 milliseconds.
- Upgrade your web hosting service: Overall, better hosting equals quicker load times (including LCP).
- Set up lazy loading: Lazy loading prevents images from loading before the user scrolls down the tab. As a result, you’ll be able to reach LCP much more quickly.
- Remove large page elements: Google PageSpeed Insights will tell you if an element on your page is slowing down the LCP.
- Reduce the size of your CSS: LCP times can be greatly slowed by bulky CSS.
First Input Delay (FID)
After that, let’s look at Google’s second Core Web Vital: Delay between the first and second inputs.
As a result, your page has now achieved FCP. However, the question is whether or not users would be able to communicate with your website.
That’s exactly what FID tracks: the amount of time it takes for a user to communicate with your website.
Here are some examples of interactions:
- Choosing an option from a menu
- Clicking on a link in the site’s navigation
- Entering your email into a field
- Opening up “accordion text” on mobile devices
FID is essential to Google because it considers how real-life users communicate with websites.
They have strict requirements for what constitutes an appropriate FID, much like FCP.
FID does, in fact, monitor how long something takes to happen on a page. So it’s a page speed score in that context. However, it goes a step further and calculates the time it takes for users to complete a task on your website.
FID is generally not a big deal for a website that is entirely material (like a blog post or news article). Scrolling down the page is the only true “interaction.” Alternatively, pinching to zoom in and out.
In reality, my site’s FID isn’t even reported by my Search Console.
It’s probably because I don’t have any login accounts. Or other pages where someone needs to enter information right away.
FID, on the other hand, is critical for a login page, sign-up page, or any other page where users could quickly click on something.
The time it takes for the content to load on a login page like that isn’t all that relevant. What matters is how easily you can begin entering your login information.
Following that, here are some suggestions for improving your site’s FID ratings.
- Remove any third-party scripts that aren’t absolutely necessary: Third-party scripts (such as Google Analytics, heatmaps, and so on) can have a negative effect on FID, just as they can with FCP.
- Make use of your browser’s cache: This speeds up the loading of content on your website. This makes it possible for your user’s browser to complete JS loading tasks even faster.
Cumulative Layout Shift (CLS)
CLS (Cumulative Layout Shift) is a metric that measures how stable a page is as it loads (also known as “visual stability”).
To put it another way, if the elements on your website shift around as the page loads, you have a high CLS. This is a negative thing.
Instead, you want the elements of your website to be reasonably stable when it loads. When the page is fully loaded, users won’t have to re-learn where links, photos, and fields are located. Or you could accidentally click on something.
The following are the basic requirements that Google has set for CLS:
Here are a few quick steps you can take to reduce CLS.
- For any media (video, photographs, GIFs, infographics, and so on), use the following set size attribute dimensions: The user’s browser will know exactly how much space the feature will take up on the page this way. And it won’t adjust on the fly until the page is fully loaded.
- Ensure that all ad components have a dedicated space: Otherwise, they can appear unexpectedly on the page, moving content to the left, right, or to the side.
- Below the fold, add new UI elements: That way, they don’t force down content that the user “expects” to stay put.