Core Web Vitals Guide: step by step instructions to improve it

0:03
Hello, we’re back again, Episode Three of the crazy optimizer. I’m Michael Borgelt.

0:10
I’m Abdul

0:15
we’re still getting used to doing these together, we’re actually trying to new piece of software today to, you know, see how this all works and see how it goes. All we’re going to really talk about today should be a short and sweet video is just PageSpeed scores. And usually things we see that are issues and how we can address them with different tools. So we’re gonna talk about gt metrics, Google pay, or sorry, gt metrics and the PageSpeed score is associated to that. So what I’m going to do is share my screen and then kind of jump back and forth between the results that were able to get but kind of talk about things that we that we see quite often here. And Abdul if you want to talk a little bit about, you know, the PageSpeed scores and some of the things you see that end up happening and the issues and how to address those.

1:00
Okay, so yeah, I think it’s a good good point to start out. So this is like one of our websites that we went last, we just ran an audit on this like a few minutes ago. So as you can see the base bitcoins that have been 99 and why so it’s 98, white loaded in one second. So I think with PageSpeed scores, there are quite a few best practices that people have to follow. And in my experience, I’ve seen some of the some of the there are some reoccurring problems that you see with a lot of websites, because whenever the website has high load times or a low Page Speed goes, there are chances that some problems would be reoccurring, like deafening of parsing of JavaScript, serving scaled images, specifying image dimensions, minification of files. So these are some things that are there in almost all websites, if they have not been optimized. So I think these are some areas where and the thing is that these affect the PageSpeed scores a lot as well because these are high, high high priority items, and that impact the user experience, so Google, mp3 schoolcraft, takeaways etc. So there are a few things that we can talk about, like some of the things that might be the theme that we occur and how we can fix them as well. So I think I think

2:12
the other great place to start, so I think you should probably just identify a couple of them, like you said, maybe it’s the sort of scale images of different parsing of JavaScript and kind of talk about those. Yeah,

2:21
yep. So I think in my and take three up. So in my experiences, these three like have a big impact when it comes to your PHP scores. And not just any code. It’s just a human usability as well, because the point of these courses, not just to have a high score have a high number. But the point is, because we know that these things make the users experience better. So they’re important for the user as well to have some good schools here. So I think the three ones that have a view that that are just there and most of the websites and have a big impact is definitely parsing of JavaScript, serving scaled images and optimizing of images to these three things because have like a big impact. And especially with all these images, high resolution images, people that are having some very high resolution images, dp. So these images have become a big problem these days, because then you have like, a lot of high resolution images that people upload directly to their websites. And then what happens is, now you have six empty images. And if it’s a blog, or if it’s a website with a lot of images, you have a lot of image data that has to be transferred. So and then not using the main so like the problem that comes with certain skill signing images is what happens is you have a very big image when you play if you’re a photographer and you take a pic in you take away beautiful image of, let’s say, the night sky. What happens is this image is like six MB eight, me, and it’s a huge revolution. But when you’re displaying it on a website, you don’t have that much information that you need. So you have to have it in small so what people do is they just upload the big version, and then WordPress in this example, what it does is it uses HTML or CSS or HTML It resizes the image to the size of new needs. So it’s a big image, let’s say 5000 by 5000 pixels, and then you resizing it to like 300 or 250 by 250, or something like that on HTML. So what happens is the whole image image gets loaded first, and then it gets resized. So that has a big impact if you have a lot of images on your website. So one of the reasons why people like specially come to us and say, how did you reduce the php page size? Because people think that Okay, we’ll improve the PHP code and will reduce the load time. But one of the biggest impact that they see is in the paid side FM because they see they will the page size of a five MB fix me before. And then it’s like, like on this one also for 43 kb. So one of the biggest reasons are these images, because we know that these people tend to have huge images on their website. So once you start reducing them, and just having the actual size image that you need on the website. So that’s one of the way big impact a Have you seen.

4:56
Yeah, I think that’s a good point. I think, you know, even on this image, it looks like We get it to be the right size and even get a better score there. Right? We have 100% on our search scale, right. And one thing you do see here, and this is jumping way down to another one of these items down here is using a CDN. Right? You’ll see that we, we use a CDN for serving our employers and our scripts. Do you want to talk a little bit about that as well,

5:22
we can see the CDs I think are we are really, really important, especially if you have a international audience. And even if your audience is nationwide, as well, because if you have a server that’s maybe in Dallas in Dallas data center, but you have nationwide audiences coming in from different cities, so then having a CDN in place really helps us really, really helps you in making sure that your website is fast, especially if you have a lot of images again, because nowadays, websites tend to be very image heavy. So a lot of optimization. focus is on the images side as well. And that’s why they penalize as well, Google penalizes these images that if you optimize them, so that’s why impacted PageSpeed scores as well. So having a good CDN in place, quite a few good providers nowadays, we use Amazon because of their presence because they have one of the largest presence in the cities and we work in and the countries that have customers up. So we use Amazon, definitely some other good ones like maxcdn, there’s key CDN that’s been used this backpack that we’ve also used it in the past, you have to have quite a few good providers. It’s not I think it’s just using them. It’s not it doesn’t matter a lot, especially for normal business to I don’t think they should focus on what kind of provider they want to work with. It’s just having a CDN in base a with any provider. It’s much much better than not having it.

6:42
Yeah, I, I agree. You’re you’re able to leverage their network to serve these things for them much, much quicker. So why don’t we talk a little bit about just different parsing of JavaScript? Yeah,

6:53
that that is, I think, one of the biggest years which I in my opinion has given the biggest impact Both in terms of scores in terms of load time and in terms of user experience, and it is the one that is the creepiest of all as well out of all these things, and getting that done. So that is one thing that you see in a lot of websites is not it’s not being done. And it is one of the biggest reasons people get low scores, because the main idea behind it is that nowadays, like we have websites that are very interactive, they have a lot of interaction going on, or images that have to be loaded, lots of interactions or have animations of have to go in. And all of this is powered by JavaScript. So what happens is when you load a page, especially when developers have made the websites, they focus a lot of the interactions, not on the performance side. So what happens is when the page gets loaded, all of these JavaScripts are getting loaded, while at just a starting point. So what happens with what we call it is render blocking scripts. What happens is your page cannot render because scripts are still being loaded. So the script one systems get loaded, then your pH or the remaining page gets loaded. So many times so many scripts that have load that people will have to wait for maybe three, four or five seconds before they can start interacting with the page. So one of the biggest areas impact is definitely these JavaScript. So apart from the essential JavaScript, you we take all the JavaScript, and we make sure that they don’t know, they don’t become render blocking. So they’re not blocking anything, any page or anything from on the page to render. And they are loaded as for the US weather requirements when they need it. So because of this, in this complexity of you can see our script sometimes this is tricky. So none of the Not a lot of people don’t touch that, because that is where you entering into the programming coding territory and like a lot of codebase optimizations, but I think for us, it’s very important and we do it with all of our clients, because it really helps the user experience as well and it helps us get very good scores as well. So

8:50
I think that’s, that’s an important thing to mention is when you’re going and you you know, kind of mess around with JavaScript. You You know, you can break the site that can happen, right?

9:02
Very easy. It’s very easy to do that.

9:05
And I’ve been known to do that as I was doing the optimizations. That’s why I have dual does them now. So one other thing, I think that, that I’ll kind of just go back and share the screen again, real quick is, you know, talking about, you know, enabling compression, right, a very simple thing to get done. But I’ve seen it a lot when I’ve done optimizations that that’s not enabled on a lot of server platforms, right. So maybe you talk a little bit about that how to make sure that gets done and done properly.

9:37
See, there are two ways to have compression enabling the best one is to have it server level. But you rightly said more a lot of hosting providers don’t have it enabled specially the older hosting providers are more remote on the shared hosting environment. I I think all the good providers nowadays in the industry, it’s pretty standard to have it active. But still if if you are using a old shared hosting type hosting environment, there’s a big chance that it’s not enabled. So that WordPress does allow a lot of plugins on WordPress to allow you to have it enabled site on the site level. But it’s not as as impactful as it having it on server level is we do have a lot of server level compression going on, on our servers. But I think it’s best to our own server level. If it’s not on your server, you should get a better host. You should like have enabled at least on the site level, but it won’t be as good lately, if it’s better than having not having it. Yeah,

10:33
yeah, I think that’s, it’s as simple as you know, I feel like it’s as simple as contacting your host and telling them, hey, we need this enabled, right? And they enable it and then usually you get much better scores in that space. So let’s just quickly talk about the type of plugins you like to recommend. I mean, obviously, we have our stack in our set that is you know, proprietary to our, our, our technology information, right. So, but if you if somebody I cannot sign up with us. You know we’ve had I know that we in the past I’ve used WP rocket WP fastest cache w three, see all of those plugins and it always, you know, it’s almost like even with our stack, sometimes we use additional plugins as well. So let’s just talk a little bit about like what you recommend in that space as well. So I

11:21
think you mentioned two of my favorite plugins when if they’re not with us, then I think the with the WP rocket and WP fastest cache are one of my favorite two of my favorite plugins as well. When it comes to the caching part two, they do a lot of stuff. They do a lot of caching. But again, these are mainly focused on the caching side a little bit on the optimization side. They won’t be doing the codebase optimizations, they won’t be doing testing of JavaScript, they won’t be doing that kind of stuff. Because the purpose is these these tools are made for mass use, made for people who can just install it and just one click, they run. So that’s a good thing about these two logins that they just run. You don’t have to do a lot of customization to install them. But I do have my leanings towards WP fastest cache. One reason being that it’s almost free, like most of its features are free. So it’s very easy for people to get in and install. And it’s like it works. You don’t have to you don’t have to do a lot of setting that just works out of the box. You just select a few clicks, and it’s working. But if someone wants to get a premium plugin, then definitely WP rocket is the way to go. So yeah, so I think, coming on the two points that I mentioned earlier on the image side on image optimization and serving scale site. So there’s a plugin for that as well, that we that I really like. And we also have it in our site that we encourage men, I think it’s a good way to give a shout out to short pixel guys because they’ve done a very good job with that. So that helps you with those two things, made optimize images and it has, it makes sure that you’re sending the right side with images you’re selling big images with does a lot. It takes a lot away from the site and it does it on there. So it doesn’t load your service as well. So I think that is something that You should be using it’s a paid plugin, it’s not free, but it’s something that you should have, especially if your website has a lot of images.

13:06
Yeah, and I think that’s a great point you just made there is part of optimization is taking the load off of the server, right? And that’s where, you know, you don’t want to overload a server and have so many dates on them, you know, we, we definitely say we, hey, we’re going to, you know, be a 50% load or whatever it may be for our servers. But once even after you bring on a site, sometimes you’re able to add another site because the performance has gotten that much better of that site, right. So if you like, we kind of joke around between naughty and nice sites, right? Like when they come over the sites at not acting properly, we got to fix it, get a more optimization, whatever it may be, and then it becomes a nice category and then we don’t have problems with it anymore because it’s it’s it’s performing like it should perform and not eating up resources or whatever it may be. And we’re very active and looking at at that monitoring and having having that stuff almost to the point where I know, we know, there’s issues with data centers before the data center people,

14:06
right? So happens a lot actually. Yeah, we are they monitoring

14:12
their monitoring platform really is our alerts tell us then we tell them and they’re like, Oh, yeah, we need to go look at that node or whatever it may be, and address it at that time. Is there anything else you kind of want to add? As we kind of wrap up Page Speed? Obviously, it’s a big, a big number that people definitely look at on gt metrics. Usually, when you get the 90s, high 90s to 100, you usually see desktop fall in line, Would you say that’s kind of the same or not,

14:39
I think it is becoming is definitely one mobile, it’s a little lower. But we have seen that most of the time. It’s it’s not that different if it’s a 98 on text, or it’s 95 on a phone. So it’s not that different, because the caching technology fulfills also getting a better at doing that as well. So I think just one thing I’d like to add here, that like the page load time is beautiful and This website is one second. So one of the reasons why because this site loads in under one, one second as well, sometimes we’ll get point a second sometimes will get 2.7 seconds. So one of the reason for that is that we have very good server level caching as well, we use Redis. for that. So we have a very optimized. So I think that is one point is that we don’t just rely on the websites, caching plugins are on a stack on the site site level, we have a lot of optimizations done on server level as well, that may that allow us to have these under one second, because we have a lot of sites that are under one second. No thing one of the reason for that is that is which really works. So So I think it’s having a fine tune, having all these things fine tune, making sure that they all working together because that is where the problems start happening. When you have a lot of things start because we have had clients who have to try to do performance optimizations on their own. But the problems happen when you have a lot of things moving parts in WordPress, you have the server you have, say fix Apache nginx. On the server, you have server level caching ready A gadget. And then you have plugins and optimization tool on site. The problem is making sure that they all work together. So I think that’s where that’s the main area to focus on for provider like us that we do.

16:12
Yeah. And I think that’s a big point I just wrote down and maybe that’s a another, you know, video that we create here about server stack optimization, right. Like, I know, a lot of business owners aren’t dealing with that or even agencies, but they need to understand how that works and how, you know, Apache or nginx, versus, you know, Redis, and other caching, lightspeed stuff, all those things that they lay on the server prior to even taking it over to how they interact with those things properly. And that’s where you’re at, you’re a much more of an expert in that space than I am. But I think you know, we covered a great, great deal here with just page speed and how to address a couple of plugins you can use to optimize optimize your site to get you know, higher scores and good gt metrics and Google PageSpeed scores. You know, obviously it anytime you want to talk to us and have us host your site or death. Play open to doing that and getting those scores we’re actually offering right now that we will guarantee getting you into the 90s on gt metrics and Google pay and Google Page Speed score will give you a $25 gift card to Amazon. That’s kind of how confident we are in getting these results right now. Anything else? I don’t

17:21
know, I think I think it’s good. I think we have I think we’ll be covering more technical points as we go forward. But and people should stay tuned.

17:29
Yeah, yeah, we’ll stay tuned. I think we’re gonna bring on some additional people to talk to some industry leaders as this kind of comes on and as we make more partnerships in the space, but until then, obviously, keep your sites running fast and don’t overload servers. All right. Have a good day. You Bye bye.