Core Web Vitals are the speed metrics that are part of Google's Page Experience Signals that are used to measure user experience. The metrics measure the visual load with Largest Contentful Paint (LCP), visual stability with cumulative layout shift (CLS) and interactivity with the first entry delay (FID).
The page experience and the included Core Web Vital metrics will be officially used for ranking pages in May 2021.
The easiest way to see the metrics for your website is from the Core Web Vitals report in the Google Search Console. The report makes it easy to see if your pages are rated as "Bad URLs", "URLs Needed Improvement", or "Good URLs".
The report provides more detailed information about the specific issues and a list of the affected pages.
Quick facts about Core Web Vitals
Fact 1: The metrics are split between desktop and mobile, but only mobile signals are used for ranking pages. Google will switch to 100% mobile-first indexing in March. Therefore, it makes sense to use the speed signals for mobile devices, as the indexed pages are also based on the mobile versions.
Fact 2: The data comes from the Chrome User Experience Report (CrUX), which records data from activated Chrome users. The metrics are rated at the 75th percentile of users. So if 70% of your users are in the "good" category and 5% are in the "needs improvement" category, your page will still be classified as "needs improvement".
Fact 3: The metrics are scored for each side. However, if there is not enough data, John Mueller indicates that signals from portions of a site or the entire site can be used.
Fact 4: With the addition of these new metrics AMP will be removed as a requirement from the Top Stories feature on mobile devices. Since new stories do not contain data on the speed metrics, it is likely that the metrics of a larger category of pages or even the entire domain will be used for it.
Fact 5: Single page applications don't measure some of the metrics. FID and LCPthrough side transitions. We'll talk about what that is in a moment.
Fact 6: The metrics can change over time, and the thresholds can change too. Google has already changed the metrics for measuring speed in its tools over the years, as well as the thresholds for what is considered fast or not. It is very likely that this will change again in the future. In fact, we did some work last year to improve the previous metrics, but we need to do some work again to improve the new metrics.
Are Core Web Vitals important to SEO?
To set expectations, remember that there are over 200 ranking factors. I wouldn't expect much improvement from upgrading the Core Web Vitals. It's unknown how much they affect ranking, but it's likely not a strong signal, especially given the fact that many of the page experience components have already been used by Google to determine the ranking.
Let's take a closer look at the most important web vitals.
Components of Core Web Vitals
Largest content color (LCP) – Loading
LCP is the largest visible element loaded into the viewport.
The biggest element will usually be a featured image, or maybe that
Day, but could be one of these:
- Element in one
- The picture in one
- Background image loaded with the url () function
- Blocks of text
As you can see LCP
In PageSpeed Insights, the LCP The item is specified in the Diagnostics section. For the tested page, the LCP is our picture in the blog post.
In Chrome DevTools, do the following:
- Performance> Activate "Screenshots".
- Click Start Profiling And Reload Page.
- LCP is on the timing diagram
- Click on the node. This is the item for LCP
With our LCP Since the element on this and many other pages is the featured image, we can probably improve this by preloading this image or possibly pasting the entire image to download the image along with the image HTML Code. Basically we want to load this picture faster than currently.
Cumulative layout shift (CLS) – visual stability
CLS Measures how elements move or how stable the page layout is. It takes into account the size of the content and the distance it moves. A major problem with the metric is that it continues to be measured even after the page loads for the first time. Google is taking feedback on this particular metric, so we'll likely see some changes to it in the future.
It can be annoying when you try to click on something on a shifting page and end up clicking something that you didn't intend. It happens to me all the time. I click on something and all of a sudden an ad and not even on the same website. As a user, it's frustrating.
Common causes of CLS lock in:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Applying fonts or styles later in the load
As you can see CLS
In PageSpeed Insights, see Diagnostics for a list of items that are being moved.
Using WebPageTest. In Filmstrip view, use the following options:
- Select layout shifts
- Thumbnail size: Huge
- Thumbnail interval: 0.1 sec
Notice how our fonts are reformatted between 5.1s and 5.2s, which changes the layout when our custom font is applied.
You may want to try Layout Shift GIF Generator.
The Smashing Magazine also had an interesting technique where they outlined everything with a solid 3 pixel red line and recorded a video of the page loading to see where layout shifts were happening.
For our test page, we may want to preload our custom font, delete the custom font entirely (this will be doubtful), or use a default font for the initial page load and only load our font on subsequent page load. These have tradeoffs in terms of branding, style, consistency, etc., and we have to decide which path is best.
First entry delay (FID) – interactivity
FID This is the time from when a user interacts with your page to when the page responds. You can also think of this as responsiveness. This does not include scrolling or zooming.
- Click a link or button
- Enter text in an empty field
- Selection of a drop-down menu
- Click a check box.
It can be frustrating to click on something and nothing happens on the page.
Not all users interact with a page, so they may not have one FID Value. This is also why lab testing tools don't have the value because they don't interact with the page. Use total blocking time (TBT) instead.
Cause for FID
A page cannot respond to user input while a task is in progress. This is the delay that is felt. The longer the task, the longer the delay for the user. The pauses between tasks are the ways the page has to switch to the user input task and act on what it wanted to do.
Tools for measuring core web vitals
The difference between laboratory and field data is that field data looks at real users, network conditions, devices, caching, etc., and laboratory data is consistently tested under the same conditions in the hopes that test results are repeatable.
I like the report in GSC You can view the data for many pages at once, but the data is somewhat lagged and is a moving average of 28 days. As a result, it may take some time for changes to appear in the report. In Chrome 88, Google Core adds Web Vitals right into DevTools.
You can also find the rating weights for Lighthouse at any time and view the historical changes.
You want to improve Core Web Vitals so that your users have a better experience. It remains to be seen what impact they will have SEOAs I mentioned in my page speed article, they should help you capture more data in your analysis, which feels like a boost.
Collaborate with your developers. You are the experts here. Page speed can be very complex. When you're alone, you may have to rely on a plugin or service to handle this WP Rocket or NitroPack.