Ep 3.7: Core Web Vitals for Beginners

Genny:  Good day, marketers. Today we’re talking about Core Web Vitals and how, as nerdy as they sound, they’re actually not that difficult to understand, and in fact, I even guarantee that by the end of this wee little episode, heck, even before I stop to take a breath, that you will understand fully the basic concept of core web vitals because despite its highfalutin’ name, it’s a super simple concept to wrap your head around. I thought this might be a good topic to discuss for today because it’s pretty important but a lot of people see the name and they’re just like, okay fuck that no thank you. But as it turns out, if we’re just talking about the basics, the name is the scariest part, I promise. So, let’s figure it out together, shall we?

Our first order of business: a definition. Your core web vitals are the three basic metrics used by Google to determine if your site offers good user experience. Not surprisingly, these three core metrics are page speed (obvs), interactivity (mhhm), and visual stability (okay makes sense).

Page speed is a no-brainer. It makes pretty much every SEO ranking factor list floating around the internet, and it’s also something that we, as users, can all agree on—the faster the page, the happier we are. The actual metric used to measure page speed is called Largest Contentful Paint or LCP, and it technically counts how long it takes for the main elements—like images, videos, backgrounds, and colours—of the page to load.

More specifically, it looks at how long it takes for the largest page element to be rendered during a page load. With me so far?

Now obviously, the shorter the time, the better the user experience. And that time is very short. We’re all just walking around this earth with goldfish for brains, and we simply cannot tolerate waiting for nutin’.
  
If your LCP clocks in at 2.5 seconds or less, then you have a good LCP score, but once you hit the 4 second mark, that’s when you start to lose SEO points and should probably consider speaking to a doctor. There’s actually a lot more to LCP than what I’ve just described, but this episode was not written by or for aspiring developers, so I won’t dive deeper into the guts and sinew of LCP, but I can show you where to find it!

You can measure your LCP in your core web vitals report in Google Search Console. Your score will either be good, needs improvement, or poor with a list of URLs and their respective issues. If you know what you’re doing, you can fix the issues yourself or share them with your web developer.

PageSpeed Insights can also give you a quick overview of your URL’s core web vitals.

It’s hard for me to offer improvement suggestions without alienating most of the people listening, but if you’re a non-techie person and you’re saying to yourself, “okay, I get it, LCP, page load time, no problem, I can wrap my head around that, so now how do I improve it?” Boy, do I have some basic suggestions for you!

For example, your site, which is hosted in, let’s say the UK, will be slower to load for your Japanese audience than it will for users in the north of France. A content delivery network (or CDN) allows your site to be cached all over the damn place, which will inevitably make loading a lot faster for your global audience. Your host probably offers this already, but you might want to double check that the service they’re offering is actually worth your money.

What else could you do to improve your LCP score? Minimise the amount of redirects in your ads and email campaigns, make sure you’ve targeted the right audience so that there aren’t a ton of randos clicking on your ads and clogging traffic for no apparent benefit, and optimise your images and videos so that you can still have engaging content without being slow.

So that was “largest contentful paint” or LCP, and that was the first third of your core web vitals, ladies and gentlefolk.

Now, what’s the second core web vital? It is called the Interaction to Next Paint or INP or, in layman’s terms, how long it takes for your site to react to the user interacting with the page. INP (god, these sound like Myers-Briggs personality types) covers things like, does anything actually happen when your user clicks the page from the navigation menu or adds something to their cart, and how long does it take? This is essentially measuring how quickly your page interacts with the user. We’ve all had that annoying experience of clicking on a link only for the page to do absolutely fuck all, and you can see that just by the tone of my voice, this is not good for user experience, this is not good for SEO, so page responsiveness is a high priority.

A good INP score is 200 milliseconds or less according to Google. Anything between 200 and 500 milliseconds, so half a second, needs improvement, and anything over 500 milliseconds is deemed poor. Can you even imagine that? SEO is sometimes not measured in these massive differences between you and your greatest competitor. Sometimes, all it takes is literally that half-second advantage for your competitor to outrank you. I oversimplify, of course, we’re only dealing with fractions of seconds, but it makes a huge difference.

There are three phases of a page interaction, starting from when the user first initiates the interaction and ending with the browser presenting the desired visual—which means that you can optimise each phase of your interaction to reduce latency.

Now, this one is a little more complex, and unless you already have an understanding of your core web vitals, even this much might fly right over your head, so if that’s you, and your knowledge of SEO sits somewhere in between theoretical understanding and practical basics, tell your developers to start analysing this data because you can’t figure out how to optimise your INP without it.

If your eyes are starting to glaze over, come back, come back, come back, because we’ve reached the final core web vital, and boy you don’t want to miss it!

Picture this: you’re scrolling through a web page as your thumbs have been trained to do, and you move your digit to click on a button when suddenly the screen shifts before your eyes, and you accidentally click on the wrong link, forcing you to click “back” to the previous page, and the scroll all the way back down to the page to where you were before and to hope and pray that you’ve waited long enough for the screen to adjust so that this time, when you actually do click on the link, you’ve reached your desired destination. This is a real-life scenario that many of us encounter in our digital lives, but it’s an example of poor user experience and most likely a poor layout shift score.

The last core web vital, called cumulative layout shift, measures this exact thing. More specifically, it looks at any unexpected layout shifts that occur in page elements that have already been rendered, like in the example I just provided above. This is specifically for unexpected layout shifts, because there are many scenarios in which a user can initiate a layout shift, which is obviously fine. Not that this will make much sense to you now, but a good CLS score will be no more than 0.1 for at least 75% of page visits.

Now, what are the main causes for pages suddenly jumping all over the place? The most common culprits are certain fonts, elements without fixed dimensions, like images and videos, and ads, embedded content, and any late-loading content. And here are some ways to optimise the cumulative layout shift:

Make sure to set your image dimensions. Next, you can make space in your page layout for late-loading content. Try to avoid adding ads in the middle of your page, as they tend to shove content down. A neat trick for avoiding unexpected layout shifts is letting the user initiate them, for example, adding a Load More button.

And that’s cumulative layout shift.

So in general, how does one optimise their core web vitals? If you’re a decision-maker or marketing, start by engaging with a web developer who can monitor your site and either make the changes directly or recommend changes to your team.

So, at the top of the episode, I told you that core web vitals is super easy to understand, and even though I nearly fell into a coding rabbit hole, I still maintain that the basic concept of core web vitals is still fairly simple for anyone to wrap their heads around. Let’s look at the definition again: your core web vitals are the basic metrics that Google uses to determine what is effectively user experience. If your site loads quickly, is responsive when someone clicks, swipes, or enters their information, and provides a stable experience, then your core web vitals are probably in good shape.

Then again, if we’re talking about user experience on a whole, you know what you need to do. UX is crucial—you cannot fake it. Google’s getting freakishly good at determining if your site is serving SERPs or humans, and core web vitals I suppose is just one of the ways in which it quantifies the quality of the experience on your site.

So, next month, pending global disaster or just a change of heart, we will be discussing marketing in a post-cookie world, so stay tuned for that.

Thanks for joining me on this quick, top-level tour of Google’s Core Web Vitals. If you have any questions for me or my team, feel free to email us at team@geekytech.co.uk or DM us on our socials @geekytechgeeks.

That’s all for now marketing geeks. See you next month.