What are Core Web Vitals and Why They’re Vital for Your Business Site Ranking?
Google recently announced that Core Web Vitals will become significant ranking factors for websites from May. This is an incredibly big announcement that will change the results as we know it, so in this podcast we welcome veteran web development expert Sandeepa Nayak of Kha Creation to discuss Core Web Vitals, what they are, how to check your site, and what you can do to fulfill the requirements.
Adam: Hello everybody. This is Adam from local SEO in 10. And today actually I have a guest and it's not Jamie. I know you've come here every week, hoping to hear Jamie's dulcet tones, our tones, but not today, but there's a reason why Jamie's not here, actually. I wanted to talk about core web vitals and why they are vital for your business site ranking. And what that means is Google recently announced from May, 2021, that if your site doesn't live up to their expectations for these core web vitals, then they are going to deprecate those results. So they're going to push down those sites that don't and conversely, they're going to push those sites that do up. And so today I thought I'd have, it'd be great to have a friend of mine. Who's a website expert and a web developer, extraordinary. Her name is Sandeepa and she's with KhaCreation. Sandeepa, how are you?
Sandeepa: I'm doing well, Adam. Thank you so much for having me.
Adam: Thank you! Sandeepa, you know a lot about these core web vitals, cause it's nothing really new, but can you basically break down, I guess the three or four that Google is going to be focused on?
Sandeepa: Yeah, so basically what I want to do is go back a little bit and understand why Google is introducing this standard and making it mandatory in terms of ranking for all the websites on Google, remember always Google is all about relevancy and promoting the best for its customers, which is the Google search engine. Imagine you are on a website on your phone and it, while you are reading or clicking some place on the website, suddenly something loads and pushes everything down or here or there experience is completely changed. Now, imagine if that site was a bidding website, or if that site was a website where you're completely engrossed in a story, which is a 12 part series, and suddenly all these advertisements pop up from somewhere. Now, you don't know which part of the story you're in.
Adam: Oh, it's happened to me so many times.
Sandeepa: And even better imagine if it was an e-commerce store site, which was advertised advertisement rhythm and then you were trying to buy a shirt, landed a buying pants.
Sandeepa: That would be bad. Exactly. So this is, this is one of the main reasons why for making sure you rank high for relevant results. Google web vitals are very, very important. Not that it was not important until now we all know about security certificates with, we used to add that no matter what, for an e-commerce based website, because it was important to transmit results securely the same way. And after some time they made it important, no matter which site it has to have a security certificate, same way. If your current site is on Google is ranked on Google and you want to go higher and relevant for Google's Google's users. You need to have a very fast and completely loaded website for Google to rank you. So what this means is it's the same old thing your website should be should perform well, should have, should be rendered in a way that the whole website is there for the user when the user sees it. And of course, you know, all the elements should be exactly in the same place once the website is loaded. So that means the four vitals you were talking about, Adam, that is the LCP standing for Largest Contentful Paint, the FID standing for First Input Delay, Cumulative Layout Shift. That is the CLS, which is the most important one. And what was the other one, Adam?
Adam: First Contentful paint and largest, so first content of paint, but those three, the largest and the first input delay and the cumulative cumulative layout shift. Those are the three that Google wants us to focus on, but yeah, they also, they also measure that that other one, which is the, the first Contentful paint now, just so you know, as listeners know a great place for you to check these metrics is you can just type into your search bar, Google speed insights, and then you can, a tool will come up and you put in your website and then it'll give you a rating for your website. So first do that now, Sandeepa, can you tell us what first Contentful paint talks about?
Sandeepa: Yeah, so basically the first three ones that we spoke about the largest, the first -
Adam: Let's start with LCP largest Contentful paint, right?
Sandeepa: Yeah. So all these are mostly related to your server. That means if you were, if your website doesn't matter, whether it's a WordPress website or a regular website, if this website was on a server that was really good and was able to render the website quickly without any delay. So once you request the server for your website, the server instantly displays your website without actually thinking too much about it, this process of you requesting and server thinking and rendering your website, that delay is the first input delay. And that should be as minimum as possible. And this is all this is all possible if you were on a really good server. So if you were on a WordPress website, I highly recommend as per your last podcast item, I highly recommend going with a good managed server, right. So that, you know, you don't have to worry about 10 different things that the server is not enabled for you to actually render your website quickly.
Adam: Yeah. Hold up, managed WordPress server, our hosting service that's they would advertise themselves as such. Right. So if somebody searches, okay. So making sure that your your site, especially if it's WordPress obviously is going to be on a managed WordPress hosting service will allow you to get that first Contentful Paint to be really quick.
Sandeepa: Yes. Yes, exactly. Okay. And the second, the next to the Input Delay and the other one that requires your website to have Optimized images, optimized, scored the hashed data. So optimizing [inaudible] image,
Adam: Hold on. That, so that image just means it has to be sized correctly for that space. Right?
Sandeepa: Exactly. So usually what happens is when you're using WordPress or when you're using any tools to build your website, the tool may or may not add the image size in there. So if it's an image 200 by 200 in dimension even if you do not add the size, the browser has the capacity to render the image. Exactly.
Sandeepa: However, it is very, very important that you fill in all these details when you're adding an image, not only making the image as optimized as possible, but also adding all the values, the image tag needs.
Adam: For people who are visually impaired stuff like that, is that what you mean?
Sandeepa: Exactly. So that way the browser doesn't have to calculate the server doesn't have to calculate, and it can still render the exact image because you said you need a space 200 by 200 suddenly, you know, when the webpage is loaded, all of a sudden there's a big, you know explosion right in the middle of the page where it now shows the image. So if there was no image width and height added, there would be no space properly allocated for it. And therefore everything would have been collapsed when the first page showed. So this is just an example of how you could avoid the delay in actually having the whole page render. So then that schools, you know, you can, you can add lazy loading, you know, to render the images slowly, but actually have the place already meant for the images there.
Adam: Okay. I, I, that is an old, an old school technique, right. For getting images to basically load slower. But it kind of fools Google into saying, thinking there's an image there. And then once it's loaded, it Springs into it suddenly becomes super clear.
Sandeepa: Right. Yeah. But it doesn't actually expand or contract the page. The page size remains the same.
Adam: Yeah. That's cool. All right.
Sandeepa: So, so this, this is just a very simple, you know, example that, where we can see what we are doing. However, the, the science behind all this, you know, loading and speed, making the page speed up and actually paying attention to the performance. It goes much more deeper. So the deeper part is, you know, you just need to have a website that loads faster and not just have the relevant information, right? So you need to be technically strong and also technically sound, the content should be there. Plus the website also should do, or be able to do exactly what the user is looking for. And all this is super important because it's the world of mobile devices, right? Having people have such a small area to view the website, it becomes a very, very difficult to actually use your mobile device and use a search engine on your mobile device and then render relevant, relevant results, and then go to your website only to, you know, just keep shape-shifting.
Adam: Right. Yeah. I understand. So if you are a business owner out there, the first step I would recommend is go to Google speed insights, put in your your website there. And then those results that come up, you're going to be sharing those results with your web designer. And then that web designer, if they're good, we'll be able to help you. So and, and fix all of those problems. And like we said, I, it, from May, 2021, Google is saying, this is a ranking factor. So, you know, when Google speaks, basically we all have to jump, right. Cause, you know, if we don't then the others who do get rewarded with rankings. So that's how it relates back to your business and our local, basically the local SEO and the local ranking of your page.
Sandeepa: So to talk about trends that actually will happen in the coming years now, in terms of website, look and feel, Adam, I think I can point out some five or six items that you will see go away.
Adam: Oh, do you want to go really fast? Cause we were -
Sandeepa: Sticky headers, they will go away logo, shrinking, expanding any effect on the logo. Okay. then I feel, you know enabling dissembling content upon load that will go away. Animations totally will go away. Wow. So it will, it will go back to something like HTML 1.0.
Adam: Oh, okay. So it okay anymore.
Sandeepa: That's that's about it. That's some of the things I can think.
Adam: And I think one of the things that we can both agree on are those hero image, sliders that, that move across you know, your homepage horrible. So if you have that already, I know so many people like them, but they do slow down your site. They do make that make it more difficult, difficult to navigate and you know, so that those things will hurt your ranking just yeah.
Sandeepa: And SEO. Why it is not in any way beneficial to have it on your website.
Adam: Yeah, definitely. All right, Sandy, but I know we have a lot more to talk about. So I'll have you back on a future episode. Thanks a lot for joining us.
Sandeepa: Thank you so much, Adam.
Adam: As always, if you heard this episode and you really like us, give us a rating on iTunes, that'd be great. And of course, if you know someone, a business owner, another agency owner or anyone who's interested in gaining more business out of their website and their local presence, this is a great podcast to share with them. And as always, we'll see you next time, everybody. Thanks.