You may have seen Google announced that Core Web Vitals are an upcoming search ranking factor in May 2021. These metrics include the core web vitals, which, together with a few other signals like HTTPS, Mobile-friendliness, and Fewer interstitial pop-ups.
We're your Core Web Vitals Developers!
We will fix the core web vitals issue on reported URL's then submit them until they are in the 'Green' section..
But what are the core Web vitals, and how do you go about optimizing for them well, or web vitals are a set of metrics related to speed responsiveness and visual stability. Now, these three aspects of user experience are measured using three metrics.
- So, first of all, we have the Largest Contentfull Paint (LCP), which measures loading performance.
- Then, next up, we have the First Input Delay (FID), which measures interactivity.
- And last, we’ve got Cumulative Layout Shift (CLS), which measures layout stability.
There’s a potential for Core Web Vitals to be a little bit boring. But if we think of it as a boring checkpoint that we need to get through in order to get to the exciting stuff of ranking, trafficking, conversions, then we’ll be okay.
What are Core Web Vitals?
Well, Core Web Vitals is a set of measurements that forms part of Google’s page experience score along with side things like mobile optimization, use of HTTPS, and not using annoying interstitial pop-ups.
And the reason that we care about Core Web Vitals so much right now is that Google has announced that from May 2021, it will form part of their search ranking algorithm. So page experience has always been an important thing.
Page experience score utilizing Core Web Vitals is significant, and it’s only going to get more critical. Why is Google heaping more pressure on webmasters?
Well, if we think about how Google’s business model works. It relies on you, me, and us being addicted to their search engine and to keep us addicted to the search engine.
So we keep clicking on those profitable ads for Google. It needs to give us websites very quickly. Otherwise, we get bored and impatient. Because don’t forget that you own one of these.
So Google needs to serve up websites quicker and quicker to its users in order to satisfy our goldfish like short-term memories. And to do that, it announced this kind of set of usability, user experience standards which we’re now being required to live up to enjoy maximum Google rankings.
So basically, make your website fast, get ranking, right?
Well, it’s a little bit more nuanced than this. We’ll be looking at the specifics in just a moment. Firstly, let’s talk about how this is important.
How Important are Core Web Vitals?
Google has announced that this is part of their ranking algorithm. There are 200 different ranking factors. Page experience is one of them.
So we don’t know how heavily Is it?
Google has given us prior warning and, to be fair, quite a lot of prior warning. So we can read into this that this could potentially be quite a significant update, but there’s no need to panic.
So what’s going to happen?
Are all of these websites just going to disappear instantly from Google search results?
Probably not.
What that does mean, though, is that if you conform to these usability standards, then it’s an excellent chance to get ahead against competitors that may not be. So there’s no need to go into a blind panic. Google’s own website doesn’t score 100% on these Core Web Vitals measurements.
Let’s get into some of the specific areas of Core Web Vitals. The first area that we need to consider, and the one that’s probably gonna be most significant for most websites, is Largest Contentful Paint (LCP).
Large Contentful Paints (LCP)
This is the time it takes from someone clicking on your website to the time when they can see the majority of your content. This is a user timing metric, and you can check it, like all of the Core Web Vitals metrics in Google’s page speed insights tool.
And this tool also gives you some really handy real-world user information from the Chrome user experience report (CrUX). This isn’t just, you know, lab-type testing where they’ll ping your site and see how long it takes.
Real people are using Google’s Chrome browser. So all of this user data feeds back to Google, so Google can understand how people are using your website and the experience that they’re having in real-time.
Now, for you not to find yourself in Core Web Vitals jail, your LCP or Largest Contentful Paint timing needs to be below 2.5 seconds. So from when someone clicks on your site to see your content loaded needs to be 2.5 seconds or less.
Now I know what you might be thinking. This is hardcore. Suppose you have a site with many third-party scripts, even if these third-party scripts are like YouTube, Google analytics, and stuff that Google owns. You’re going to find it challenging to get that score underneath 2.5 seconds.
Likewise, if you have a website that has loads and loads of images, particularly high resolution or large images, for example, used as backgrounds. Again, this is going to be a very, very difficult target to hit.
If you have a very long page, potentially this could be difficult to hit, but if you do find yourself falling foul of the LCP score and you end up in Core Web Vitals jail, fear not, you’ll be in some great company.
What Causes Poor LCP?
- Slow Server Response Times
- Render-Blocking CSS and JavaScript
- Client-Side Rendering
- Resource Load Times
Read: How to Improve Largest Contentful Paint (LCP).
Okay, the next chapter in our thrilling foray into Core Web Vitals is…
First Input Delay (FID)
Now, this metric is essentially the time it takes for your website to respond when your user does something. So when your user clicks on something or when they interact with your site in some way.
Now what’s important is this is not the time it takes for your website to give them a response. This is just the time it takes your website to respond to that action.
Basically, when someone clicks on your site, Google wants your website to respond within 100 milliseconds. Google wants your First Input Delay to be 100 milliseconds or less.
Now, I don’t know where Google chose 100 milliseconds. But the point is that your website essentially has to respond instantaneously. That doesn’t mean it has to load instantaneously. It means that the stuff that’s going on behind the scenes has to happen instantaneously.
Now you might be thinking, when someone clicks on my website, of course, it responds instantaneously. There could be scripts running in the user’s browser, which means that when that user clicks, the browser says, “Nah, sorry, you must wait until I finish loading these scripts.”
It’s clicking on it, and how long does it take for your website to respond to that click?
Cause of First Input Delay
- Images and Scripts
- Large Javascript
Read: How to Optimize First Input Delay?
Okay, let’s look at the third and final Core Web Vitals metric…
Cumulative Layout Shift (CLS)
Now, if you thought that Largest Contentful Paint and First Input Delay were exciting, then Cumulative Layout Shift is going to blow your mind.
Now, have you ever noticed that thing?
When you go on a website, and you’re reading through a band, all of a sudden, the text moves, it moves up, you scroll up, try to read it, Oh, then it moves down, and you’re like, what is going on here? Well, there’s often happens that there’ll be some form of image or an advert block on that page, which is loading, and it’s automatically resizing to fit the content.
This is called layout shift, and it’s super, super annoying.
So Google is going to punish sites that do that. So hopefully, we’ll see less of it.
Basically, every time that happens, that’s called a layout shift, and Google gives that layout shifts a score. And every time that layout shifts, Google gives it a score. But the Cumulative Layout Shift is the total score of all of the layout shifts that occur on a page.
Do your pages do that annoying bouncing up and down thing. Now your Total Cumulative Layout score to pass Core Web Vitals needs to be 0.1 or lower. So we can see below, the WashingtonPost is failing at 0.1 that’s perfect for them to pass Core Web Vitals:
What is Causing CLS?
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM
Read: How to Improve Cumulative Layout Shift (CLS) in 2021
Conclusion: What You Need To Do?
So here’s what you need to do to get yourself through Core Web Vitals. First thing, go to Google PageSpeed Insights. You can just Google that and see where your site is currently falling down. It’ll show you down here under opportunities.
It’ll show you the different time savings that you can get through fixing some of these issues. You’re unlikely to be able to fix all of them. And it isn’t easy to get your site to 100 unless you are a professional speed optimizer, but it will show you the main areas to focus on to get your score up.
If you’re failing Core Web Vitals, then have a look at First Input Delay, Cumulative Layout Shift, and Largest Contentful Paint. Remember that Largest Contentful Paint is about what’s visible and how quickly it loads.
First Input Delay is how fast your website responds or what sort of scripts are running in the background in the browser, which stops the website from responding quickly, and Cumulative Layout Shift is all about does your site do that annoying shift thing?
So can you put any kind of height locks on those sliders or those add blocks that might be loaded with content in different sizes. Remember also crush your images down, if you possibly can, remove any unused scripts or plugins that you’ve got installed.
And also, have a look at your server speed if it’s not up to scratch. If you need help with this, the team here at WebVitalsDev is more than happy to help you. You can either drop us a message through the email or contact form.
We have a development team that fixes CWV errors for our clients. So drop us a message or see our Pricing if you’re struggling with Core Web Vitals stuff, and we’ll fix all Core Web Vitals errors for you. You did it, so I hope you’ve enjoyed this article, and I hope you found it helpful.
Good luck with Core Web Vitals, and don’t forget to share.
