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. So, we’re in it together. Stick with me, we’ve got this.
What is 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 popups. And the reason that we care about Core Web Vitals so much right now is that Google has announced that from May 2021 is gonna form part of their search ranking algorithm. So, whilst page experience has always been an important thing.
Page experience score utilising Core Web Vitals is gonna be really important and it’s only gonna get more important. So, at a time of worldwide pandemics and lockdowns and all the stress that we’re all going through, why is Google heaping yet more pressure on us poor webmasters?
Well, if we think about how Google’s business model works it relies on you, me, us being addicted to their search engine and in order 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 as a millennial every day that you own one of these your attention span drops by 5%. So, Google needs to serve up websites quicker and quicker to its users in order to satisfy our goldfish like short-term memories. And in order to do that, it’s announced this kind of set of usability, user experience standards which we’re now being required to live up to in order 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 minute.
How Important is Core Web Vitals?
Firstly, let’s talk about how important this thing really is because no one actually knows yet. All Google has announced is that this is gonna form part of their ranking algorithm. There’s 200 different ranking factors. Page experience is only one of them.
So, we don’t know how heavily it’s going to be weighted. Google has given us a prior warning and to be fair quite a lot of prior warnings. So, we can read into this that this could potentially be quite an important update but there’s actually no need to panic. Because if you think about it many website owners really don’t know that this is gonna happen and their websites are gonna be totally unprepared when May 2021 comes around. So, what’s gonna happen.
Are all of these websites just gonna instantly disappear from Google search results?
Probably not. What that does mean though, is that if you conform to these usability standards then it’s a good chance to get ahead against competitors that may not be. So,there’s really no need to go into a blind panic. After all, as someone commented in one of our recent Friday digital marketing workshops, Google’s own website doesn’t score 100% on these Core Web Vitals measurements.
Okay, so that’s a little bit of context. Let’s get into some of the specific areas of Core Web Vitals.
1. Large Contentful Paints (LCP)
The first area that we need to consider, and the one that’s probably gonna be most significant for most websites is something called Large Contentful Paints or LCP, really the names they give these things don’t exactly help, do they?
This is basically 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.
This isn’t just, you know, lab-type testing where they’ll ping your site and see how long it takes. These are actually real people using Google’s Chrome browser. So, all of this user data feeds back to Google, so Google can understand how people are actually using your website and the experience that they’re having in real-time.
Now, in order 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 seeing your content loaded needs to be 2.5 seconds or less. Now I know what you might be thinking, this is hardcore. It is if you have a site that has a lot of third-party scripts, even if these third–party scripts are things like YouTube, Google analytics, stuff that Google owns, you’re gonna find it really difficult 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 gonna 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.
Let’s have a look at how some sites across the internet perform under the LCP category.
Let’s start with google.com. Now, by the way, Google’s page speed insights score on mobile is 55 out of a hundred, so not great. Largest Contentful Paint, as part of the field data from the Google Chrome user experience report actually has them winning 1.7 seconds, so that’s below the 2.5-second threshold. Interestingly, under lab data, it’s failing 6.4 seconds.
Let’s take a look at another well-known site that seems to be doing okay, bbc.com. Come on.
Ouch, all that license fee payer money, and the Largest Contentful Paint is happening within three seconds. That’s way above the 2.5 seconds threshold and actually means that the BBC’s website does not pass the Core Web Vitals assessment. It also fails on Cumulative Layout Shift, which we’ll come. If you thought Largest Contentful Paint was fun, you wait ’til we get to CLS.
Hmm, let’s see if the crane can pick up itself, and let’s go SuperMeta. Let’s put PageSpeed Insights through PageSpeed Insights. Oh dear, well, you can see here that PageSpeed Insights also does not pass the Core Web Vitals assessment, but the Largest Contentful Paint at 1.5 seconds is below the 2.5 seconds threshold.
Unfortunately, First Input Delay is 250 milliseconds instead of 100 milliseconds and the Cumulative Layout Shift is 0.5 instead of 0.1, (fingers click) sad times. So, stepping back to the big picture.
So don’t get into a blind panic thinking that this is gonna be the end of your website if you can’t get these metrics to where they need to be. Get as good as you can. Let’s say that your Largest Contentful Paint score though is giving you the night sweats and you’re a bit panicked about how it’s gonna impact your ranking.
How can you get around this?
How can you lower your score?
Well, there are a few key areas to look at.
Firstly, images. If you’re loading images on your site and you’ve just uploaded them in their super high res, you don’t have to reduce their resolution in order to reduce the file size. We love using plugins like ShortPixel which works for WordPress and is a great image compression plugin, which basically compresses the image size without visibly decreasing the image quality. Another area to look at is reducing our use of third-party scripts.
And if you’ve got conversion tracking codes from, you know back in the day when Twitter ads were even considered to be a viable option, then you might want to remove that stuff. If you’re using a content management system like WordPress, you might also want to remove any unused plugins that you’ve got. Now for most WordPress sites a number of plugins are gonna be necessary but anything that’s not being used considers removing.
Remember to backup first.
You might also want to consider implementing lazy loading. Now it’s way beyond the scope of this article. And to be honest, to talk you through the process of getting lazy loading implemented on your site. But essentially what you’re looking to do is only load the visible content on the site. But then as someone scrolls down the page, you’ll load the information that they need to see. This means they don’t have to wait for the whole page to be loaded before they can start browsing around your website.
And the final thing to think about is your web hosting. If page speed insights have given you a load of gyp about your website hosting and calling it all sorts of names, including possibly slow, then you might want to consider upgrading your hosting to one that is faster, or there is better optimised to the website platform that you’re using.
Now I’m hesitant here to say that if you’ve got cheap hosting you need to get expensive hosting or that if your website is slow, then you have cheap hosting, because honestly, we’ve seen cheap hosting and expensive hosting that’s slow. So, the key here is to find a hosting which is fast enough to run your website as quickly as possible. And if possible, to get it over the Core Web Vitals threshold, the Largest Contentful Paint.
2. First Input Delay (FID)
The next chapter in our thrilling foray into Core Web Vitals is something called First Input Delay or 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 really 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 actually think this is very fair because then Robert Miller’s 1968 report, which I know you have as your bedtime reading, called “Response Time in Man-Computer Conversational Transactions”, he found that 100 milliseconds was the length of time it took for something to appear to be instantaneous.
Now, I don’t know where Google chose 100 milliseconds ’cause Robert Miller discovered that 100 milliseconds is what it took to feel instantaneous, not sure. But the point is that your website essentially has that response 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 well when someone clicks on my website, of course, responds instantaneously.
There could be scripts that are running in the user’s browser, which actually mean that when that user clicks, the browser says, “Nah sorry, you must wait until I finished loading these scripts.” So, repeat, F-I-D First Input Delay is not clicking on it and when it loads. It’s clicking on it and how long does it take for your website to respond to that click?
3. Cumulative Layout Shift (CLS)
Okay, let’s look at the third and final metric Cumulative Layout Shift. Now, if you thought that Largest Contentful Paint and First Input Delay was exciting then Cumulative Layout Shift is gonna blow your mind. Now, have you ever noticed that thing?
When you go on a website and you’re reading through and 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, what’s often happening there is that there’ll be some form of image or, you know, 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 gonna 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. Don’t really know-how, and I’m definitely not gonna research it ’cause it sounds super geeky. And every time that layout shifts, Google gives it a score. I don’t really know how it scores. And to be honest, I don’t care.
But the Cumulative Layout Shift is the total score of all of the layout shifts that occur on a page. Basically, do your pages do that annoying bouncing up and down thing. Now your Total Cumulative Layout score in order to pass web vitals needs to be 0.1 or lower. So, we can see here, the BBC failing at 0.3 because that needs to be 0.1 in order for them to pass Core Web Vitals. Okay, we made it.
Actions to Take
So, here’s what you need to do in order to get yourself through Core Web Vitals. First thing, go to Google Page Speed 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’s very difficult 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 on those add blocks that might be loaded with content in different sizes? Remember also to 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.
You did it, so I hope you’ve enjoyed this article and I hope you found it useful. Good luck with Core Web Vitals and don’t forget if you enjoy learning about digital marketing.