Mastering Google's Web Core Vitals: A Guide to Enhancing Your Website's Performance

Are you grappling to under Google’s Core Web Vitals? We’ve got you covered!

In this episode, we break down the tech surrounding Core Web Vital. From what these metrics are to how they can impact your website’s performance as a whole, we illustrate what these metrics look like beyond their technical implications. Laggy load times, web pages that jump around, and just plain old slowness: all of these metrics have visual impacts to your page that can help us better understand what it means to score good or bad on Google’s Core Web Vitals.

By the end of this episode, we will explain how you can check your own site’s Core Web Vitals and arm you with a downloadable checklist that you can use monthly to analyze your website’s scores. Just like a routine general checkup with your doctor, making sure your site is running smooth and healthy is key to success! 

Tune in as we demystify Google’s Core Web Vitals and get you started on improving your website’s health!

Mentioned Resources: 

Core Web Vital Guide – How to Measure Your Core Web Vitals: A Step-by-Step Guide

Join entrepreneurs and online business owners just like you in my Free Facebook Group “Website & Tech Tips for Online Business Owners”
 
 Where we help break down the tech and hurdles Online Business Owners encounter!
 
Simply to go ecommercemadeeasypodcast.com/facebook/ and answer the membership questions so we know you are a real, warm-hearted, online business owner.

Chapters

• 0:06 Understanding Google's Web Core Vitals
• 8:33 Optimizing Images and Web Core Vitals
• 16:21 Techie Episode, Ratings, and Audience Engagement

Transcript

Speaker 1: 0:06

Ever wonder what Google uses to measure your site's effectiveness? How does it determine if a website is a good experience for a consumer? Webcore Vitals is one of the many ways it does this. I know it kind of sounds like a totally techy name, but reviewing and monitoring can be very simple, and we're going to break down that tech in this episode. So make sure you join us and listen till the end, because I'm going to first explain what they are and then I'm going to explain towards the end how you can improve each of these vitals yourself. Plus, in our show notes, we're going to have some bonus material to really help you get into a great routine and really make sure you're on top of this, because it's so vitally important for your website.

Speaker 1: 0:51

Welcome to the eCommerce Made Easy podcast. I'm your host, keri Saunders. When we started this business, all I had was a couch, a laptop and a nine month old my main goal To help others. Now, with over 20 years in the eCommerce building industry and even more than that in web development, I have seen a lot. I love breaking down the hard tech and to easily understandable bits to help others be successful in their online business, whether you're a seasoned eCommerce veteran or just starting out, you've come to the right place, so sit back, relax and let's dive into the world of eCommerce together. Welcome back to the eCommerce Made Easy podcast.

Speaker 1: 1:27

This week we are talking about web core vitals and we're breaking down the tech behind it, turning it into simpler terms and giving you some great action steps on how to make sure that you're on top of your web core vitals for your own website so that you don't drop in search engine rankings or so that you improve your search engine rankings, if you're already not doing so great in these terms that they check on your website. So web core vitals are like a health checkup for your website. So, just as you would go to the doctor and they would test your vitals, such as blood pressure, your pulse, they're probably going to check your weight, even though you might want them not to check your weight. They may be looking in your ears and your nose and your mouth, et cetera, seeing how you act, making sure that you're cohesive, et cetera. You're going to just really be looking at the vitals of you and the basics of you.

Speaker 1: 2:23

So, just similar to that, google is doing this to our websites. They are checking to make sure that it is quick, it is responsive, it doesn't jitter around and move around as things are loading when you interact with it. It wants to make sure that that is quick as well and that things happen as expected. So these are some of the things that Google is looking for when they look at the web core vitals. So, in essence, the web core vitals are things that we, as consumers, can feel when we're interacting with a website, and Google is trying to help us figure out how to improve how a website feels whenever we're interacting with a website. So let's start digging into what are these web core vitals, what are the names of them and what really are they? Okay, so now bear with me next, because I'm going to be going into the definitions of the core vitals that are on a website, and I completely understand they can sound very techy and kind of get overwhelming, but I do feel like it's important for me to give you a high level overview of what they are so that you can be proactive and help make sure that you or your web developer can address these problems before they affect your Google rankings. Also, towards the end of this episode, I'll be giving you some details on a checklist that you can use to regularly go over these components and make sure that you're on top of them and aren't dropping in your ranking. So make sure you listen to the full episode, even though this next little bit I'm warning you it's going to get a little techie, honest, but I will try to keep it as light as possible.

Speaker 1: 4:02

Okay, so the first one we're going to talk about is actually one of the oldest core vitals that came out in the summer of 2020 and then went into effect and rankings in 2021, and it's called cumulative layout shift, or CLS for short. Basically, what it means is that the website shifts as it loads, which is a bad thing. So let's say, you have a banner image at the top. It's a decently sized banner image. You don't put image dimensions on it, or your web developer didn't, so the rest of the page shifts as that image finally gets loaded once your browser figures out how big it's supposed to be. So one way to prevent that is to make sure that all your images have dimensions on them. So there actually can be pretty simple things to solve some of these, and that one, for example, is just literally having image dimensions on your items.

Speaker 1: 4:55

If you have dynamic content, you also want to have dimensions on that dynamic content space. So you have Google ads or some other sort of dynamic content. Making sure that there is a size definition for that area it's going to fill up is vitally important. Otherwise you're going to find things shifting. So, just like you wouldn't want to walk into a room and go to sit down on a chair and then somebody moves the chair on you, that would be awful, right. So that's basically what Google is trying to prevent with the website is you don't want to be about to click on a button and then the website moves and you don't click on the button, you click on something else you didn't intend to. That's frustrating as a user, and Google recognizes that and is measuring this to try to help us improve our websites and prevent something like that from happening. All right, great, you made it through the first Webcore Vital overview.

Speaker 1: 5:48

So the next one I'm going to briefly talk about is first, input delay, or FID for short. That one's at least less of a mouthful to try to say, but it measures the time from when a first user first interacts with a page, that is, whenever you click on a button, etc. And to the time when the browser is actually able to begin processing that click and start giving you the next item on the page. So they just want to make sure that when people are clicking around on your website, basically that it's quick and fast and that things happen in a reasonable speed. So some things that can cause us to be slow is just basically code bloat and things like that. This is not one we find nearly as often needs addressed for our clients, but it's definitely something to keep an eye on when you're using the tools we're going to recommend in our show notes.

Speaker 1: 6:42

So next we're going to be talking about first, contentful paint. It measures the time from when the page starts to load to when any part of the page content is rendered on the screen or displayed on the screen would be another way to say that. So you just want to make sure that things are loading quickly. You want to optimize your server. You want to make sure you're with a fast hosting provider Some of the hosting providers out there as one of our previous episodes where we talk about how to pick a good hosting provider is, you know, making sure you have the proper resources behind your website is very important and that will greatly affect the FCP, or first, contentful paint. Also, browser caching. These are things your web developer can help you with. You're not very familiar with it, but it just kind of give me some terms to kind of latch on to and really be able to process here and as well as you. You just want to be able to share that you're monitoring and testing this one. Like I said, we're going to briefly go over each of these definitions because they're kind of the kind of techian it's just sometimes a little bit hard to digest. So hopefully there's little brief overviews going to help you, as well as our free resources we're going to have in our show notes.

Speaker 1: 7:57

So the next one we're going to talk about is one that I find the most common as a problem for websites and it's called largest contentful paint, where LCP for short. I feel like that's again a mouthful, but basically what it means is what part of your website is really large to load. Usually this is a large image. It could be a large block of JavaScript which is basically code on your website to help it do fancy things. It's kind of a simple way to say that, but usually it's banner. Images is what typically will slow your website down and cause this score to go lower.

Speaker 1: 8:33

So what you can do here is make sure that you know how to optimize your images and we'll go into this and other details in our next episodes that will be coming up on how to optimize images. But you want to make sure they optimize for the web. We actually had a very regular customer come to us lately and really start scoring low on LCP or largest contentful paint, and the main reason was that their images were just not optimized to the web. They had these wonderful looking banner images, but they were just simply too large. It's kind of like asking a toddler to carry a 50 pound ball. It's just too large for the website, right? So you just need to make sure that you're optimizing your images, or anybody who's creating the images for you knows how to optimize the images. You need to make sure you're asking them that Do you know how to optimize images for the web? You're not going to want to be getting back images that are megabytes in size. You're going to be wanting hundreds of kilobytes or less. You want to make sure that the size is appropriate. You don't want to be putting up a really big image that would go well beyond anybody's monitor. You want to make sure that you shrink the image to actually what you're going to use it for on the website. So the dimensions that you actually need it for on your website and I'm talking about this a little bit longer because I find this is the most common mistake and easiest thing to fix on a website is the largest contentful paint. Again, like I said, it's usually based on images here.

Speaker 1: 10:07

So the last one we're going to be talking about in this podcast episode is Interaction to Next Paint, or INP for short. This is a brand new one that we've actually gotten some questions from customers on, and what it basically means is it's assessing the pages overall response in this to user interactions by observing how long it takes between when you click or tap on an object to whenever you get to the next element. So basically, they want your website to be responsive to all your clicks and taps. So taps would be if you're using mobile, or clicks would be if you're using a mouse, and they want to make sure that this is nice and fast and responsive. One of the things that can cause us to be slow is code bloat, unnecessary code. We actually had a client the other day that we're helping with this and they had all this like extra code loaded into the WordPress site that they weren't even using and it was actually honestly because of their hosting company preloads plugins that they'll never use. So we can actually go back to the hosting episode and make sure you pick a really good hosting company, because this one's definitely not one of them, I will have to say, and you just need to make sure that you don't have this extra code bloat from either a hosting provider or a programmer that wasn't efficient, or features that you don't use anymore, etc. So be looking at this metric whenever you are measuring it, because it's going to go into effect in March of 2024. It will start affecting your ranking, so you have time to fix this right now If you're listening to this in real time and listening to it in 2023.

Speaker 1: 11:54

Oh, and actually I almost forgot. We have one more to talk about. It is time to first bite, ttfb for short. So this one actually circles back and again to the hosting company, but what it means is that when somebody goes to your website, how long does it take for them to get the first bite of information presented to them? So things like a fast hosting provider is going to help this. Having browser caching on is going to help this as well. Optimizing your content. Again, this is also interconnected to two large of images, two large of JavaScript code, two large of font code, etc. So a lot of these core vitals will affect the other one. So when you fix one thing, you're actually probably going to help some of the other things as well. So keep that in mind and that can be one way you make this not quite so overwhelming when you're looking at these vitals. Okay, so what do we do next? We know a little bit about these vitals. We kind of know the basics of them. Hopefully it wasn't too overwhelming.

Speaker 1: 12:57

I tried to make it really simple and just really give you just the little bits of it that you might need. So how do we deal with this and how do we keep on top of this? So you want to visit our show notes at ecommercemeadeeasypodcastcom forward slash 20, the number 2020. And you will be able to find there a free downloadable where you can go through a checklist that's a routine checklist on how to really review this and make sure that you're on top of this. What I recommend is that you're reviewing this at least once a month. You just have to go to a specific website, which we'll link to there. It's a little bit hard to say and so I'm not going to bother saying it on the podcast, because it was just going to be easier to click on it from our show notes. But you're going to want to go to that and really look at your metrics. It's really, honestly, super simple. At the top they have your score out of 100 for many of these different elements, and then they also have it for mobile and for desktop. So make sure you pay attention to that.

Speaker 1: 14:03

It's pretty obvious that you can click from mobile to desktop and you're going to want to look at both, and if you see your vitals start to drop, you need to ask yourself okay, what has happened recently to my site? Have I added new content? Have I added new images? Have I added new features and whatever it is that you might have changed? Take a look at that and see what you can do to improve it. Contact your web developer. If you don't have one, you're welcome to contact us at VCSEngineeringcom and we're happy to help you out, but you want to make sure you're regularly measuring this Now.

Speaker 1: 14:39

If your website's a lot more active and you're always putting up new content every single week, you may want to measure this once a week then, rather than once a month, but I do recommend you minimally measure this once a month. Keep a chart. We're going to provide that for you so that you can see where, how your vitals are doing over time. You want to make sure that they are staying the same if they're already good or improving over time. Now I have found in us helping others fix this, that the core vitals.

Speaker 1: 15:10

If you retest your website many times, it doesn't see some of the improvements right away and you might want to wait a day before you retest it, particularly for optimizing your images. I've found that Google caches some of that information, basically stores a previous copy of it, and it doesn't see the new version super fast. So just keep that in mind and don't get too frustrated. And if it doesn't update in a day, maybe give it a week. It kind of depends upon how often Google looks at your website. So make sure you visit our show notes at ecommercemadeeasypodcastcom.

Speaker 1: 15:44

Forward slash 20 again so that you can get that free downloadable to help you stay on track and keep up on your web core vitals because, just like we want to make sure that we are going to the doctor regularly, making sure we're in good health and good condition, we needed to be doing that to our website as well, because things change, technology changes or content changes, and we could have been really great with our web core vitals the previous month, but this month were not as good and we need to be able to react fast enough before our rankings drop in Google and in other search engines.

Speaker 1: 16:21

So that's all I have for this week's episode. I hope, even though it was a bit techie, you really enjoyed it and got some value out of it. I would love it if you would rate us on your favorite podcast app that help get our word out so that we can help others. And, as always, I hope to see you next week, and you're always welcome to email us at podcast at bcsinjoneeringcom with your questions or comments, as we'd love to hear from you and create episodes based upon things that you're curious about and need more information on. See you next week.