Core Web Vitals: A 2021 Rank Metric You Should Know

User experience has been increasing in importance over the years in regards to better search engine rankings – and now with the release of Core Web Vitals – it is critical you maximize the user experience of your website!

Google takes the experience their users have seriously and the introduction of Core Web Vitals is solely focused on improving the quality of websites so visitors can have the best experience possible.

This will ultimately be a ranking signal – so ensuring you are creating a website that passes the

I am going to try and break down as simply as I can what Core Web Vitals are and what you will need to focus on to have the best chance of having great scores.

What Are Core Web Vitals?

Core Web Vitals are a set of metrics that evaluate the responsiveness, speed and page stability of your website.

It is said that Google will be adding new metrics to the Core Web Vitals as time goes on – but for now there are just these 3.

1 | Largest Contentful Paint (LCP)

This metric identifies the time it takes for the content of your page to be loaded and visible to your visitor. It is already taken into account in PageSpeed Insights and some other testing tools.

The target time for this metric would be under 2.5 seconds.

Simple tips to improve LCP include:

• Fast server – meaning get off the cheap hosting!
• Remove render blocking files
• Proper image sizing and lazy loading

2 | First Input Delay (FID)

This is the point at which the visitor can begin interacting with the website whether they are clicking a button or entering data into a field. Basically you want your page to be as usable as possible as early as possible!

The target for this would be under 100ms.

FID will largely be based off the LCP – if your website loads fast, then the ability for your visitor to do an action will be quicker!

3 | Cumulative Layout Shift (CLS)

This metric gives a measurement of the visual stability of your website. This is the one that might be a little more confusing and difficult for beginners to diagnose if your scores are low.

The CLS is basically a calculated score that measures the instability of the content on your page.

As an example – someone goes to click a button, but then it moves – that would be a CLS. This also happens a lot with ad networks — think about how many times you started reading an article – then an ad appears and shifts the next paragraph down the page.

Some of the most common reasons Cumulative Layout Shift happens are:

• Images – if you are not adding image dimensions to your image html then a shift can happen while the page waits to load the image not knowing what the size is. Typically in a WordPress site this will not be an issue unless you have some custom images in your code.
• Ads – If you are using some type of ad network on your website it is important to make sure the ad space has a specified height and width so when the page loads there is no “delay” because they search engine is trying to figure out the size – which will then cause a “shift” in the content above and below it.
• Fonts – When web fonts are downloaded they can sometimes have a flash of invisible or un-styled text – commonly called FOIT or FOUT. Both of these can have an affect on the shifting of content. When you add rel=”preload” to your font link it will prevent these issues.
• Embeds – If you are adding videos or Instagram embeds without size specifications it may affect CLS.

You can get more information about CLS here.

The target CLS would be less than .01.

Below is a visual of the 3 metrics and the zones for good, needs improvement and poor.

Core Web Vitals As A Ranking Signal

Google has announced that Core Web Vitals will become a ranking signal in 2021. They have also mentioned that they would give webmasters 6 months notice prior to them making this happen.

This gives you plenty of time to assess your website and make any required improvements so you are ready when they are!

Analyzing Your Core Web Vitals

There are several different ways you can find out how you are doing with your Core Web Vital metrics – I am only going to share my favorites below.

Chrome Extension

There is a Chrome extension available that will show you your website metrics at any time – and any other website as well.

Once you install it you will see a small box icon in your window and when you are on any website page you will see the CLS metrics for that page.

PageSpeed Insights

Doing a routine PageSpeed Insights test will now give you your web vital metrics.

Testing in PageSpeed Insights will essentially give you 2 types of data:

• Field data which is your actual visitors experience (this is probably the more important area to focus on although the Lab data should be evaluated as well)
• Lab data which is a simulation of a visitors experience

The Field Data summary area showcases blue ribbons next to the items that are part of the Core Web Vitals metrics. This data in simple terms is an “average” of the Chrome User Experience Report (CrUX) data collected for the page you entered over the last 30 days compared to other websites.

In the example below it is telling me the page over the last 30 days has not met the Core Web Vitals requirements, but since this such a new thing, I would expect most of you will see this and would not stress it at that point.

If you click on the little blue box labeled Show Origin Summary you are then delivered a second similar visual but it will be for your whole domain not just the page you entered.

WebPageTest

I am a huge fan of WebPageTest and use it – a lot! Now that they have included the Core Web Vitals in the tool it is even better!

There is a little section now called Web Vitals where you can see the LCP and CLS.

If you see your web vitals scores are not good – use the waterfall to help you see where your bottleneck is for the LCP. Then take a look at your website to see if you can find where the shift is happening on your website to trigger a poor CLS score.

Once I have had more time to test – I will note below where I am finding issues that are impacting CLS scores to help you troubleshoot your own.

Layout Shift Generator

There is now a pretty cool tool that will help you see where you may be having issues in an easy visual way.

https://defaced.dev/tools/layout-shift-gif-generator/

Google Search Console

Google Search Console is another way to see how you are doing with the Core Web Vitals as well. In the enhancements section you will see a link that will take you to a screen like the one below.

The chart shows me that I have 77 poor performing URLs in both mobile and desktop.

Clicking on the Open Report link will then take you to a page that will show you what the issues are that are causing your poor scores. In my result I am seeing there is a CLS issue – so I can click on that and see the affected pages or choose to validate my fixes.

NOTE: I often find GSC sometimes gives false positives or negatives for things like this. When I ran a test in webpagetest.org it said I had not CLS issues. I am just going to choose to “validate fix” in GSC and see what happens since I do not think there is any real CLS issue.

Real Life Cumulative Layout Shift Issues

Below are a few reasons we found the CLS value to be high – once these were fixed – the CLS improved. Sharing these as references for you to have a baseline to check on your own website if your CLS is high.

1. Logo image did not have specified height set in the CSS. It has a width, but no height – adding the height greatly improved the CLS score.

Latest News About Core Web Vitals

Below I will link to some great additional resources or news that is related to Core Web Vitals.

12/10/20 – Noindexed Pages Can Impact Core Web Vitals

Final Thoughts

I am actually thrilled about the addition of Core Web Vitals and think going forward it will help us have a better internet! How much it will affect ranking – well, we do not know, but we do encourage everyone to begin the process of improving their websites to be ready when they flip the switch for this new ranking metric!

Have questions?
Concerns?

Need help improving your page speed and performance – I can help – just reach out for details!