Website loading speed hurts your audience's experience and your Google rankings in more ways than you think. Without even knowing it, your slow website could be costing you sale after sale. Learn how to assess and optimize your practice's website speed to maximize your sales on this week's podcast.
What's one invisible but hugely important aspect on your site that can make or break a sale? The speed of your website. Website loading problems can tank your audience experience and organic rankings, leaving you leaking away sales without even knowing it. On this week's podcast, we learn about First Contentful Paint, Largest Contesntful Paint, and accumulated layout shift -- the three factors to assess and optimize your website speed.
IVAN JURAS: Okay. So, yeah, we're doing a phase speed analysis for this website, Ameri Care PT. So by the way, they're right next to Dr. Perna. Oh, okay. So, they all work together. It's a giant family.
MATT COFFY: I feel like we're the mechanic of New Jersey, for their websites. Yeah. Anyways, go ahead.
IVAN JURAS: Okay. So I'm using a Google page speed insights. So this is the first two that I always use when analyzing websites. And, it's worth mentioning that starting from, I think May 20 21, Google is gonna, Google is actually gonna start taking into consideration these three things, the First Contentful paint. And we're going to explain what they are. The largest content ful paint and accumulated, layout shift. So they will start using these three things as a part of their algorithm, probably in five to six months. And it's going to be huge. So,
MATT COFFY: Before we get started, so what that really means is that before anybody even gets to your website, before they see anything, before even Google makes a decision of what content and keywords and all this stuff, there's an impact been happening dramatically in a couple of months. And that's incredibly important. Most people understand, yeah.
IVAN: Yes . And we, yeah, we have to like explain it to people, especially the clients when they... sometimes they really want to have like these sliders up, you know, even though they're not even that good for conversions because people don't usually click on sliders. But the other thing is, they're very resource intensive. You know, you wouldn't believe that, especially when they are above the fold. So let me explain what above the fold means first. So that's, whenever you reload the page, that's everything you see before starting to scroll, before you start scrolling down. Right. So this here, it's sometimes called the viewport and sometimes it's called, most of the time, it's called above the fold area, right. So this is very important for performance. And I'm going to explain...
MATT COFFY: And this is also where we find a lot of mobile issues, right Because at the end of the day, as people have started to transition almost all of their behavioral– behavior to mobile, and I mean, how can you not think about mobile first at this junction? It's gotta be your focus. So if your mobile scores are low fix, right?
IVAN: Yeah. I mean like, honestly, if the score is, if the score is red, that's bad. Right. But if it's yellow or green, it's still okay. So far, you know. But starting May 20 21, it's not going to be okay. So right now, the website performance is not that big of a factor for search engines as people think it is. Right. But you know, come in like six months from now, it's going to be a big factor. So that's something to think about. And one other thing,
MATT COFFY: Those that do, yeah, those that do this now, right, can adjust and tweak and review. And then by the time that we run around spring, they're ready to go. They get ranked and everybody will pop, who has already has this stuff fixed. So it's cool.
IVAN: Yes. Ranking factor. Let me just prove it. So I'm not talking from my head. Can you see this? They said this in May 20 20 core web vitals, which is these three things. The first Contentful paint, the Largest Contentful Paint and cumulative layout shifts. These are called, core web vitals altogether.
MATT COFFY: Well, it would make sense that Google is telling you this, meaning that if you're on a dev tool from Google and they're saying here's the here's red, red, red fix, like fix it! To me, it's not that difficult. It's like, okay, that sounds like a good idea. If Google is telling you with big red marks to say, "Hey, it takes 5.8 seconds for you to load," That's a problem.
IVAN: Yeah. It's like, you have a problem and it's not right now. It's not that big of a problem for Google, but it's a problem for users, right? Because people are becoming more and more impatient. And you know, when the first impression that you create on the user, it's very important. You know, how, when you, when you find, when you click on a website that's fast and snappy, some somehow you start trusting it right away. You know, even your subconscious brain starts thinking about it without even you knowing when, okay. So these guys, you know, it's very smooth. You know, the transitions from one page to the other, it doesn't take me time to load these pages and so on and so on. And so, it's got a lot of psychological influence that people can't even understand .
MATT COFFY: Right. And especially if a network–S o you're on a phone network, you may be on 4G. You may be on a version of 4G, may be on 3G, who knows. So, you know, the better chances of mobile having a better experience are all related to also network congestion. But I can tell you, there are days, especially here in New Jersey, when it's tough. I mean, there are a lot of people using their phones and it just makes a lot of sense to just fix this stuff. So what are we– let's go through some other diagnostics here. So we've got the basic and stuff like that. What's next.
IVAN: So, let's start with this, right. This is, this thing is called First Contentful paint, right And this is one of the top three, top three factors that Google is going to count in the future. And what this basically means is how much time does it take for, for any, like any, graphical element on the interface to start painting from the time you request the URL. Right. So when I type in Americare PT.com, and when I press enter, how much time does it take for the first bite of data to start appearing on the screen. Right. And that's, that's one of the things that, you know– look at this here, like, this is Google taking snapshots. Can you see this? You know, so, who doesn't like that, you know, ideally you should start seeing something here, right. Something should start painting here, you know, and then it should gradually go down.
MATT COFFY: No, I think we all, so let me just, I understand where you're going with this. And I think we all understand that there's a lot of weight, maybe is the best way to put that into the head.
IVAN: Yes. So the problem is, you know, the problem why this is happening, and why nothing starts painting, is that Google or Chrome starts reading the code from top to bottom. Right. And when it stumbles upon, when it stumbles on a script, it goes into that script and starts reading that script, you know, and then it pauses everything, you know. So instead of going down right away like this, it stops and it goes into the file. Into, like, for example, this one, can you see this? This is a CSS style sheet. So it reads this, this, this, and then it goes here and then boom, it goes here and then starts reading this. And while it's reading this piece of code, everything below stops. Right. Which is...
MATT COFFY: Yeah, sorry, just what I was saying. There's so much weight in the front end of the site. It's like having a boat anchor on your site, just dragging along the ground because you're just making it do more and more calculations just to explain how to set the page up when that stuff can be, not necessarily, I think when it eliminates maybe not the best way to put it, but to reposition it, you know, maybe there's a better way to do it.
IVAN: Yes. So the, the idea is to, but you have to reposition it while still, you know, there are other elements on the page that are dependent on that code, right. So you have to be smart. You have to split the code. Right. So whatever is not necessary right away for the first screen for this screen to paint, you always put it at the bottom. Right. So then the user gets like a perceived... the perceived performance is okay, this slow to distantly, you know, while in fact, none of these things, none of these here have loaded right away, you know, but for the user, what's important is that the sc reen paints right away before they start scoring. So this is how can we improve the, how can you do that, right. You can split the code. You keep the code that's necessary to paint this part, and you put the other code at the bottom.
IVAN: Right. So that's one of the things that can increase, this thing here. Right. And right away, like right immediately after that, you have the Largest Contentful Paint, which is basically like a sibling to this. But what this means is how much time does it take for the biggest element inside of the screen, the visible screen, to paint, right. And the biggest element is this background image, which there are multiple images, right? So this, this is like, how much time does it take for the biggest elements to load and for the user to see right away. So this is the second thing you can work on and the way to fix it. I see that the images, the photos are already optimized because they're kind of blurry, which is okay for the web, right. You can use a different, you can use more modern image formats like web P for example, which basically cuts the image size by 70%.
IVAN: Right So that's one of the things you can do to improve this. Right. And the next thing, right. Time to interactive, this is, how much time, 8.8 seconds is really a lot, right. So how much time does it take before the user can start interacting with elements? You know, for example, how much time does it take before you can hover over this, and you know, this thing here, right? So it's a lot of time. You can fix it. There are a lot of fixes to do that. And then this one is very important, which is orange, which is not good, is cumulative layout shifts. So basically, I don't know, you've probably experienced this when you scroll the website. You have, let's say you have this heading here and then you have, let's say a one paragraph with text, and then you have the other paragraph.
IVAN: And when you come to this, when you start reading, start reading the second paragraph, suddenly they break up and then you see the image show up, you know, in the middle between two paragraphs, this is because this is because you didn't assign the appropriate space for that image to appear, right? So it basically it splits up the first paragraph. And this is what Google hates, you know, because it's not good for the user. There are so many problems. For example, if you want to order something. Let's say you wanted to request an appointment. You know, you are about to click this. And then the image appears above that. Right. And then pushes the appointment button down. Or you suddenly, you accidentally want to cancel an order, but by accident, you actually click on buy because the buttons have moved because of the image above, right?
IVAN: So this is the layout shifting that's happening, right? So this is something that, you know, all of these things are easily fixable, but you have to know what you're doing. Like if you want to go down, like, for example, we're not going to go through everything. But for example, render- blocking resources. This is what I said before, right. R ender- blocking, which means, you know, you have a script and it's blocking the rendering of the entire page. So you have to split it up into two. initial server response time. This is a, this is probably a web hosting problem. So we can see where this website is hosted. who's hosting this dot com. Let me check if it can detect in the web host.
IVAN: Oh, its server's a Yahoo. Let me see, who is hosting website, a hosting check. Let's see if this one can find out
MATT COFFY: Like who's the road host of Yahoo?
IVAN: Yeah. So, who's the web who is hosting this website. Let me see if we can find out. Oops. have you seen that? So that was a cumulative layout shift. Can you see this? So it's crazy, right. So this is what Google wants to stop. Who is hosting this website, see this, this is a bad user experience. Everything is moving around and that's why I'm going to click back. Okay. So we, I don't think we were able to find it, but it's basically, it's a web hosting issue. This here, you can improve it by hosting it on a CDN, you know, using the cloud hosting and so on. And so on, like a lot of options.
MATT COFFY: Yeah, there's a lot of– when you start to look at real hosting strategies and you use content delivery networks, like a CDN, now you're actually resourcing a lot of the allocation on, in the cloud, as opposed to trying to put it onto the server where that's just a waste of complete bandwidth being used, where there's such faster servers that could be utilized, but anyways...
IVAN: And it's not even expensive anymore you know, it's not like what it was like 5 to 10 years ago. Now it's much more, it's pretty much a standard. If you want to work fast website, you need to get yourself a fast CDN. And the cloud hosting provider, you know. So, we move on to CSS. So let's just finish with this. CSS is basically the styling language of the web. And, you know, most of the time you have a lot of elements. A lot of CSS code gets pulled, even though it doesn't do anything for the specific page. So for example, I don't know what it is like specifically for this webpage. It would take me more time to find out. But, you know, for example, you can have different classes that have to do something with something that's on another page, but you're still calling it here. So we have to clean up the code. So the browser only calls the code that's actually relevant for this particular page. Right. So, yeah. So all of these small things...
MATT COFFY: Let's take a look at GT metrics for a second, since, you know, we've done this page and said, I think this gives us even a better print, because what I see is the... When I see a GT metric score of an E, it tells me that we know that the big issues are the paint in this particular case. So if we went to the waterfall and we looked at the performance, we know like a lot of it has to do with there's something hanging this thing up, like there's probably one or two main things that are hanging this up, right. Yeah.
IVAN: Yeah. I mean, the, for example, look at this, like, there are a couple of scripts that are not even loading. Let me check that. Let me check the console to see, yeah. Like, look at this. Like if you go to, if you click on console, there are more than 40 errors, right. So this is something that needs to be fixed. For example, this one here, 27 error calls, which is huge. So, but the thing with GT metrics is that it's basically starting to pull the same thing that Google is pulling, because they figured out what the best metrics are to actually measure the real perceived perform– not the real performance, but the perceived performance that the user experiences. Right. So it's the same thing. Like looking at it, everything reappears. So the First Contentful Paint, Largest Content ful Paint, you know, blocking time, you know, much longer than recommended. So if you lose one second, just by, you know, just by looking at the script, that shouldn't even be there in the first place. Right. So a lot of the things are the same here, right. So if you look at the waterfall, you can see anything specific, right Because, DNS lookup, it's fine. 63 milliseconds, which is...
MATT COFFY: What I look at is all the zeros though. What I try and find is a zero where I know there's problem. Right. So if you go down there, like you just right there, like, I see that's a problem. It's getting hung up. That's a problem. It's getting hung up.
IVAN: Yeah. It's for example, this one here doesn't even exist. It's a 404 . So this key or the add this element, which is a very unpopular, widget, you know, just fixing a couple of these things can help you out. But, you know, eventually you have to look at it from a holistic level, right. So you have to optimize images, you have to optimize the code and, you know, you have to do a couple of tweaks in order to get these things down and you should be fine. Right.
MATT COFFY: So, another question I have, and then we'll wrap it, but, there's, there's 69 requests in this load for this page. Right. So it's, so obviously I think we'd want maybe potentially less requests if we didn't have to, if they're just sort of like a bunch of little, nothing, images. Like to maybe have, instead of 10 different images, broken up, maybe have a one image that's clickable for multiple things. Like, I don't know. I mean, things like seems like there's so much repetitive with this on here that doesn't need to be here.
MATT COFFY: So that's what I was saying, just to combine a lot of resource allocation so that you're not doing a bunch of polls for no reason, it's just, it's allocated in tandem, like you were saying. Like, these can all be pulled up in tandem, but you got to make them so they don't have multiple threads underneath it.
IVAN: Yes. That's correct. This is a typical example of SVG images, you know, because I see a lot of people, calling them externally, like, as it were, as if it were a JPEG or PNG file, when it's not necessary, you know, you can embed the entire, icon into the page and it will load right away. And it will not have additional calls. Like if you can eliminate just that, you know, you save yourself from eight calls here, right. You have eight images and you can save yourself, basically eight calls right away in a second. Cool. So a couple little, a lot of smaller tweaks. Yeah.
MATT COFFY: And this is by the way, this is, this is like a typical website. We don't, I mean, 95%
MATT COFFY: Of the websites that we see are great. I mean, are just not even close like this. So yeah. You know, everybody needs a tweak and by June or May of next year, it's going to have a massive impact. So good. Thank you, Ivan. I appreciate your help. This has been a wonderful way to look through this stuff. And although somewhat detailed, I think people get the fact that, you know, don't have a boat anchor dragging your website along the ground. Just no reason to do it. And your customers don't like it either. And especially as we noticed, if things are flipping around on your website and someone's trying to squirrel, it's a real annoyance.