Episode 519: What Are Google's New Core Web Vitals & Why Your Business Should Care About Them? #519

Hi, and welcome to the SEO Podcast, Unknown Secrets of Internet Marketing. My name is Chris Burris, one of the owners of EWR Digital. And my name is Matt Bertram. I'm the lead strategist at EWR Digital. The lead strategist should wear the hat. I feel like you're dressing the part today. I really am. I'm excited. We got some new swag in. We've gotten new furniture in for the office. We're building out a new podcast room. We're getting people back in the office. Probably have a kegerator up there, food. It's going to be a great time. I noticed you mentioned swag, and I just want you to notice that I don't have any swag. So maybe we can fix that. We can fix that. Matt and I, we are broadcasting live from Houston, Texas, and Matt and I are your Results Rebels. Rebels. We've got a good podcast. Actually, there's a review, right? I think you have a video review. By the way, if you're watching on YouTube, make sure you subscribe and make sure you click that little notification bell to get notified when the new podcasts come out. And let's hear that review. All right, here we go. My name is Jeff Campbell, and I work as a marketing associate with ReadyArk Welder Rentals, which is an air gas company. And I just wanted to give my personal feedback on EWR Digital and the work they've done for us in not only SEO, but digital marketing over the past three years. We had worked previously with offshore SEO companies and some of the bigger name companies here in North America. And my experience with previous companies was that there was a tendency to promise big and to build big, but the deliverables were really a series of automated reports and not much in the way of actual work being done. I had been listening to the best SEO podcast for about 10 years, and I learned most of what I know about SEO from these guys at EWR. So I thought I'd hire, give, you

know, Matt and his team a chance to, you know, pitch what they could do for us. So we started off with them. We've had really great results, and we've seen just a continuous improvement in our rankings working with EWR. And I think the real key to why they're so successful is that they're really dedicated to staying on top of the latest, you know, developments with SEO. It's, as we know, a moving target. They're really committed to a relentless experimentation to find out what's working now. There's a lot of people who will tell you what works, but these guys will try things, they'll experiment, and they'll keep chasing the continuous improvement. The people there are great. I've enjoyed working with them. I've learned a lot from the individual consultants at EWR, and we get top-notch consulting from them. They've also been very flexible around some of the limitations that we've had with regard to our website internally, and they've been able to, you know, come up with creative solutions and workarounds to be able to deliver results, you know, when things were less than ideal for us from from a technology perspective. And so we've been very happy with EWR Digital, and I'd recommend them to anyone. All right. So Chris, you hadn't heard that before, have you? I hadn't heard that before. Yeah, I've been talking with Jeff back when he was just a podcast listener, not yet a customer, so long ago. And then you joined us, you kind of built that relationship, your role as a digital strategist really kind of set in and said, hey, let's map something out. And then off we are, like working with him for three years. That's a pretty awesome, pretty awesome testimonial. Airgas is Fortune 500? They're owned by Air Liquide, and so it's a roll-up. But yeah, they're a big company for sure. There's been a lot of corporate tape that we've had to create creative workarounds or work through different policies or get approvals in certain areas. Right now they're, oh, I won't share,

but they're trying to get a software that we use a lot approved, but they're running into some red tape issues. So that's something that I think a lot of internal marketers deal with, and we're certainly familiar with and finding ways to still get things done and work around those things on multiple platforms, with multiple checkpoints, deliverables, all that sort of thing. So that's something we're super familiar with. A lot of the issues, legacy issues with companies are pretty similar. So yeah, but yeah, so I'm glad he was able to put that together for us. You know, ProTestimonial is awesome. ProTestimonial.com. Amazing how it all blends together. Hey, I think we should jump into our article. Today, we're going to be talking about Core Web Vitals, and this is pretty important stuff, and it gets, I'm going to, like, there should be a warning, warning. It's going to get pretty technical in this particular version. This article is by Jan Gundman, and it's Core Web Vitals, getting ready for Google's page experience ranking factor update. By the way, that's already happened, right? So this is about getting caught up if you got kind of damaged at that. And let's just jump right in. So Core Web Vitals, the new user experience metrics from Google are made up of three metrics that webmasters and SEOs will have to keep in mind in the future. They're loading, interactivity, and visual stability. Probably the one that makes the most sense, like right away in terms of like a bad experience other than load time, right? So load time, great, you just skip out of it. The next thing is that visual stability, right? Where the web page is there, and there's a good example in this article where you're about to click the cancel button because you don't want to buy it, but the cancel button shifts down and you press the purchase button and you're like, but I wanted it now. Okay. So that experience can be pretty brutal. And it makes sense to have these metrics because,

you know, Google's an algorithm and it can't just be like, oh, that's a good experience for some. And that's a bad experience for some. It's got to be like, here's the data that we're going to use. So we're going to jump into all of this. Core Web Vitals are measured with field data that Google has provided in multiple reports and tools. So you can actually get a hold of this data. It includes Lighthouse PageSpeed Insights and Google Developer Tools. They're made up of three metrics. It's the largest content paint, and we'll get into the details of this. Abbreviated LCP, the first input delay, FID, and cumulative layout shift, CLS, which is the one we were just talking about. Google will be reevaluating the Core Web Vitals every year. And this means that the core metrics may change, although I think that's not very likely, but who knows? Technology is constantly changing. And again, let's talk about a little bit, where can I access the Core Web Vitals report? They are already been integrated into all the Google analysis tools. Again, so that's Core Web Vitals can be accessed through PageSpeed Insights. Also, that PageSpeed Insights also includes page speed score. Core Web Vitals shown on the one hand in the form of the field data and also in lab data. So there's a difference between field data and lab data. Lab data is if you're just running something in some sort of lab and there's actually no interactivity. Field data, because Chrome is so ubiquitous, Google's in a place to go like, hey, I'm tracking these metrics as these web pages are loading. That information is getting relayed back to me and I'm making decisions and quantifying how good the user experience is on that particular browser, on that particular device. Not browser, but Chrome browsers. And that's called field data. So that can be variable. Like if you're on a cellular connection or you're on a dial up, heaven forbid, just stop using the internet. Can you imagine if you had to use dial

up again? Oh my gosh. The world, the world has changed and we'll never go back. Don't go back. I was watching 5G. Like 5G is coming. Like every data is going to be ubiquitous with life. I mean, it's amazing what's about to happen. I was watching an interview and the lady in the interview was talking about how the internet is so slow at her house. Like you just don't even bother. And I'm like, hey, that could be value. I mean, we're working, a lot of us are working from home, but if you want to like stay off the internet, like drop your fiber from the house, like drop down to something super slow and you'll just stay, like it's available. It's there for emergencies, emergencies, but you'll stay off the internet. Like that, that would happen. Okay. So Chris, I think this is a good point. I got a few things I wanted to add in, but I know there's a lot to cover and it's technical. So I don't want to get in the way too much, but, but first is Google is releasing a lot more data. Okay. So they're starting to release a lot more data. They've been pretty protective of that data and they're starting to release it more even on the analytics side on the AdWords side. Like they're, they're starting to open that up certainly a lot more. But I think one of the big things that I wanted to highlight and, you know, okay. If you hear behind me, I think we've decided to do a podcast on Thursday and that's the same time. By the way, because you have such a good microphone, I only hear your voice. Well, that, you know, we, we had complaints. Not about the lawnmower. But what I was going to talk about was the visual stability or the cumulative layout shift. That is a big deal. Save that until we get to that section. Okay. I'll wait. All right. All right. Cause we've got really three sections to cover. We'll jump

into these kind of format as we're moving forward is, Hey, what is it? And like, you know, some particulars about it and what Google thinks is good or bad about it. And then things that you can do to make it better on your website. Right? So it's a really good, a good format. Let's see. Is there anything we don't need? That's it's on search, Google search console. It describes in green and you can actually in Google search console, look at the individual URLs and see which ones are green, yellow and red from this perspective. It's also looking at the core web vitals separately on mobile and on desktop, right? So be aware of that and be aware. You need to be thinking about your core web vitals on your mobile and on your desktop. I think there was some mention by Mueller, John Mueller, that, that, that a negative impact on your cell won't necessarily come to your desktop, but something bad on your desktop would potentially negatively reflect on your cell phone. We need to reach out to John. He was saying that he wanted to get on the podcast last year. We need to, we need to reach back out to him. So thanks for reminding me. I'll. Yeah. When I saw this, I thought, I thought the same thing. Yeah. All right. So let's talk about these three things. So first off is largest contentful paint. How fast does my webpage load? So that LCP measures the time that passes until the largest content element on a page has loaded. That largest element could be an image, a block of text, a background image of video. Google says for loading times up to 0.2.5 seconds. That's good. Anything between 2.5 and four seconds needs improvement. And anything over four seconds is poor gets the big X of like, of shame. It's not working. Let's talk about how you want to improve it. And they give an example of, of, of CNN. Let's talk about how to improve or optimizing for the largest

contentful paint. And there's four issues here that they jump into. One of them is the servers responding slow. So the longer the browser needs to receive content from the server, this makes perfect sense. The longer it will take for the page to load for the user. This is why Google recommends using frameworks like React instead of an entire HTML file. That's more like for a dynamic page. That's a lot longer. It might also help to establish a content delivery network. So use a CDN to enable that the requests come from servers that are even closer. And of course, involved in this is efficient cache or cache. My brother corrected me on that years ago. Number two, an issue here is JavaScript and CSS render blocking. Before the browser can really render content elements, meaning visualize them for the user, the HTML markup has to be parsed in what is called document. I told you we're going to get a technical here, document object models, DOMS. The problem here, however, is that the HTML parser stops each time a CSS styles sheet or a JavaScript resource has to be loaded. Google recommends minify the CSS, minify the JavaScript files and defer non-critical styles and JS and inlining critical CSS attributes. Defer that. Don't do that. Put that until later. So that's kind of the process of managing how JavaScript and CSS rendering is going to block when your your last content full paint happens. Number three is the resources are just loading too slowly. Again, images, videos, content blocks. Google recommends. Surprise. And we've been saying this for like, this has been like step one of SEO. Reduce images to the size needed. And this is one of the challenges we always have when we turn a website over to a customer. Some customers will come to us and say, hey, I want you to build a website and then I'm going to take care of it. Then you turn it over to them and they come back a year later. It's like my website is

so slow. And you're like, yeah, you have like 10 meg files or one gig files for your homepage image. So it's one of the things that ends up coming back to us. You can also preload main sources, compressed HTML, CSS or JavaScript files using GZIP. And then adapting servers so that if the connection speed is what adapting serving is, is it tests the speed of the connection and based on that speed makes adjustments to what it's going to show. And then finally, number four is client side rendering. Client side rendering is where web pages are rendered in the browser directly. This is usually done with JavaScript frameworks such as React. We mentioned that earlier. And Angular. Effective means of ensuring that the largest content full paint loads faster for the users. That's what those will help you do. And finally, he mentions there's a dedicated blog post Google has for a number of other tips. But those are the main four tips for content full rendering, paint rendering. Yeah, I mean, that was very technical. There's a lot of stuff that you need to start doing on the back end of the website or the technical SEO or even server side optimization. I think for most people that are not programmers, this is going to be tough. And I would say to all that call Kohosta. Yeah. I mean, when you look at number one, the first one, the server is responding too slow. Think about what server you're on. Think about what you're spending on a monthly basis for your hosting. Is it a $9 account hosting with GoDaddy or GoHosting? GoGator hosting. If it's something like that, how much value? If it rhymes with Gator or Daddy. And it goes fast or not so fast in this case. How much is your website worth to you? What's the value or the loss of this? We, you know, we've talked about, I think in the last podcast, we were talking about Amazon has come to the understanding that if it's one second slower, they're

losing, I don't know, $100,000 for that second, every minute or something. I don't know. It's ridiculous. Like a billion dollars a year. I have the data somewhere on the, but it's so important. Right. And, and what's really good about a lot of this stuff is, you know, sometimes people are like, well, you've SEO optimized my site now on page SEO and one-time optimization is a whole nother story, which I'm writing an article on right now, because it is certainly an issue, but technical stuff, typically on setting up what loads when, unless you're adding new stuff to the page, it's typically a one-time setup right now. If you're using existing images, right, you optimize them, you upload them one time. Now we do have a process and we do try to hand off to clients. Hey, if someone internally is going to maintain your site, here's our process. And here's what we would recommend that you do, or you have someone do not to say they always follow that or not, but this is all kind of like a one-time setup kind of thing. It's not an ongoing component. And so I know that there's a lot of, you know, smaller agencies or freelancers that do listen to this podcast. We've carved off our team called Kohosta that does this and we can do it all in kind of a one-time setup for you. And then you can do the ongoing management. So that, that is an option. Again, everything we're building, everything that we're doing is to just help do SEO better for us. And then we're sharing it. I mean, that's really how, how, how we view the world. So. Absolutely. All right. So that's the first of these three, right? So that's the largest content full paint. Next is the first input delay. This is when can the user interact with the page? It measures the time from when the user first clicks it, clicks on a site to the point at which the browser is able to respond to that interaction. So

often what happens is the page loads, you see a button, you click the button, but the, the webpage can't actually do anything because the browser's busy in the background loading the rest of the page. And so then it's, that's that time. That's the FID first input delay, obviously a frustrating experience. Yeah. And a lot of people talk like time to first bite, you know, and there's some debate around that, but yeah. So keep going. Yeah. So the FID metric measures the delay that occurs between the user input and the browser response. According to Google, anything under a hundred milliseconds is good. Anything between 100 and 300 milliseconds needs improvement. While FID values above 300 milliseconds, that's considered poor. That's in that red zone. You want to make sure you fix it. Here are the four things optimizing for the first input delay. Split up longer tasks. Delays are often caused by JavaScript execution, meaning users are not able to interact with the webpage. Google says long tasks are those which are a piece of code block or a code are where a piece of code blocks the main thread of longer than 50 milliseconds. So let's read that again. Google says long tasks are those where a piece of code blocks the main thread for longer than 50 milliseconds. So again, split up those longer tasks so that it allows other things to happen. Number two, prioritizing interactivity. In other words, giving priority to code that is essential for site interactions. Let that load first. Next is using a web worker. With a web worker, heavy JavaScript files can be executed in a separate thread, meaning the main thread is not blocked. So web worker means just like, hey, it's being downloaded offline or in parallel so that multiple things can happen. And then finally, reduce JavaScript execute times. All the JavaScript files that are executed when a website is loaded should be scrutinized with a view for deferring those that are not essential. So if they're not essential to that first input or reducing

that first incident, or they're extending the first input delay, like focus on those and figure out how to chop them out altogether. And next, this is the third one, right? Cumulative layout shift, CLS. It's the visual stability of the website. And we talked about this where that damn button moves, right? You're like, I want to cancel it. Oops, I just placed an order, which we know. I mean, we've all been on websites. You're like, those bastards did that on purpose. Chris, this is a, this is a family show. I'm sorry. Those inconsiderate individuals who continue to roam the earth without purpose are doing this on purpose. Oh, maybe that is their purpose. So they do have a purpose. Maybe they don't know that that's happening and they haven't done any CRO on their site. It could be that too. And they just noticed that the data started looking really good and people were purchasing instead of canceling. And they're like, I don't know what I did. I think the color green made it perfect. All right. So cumulative layout refers to the visual stability during interacting on a website. So when, uh, content shifts as a page loads, the user is already interacting with the site. This can have an undesirable effect. We've already talked about that. Now, how does it calculate, uh, the cumulative layout shift? So it is the impact fraction. We'll talk about what that is in a second, times the distance fraction that equals your layout shift score. So let's imagine the whole site moves down. That means the fraction is a hundred percent and let's say it moves down a hundred percent. So you got a thousand percent, uh, uh, layout shift score. Not good. Uh, but let's just say it's, you know, you're, um, like a right sidebar and the right sidebar shifts. Well, your right sidebar maybe makes up, you know, 10 to 20% of the website. If it shifts, shifts 10%, then you're, uh, you're not having as big of an impact. The layout shift score is

a product of these two values and lies between zero and one. So whatever my calculation I just did in my head was wrong. Um, Google says anything below 0.1 is good. Anything higher than 0.25 is poor and anything in the middle, um, anything in between needs improvement. So, so, so I think one of the things that, um, I don't think a lot of people are aware of when they look at SEO is when we talk about an algorithm, right? Algorithm is math. Yeah. And so everything that we're doing is, um, really based upon math. And, um, I think a lot of times with SEO people get away from that, but how is Google able to do all this stuff? How is the neural network being able to be built? Um, you can go look at a lot of these patents. I've been actually doing a lot of it since there was like nine updates in the last two months. And then since the beginning of the year, even more and trying to actually understand exactly what's going on and how they all layer on each other, because certainly for anybody that is been doing SEO for a while knows that there's been some big moves this year. And, uh, I don't think, you know, I'm certainly getting anecdotal data from a lot of different other SEOs that I know of what they're seeing, what's happening, but it really goes back to the math. It really goes back to how that algorithm was written and what that algorithm is looking for. And if you know what the math is or the math formula is, you'll be able to know what you need to do. And I think that's just kind of a mindset shift for maybe a lot of people to look at SEO from a mathematical standpoint versus anecdotal standpoint. So, yeah, no, that makes sense. Like it's, and that's what Google's really good at is throwing it into an algorithm so that you have less manmade interactions. I mean, still tons of them because

it's such a massive entity, but there's a lot less going on. All right. So we agree. Do we agree that we hate cumulative layout shift? Is that? Yeah. I mean, you gotta, you gotta basically carve out where a big block of, you know, something's going to be. Uh, so, so that doesn't happen. I mean, that's, that's essentially. That comes up a couple of times here as we're talking about optimizing for the cumulative layout shift. Uh, number one, specify the size of images and video elements, right? So if you know that something that's going to go in there as X pixels by X pixels, like define it from the beginning and then it won't shift. You won't create that shift. So that's pretty straightforward. Um, ads with no, and this is one of the culprits is ads with no height or width data. Google ads are one of the most common reasons for layout shift on websites, right? Because you can put the space there. You can put the position, but the ad shows can be dynamic. What you want to do is like historically look at what ad showed in that position and accommodate for that ad so that you, uh, don't have that shift. So it may not be something that, you know, as a matter of fact, because it could be different sized, uh, um, banner ads or, uh, visual ads going there, but look at the data. They'll provide you data so that you know what is typically there and, and secure that space. Number three, uh, dynamic content elements, elements like newsletters or special offer banners related content blocks or GDPR info positioned as blocks in the main content of the page are, can result in layout shift. Uh, Google again, reprimand recommends using placeholder elements. Uh, and then finally, this is, this is interesting. It wouldn't have been on my radar right away, but web fonts. Uh, so, so imagine you've got a font that's a little bit bigger and it defaults, it hasn't downloaded the font. So it's showing

say a smaller font as a default font, and then your font finally loads and it shifts everything down. Uh, it's a advisable to preload the fonts. Um, so that's, that's really core web vitals. Uh, this is a great article by Jan Grundman. Um, and it actually goes into an example. If you want to go find the article, exact title core web vitals, getting ready for Google's page experience, ranking factor update, which is a mouthful in itself. Uh, but there is a, a fashion house, Chloe optimizes their core web values. It's actually a video that talks about them, uh, at least improving their co largest content, painful, uh, content full paint metric reduced from 2.9 to 1.5 seconds. Uh, I didn't get a chance to watch it. I would imagine if that's, that's something you want to learn how to do, that'd be a good video, uh, to jump into. Well, so, so what I would say is we, we, this was a lot of stuff that's going on in a search console. Really, you should be using search console. Uh, we had a scenario with the enterprise level client where, uh, the website was loading slow and the time, well, things that are happening in search consoles, like people going to the URL and then in analytics, the pixels got a fire website was too slow for the pixel to even fire, to be able to track it. And there was quite a delineation of what was happening, uh, in that area. Also in one of these updates, what Google's doing, speaking to fonts is they're like deciding what pages they want to get indexed and not indexed, right? They're not, they're being a lot pickier about what they're indexing and not indexing in the sense that they like don't want to, uh, spam up the results and they're just unindexing it. Like you need to go into, um, discovered, but not indexed. It's an option in, um, Google search console and see what's happening and then also look at why. And so fonts, spacing,

layout, there's a lot of things that Google's looking at to decide if it wants to, uh, keep your page in the rankings. If you do not show up, if you're like doing nap listings or if you have links or anything like that, if they're not showing up in the Google search results, they're not being taken into consideration, right? So, um, you know, going into, uh, search console for you, um, for your website, what you can control, it's absolutely critical and you should really be using, um, search console to look at numbers, not necessarily some of the other tools out there. I think the tools out there, uh, give you an indicator of what to do, but you know, it's always as good as like the data they have. And some of them have their own spiders, their own, you know, search engines, that sort of thing. Uh, but Google data, if you're trying to rank in Google, go to the source, right. And just know that we're talking about this because Google is starting to release some of that data more and more where before they were really hiding it, you had to pay for it. Um, and you know, this is certainly happening. They're trying to tell you what they would like to see to create a better experience. And they're giving you the data to do it. So, yeah, no, again, core web vitals, getting ready for Google's page experience, ranking factor update. Um, do you have anything else? And again, like one of the things that I, I will plug is server responding to slowly that, you know, go visit cohost. Let's talk about that. We're gonna have the, the chief technical officer. We'll give them that name of cohost on at some point. Um, and, uh, and talk about all the details that he runs through, uh, in order to make sure you're getting good speed on your, on your website. No, that's great idea. Yeah. All right. Uh, and that's it. That's all the information we would like you to

leave us a review. Uh, you can do that at ewrdigital.com forward slash review, or you could leave a video review. Like you heard from, uh, from Jeff at the beginning of this, and you can do that by going to ewrdigital.com forward slash video review. And you can also check out pro testimonials and how easy that is to work. Love it. Until the next podcast. My name is Chris Burris. My name is Matt Bertram. Bye bye for now.