0:07
Hello, and welcome to the crazy optimizer presented by the WP help. I’m Michael Borgelt. I’m Abdul. And that’s Abdul, the crazy optimizer himself in the house with us today. Today we’re going to go through a little bit of a report that we’ve created. And then we’re gonna actually jump over to gt metrics as we have the links kind of saved. And today we’re going to talk about the page details that you see on gt metrics. So the fully loaded time, a total page size, and the number of requests. So here you can see quickly, the old site, the site that was previously launched, that was long running on their server, you can see that you know, pretty low scores, but the fully load time was 37 seconds, almost 38 seconds, 900 megabytes and 290 requests. And then once we done that, once we did the optimization, the fully loaded time was two seconds. 250 kilobytes and Only 13 requests. So a pretty significant reduction on this on this site that we’ve created here. So here’s we just dive in a little bit more of the details of the seconds and what we went down the page scores compared to the old and the new the number of requests the time to first byte we talked about that is that’s a learn today is a site speed issue that we definitely want to address. And it’s usually addressed at the server level, page, page speed or page size, you can see the difference there significant reduction there, which is obviously then gets the number of requests that reduce that as well. And then just quickly, we show the Google page insights tool as well, that has, you know, 22 for mobile, and 57 for desktop and then 98. For after it’s been optimized the 98 on mobile and 100 on desktop. So I have the two gt metrics scores pulled up here and I think we’ll just kind of dive right into it. So I think one of the first things we should just talk about is the fully loaded time and why this is important and how Different people measure it, right like people measure it differently a duel based on what we’ve seen, even with tools that we’ve used, and even tools we’re currently using right now where we’re trying to convince them to measure it differently, right of how they how they measure fully loaded and load time, just in general. So I’ll just talk a little bit about that.
2:18
Okay, I think in the last video, we touched upon the PageSpeed score, and we wanted to do the page load time inside and request today. So I think in my opinion, for me when I’m optimizing a website of themes, optimizing the website, scores are important, right? Because they show you how well you’re doing on the best practices. But from a user’s perspective, to me, the biggest thing that they feel is the load time. So that’s the main importance of it because a website do it’s not generally possible but I have seen it sometimes it can have very good PageSpeed scores, but not a good load time. But if you normally it’s not possible if you have a good PageSpeed co you always have a good load time because you’ve done the best practices but Just for the sake of ultimate, like, people don’t care about the scoring for the school site. It’s the website owner that cares because they know how well the website is built, and it’s falling all the best practices. But if it’s not loading fast, the user doesn’t care. So the first, and the only key metric that comes into effect with the user is the load time. So I think for us, as men, it’s very important like to make sure that you’re loading fast. And it’s so many studies done like in the past few years, low time has been a very, very big factor when it comes to optimize when it comes to conversions as well when it comes to user experience as well. And now with Google’s new update coming on any time this year, we I expected to see chrome in Chrome, the daily flagging websites that are slow, and that it still affects your rankings, but now to start affecting it more. So I think the people like because most of the people these days, court studies have four seconds. You have to be under four seconds, but I think we mentioned previously do some work because that studies also from glod 15. So I think like it’s even gotten worse now like people expect websites going even faster than four seconds actually like for us, four seconds is not good enough. We always make sure that we like we are somewhere around to under two seconds, some of us even go under one thing. But two second desserts, good sweet spot. If you anywhere from like 1.5 to 2.5 seconds, you went this, you had a safe zone, where you can say like, even with this updates that are coming up with people getting more demanding on speed, you end up safe zone.
4:32
Yeah. And I think that’s a great point that you mentioned about, you know, obviously Google wants a great user experience. That’s why it’s a ranking factor. And one of the reasons I mean, how quickly a site loads is that is a user experience metric, right. So having a site that loads quickly, is very important, and I believe does contribute to increase rankings. We have seen sites that jump on to our platform to have an increasing conversion rate of 18 to 30%. Based on this studies that we’ve done just due to having a quicker loading site, which which makes sense, right? People are able to bounce through, get more information, if they’re on their mobile devices or even on on the on the web. It’s somebody that’s floating that 37 seconds previously, probably not having a lot of fun bouncing around that website looking for information, right. So that’s one of the things that we’ve seen, we also seen an increasing number of users. And just recently with the new Google rollout that just happened this last couple days, we’ve seen sites move up in regards to speed as well. And, you know, you mentioned the the user experience of the tags coming out that Google is going to start applying to sites that’s you don’t think that’s going to affect conversion rates. You’re You’re crazy, right? As soon as somebody sees that they’re going to condition just to go back and go to the next result, because it’s not going to be a good user experience. So here, just quickly, you can see that, you know, gt metrics measures, you know, a fully loaded time on average is 6.9 seconds. I think we would all agree that’s way too long. In general, just even if it’s an average size, that’s just sure How core the web is performing right now in regards to sites overall, in general, as gt metric is measured.
6:09
And I think one point that you also mentioned is how different tools tracking differently, right? So we’re right, because we have seen it in action we have seen when we use different tools, we do get different times when we started investigating. And the key thing that came out was that the way they calculate time, so in my opinion, gt metrics is one of the process what do I actually use it, of how an actual user would go through your website, but some tools because when you do a lot of optimization, you have to do a lot of things. That’s why we get good load times. A very good page we pay sighs good scores, because we prioritize the page like we know that we have to give the first four to the user as soon as possible to start using the website. But the problem is that certain tools are not programmed to do it like that for a doula program to wait for the whole thing to load. So when a system is not Even ready to give them the information because they have not started interacting with the page of definitely the payload timeless i. So I’ve seen in my experience that gt metrics is one of the best of the closest one to an actual user, because we do test it on our systems as well on our end, and define it very close to what geometric sense. But we do use different metrics because they accepted because we we do get our own tools as well, where we measured, but gt metrics being one of the widely recognized ones. So that’s where we form a baseline on
7:31
that. I think that and we use Google page insights, because those are the two biggest ones that people use. We talked a little bit about, like fully loaded versus page loaded and what’s that actually called and how people recognize that differently,
7:43
getting other timings.
7:47
Okay, so the free time basically what happens is that you went user hits enter once you use Alexis Valley plumbing.com. They send the request, the first thing which is this TTS ttfn Which is called time to first byte. So that is like a metric that is very much dependent on the server and the host you’re on. Because if seen, like if a consequence goes on, so you have these three parts that are in there that redirect the Connect and the back end, right? So redirect is if they have any redirects happening, or if they get redirected from a non secure to secure. So there’s, if there’s a time for that, how long did the server take to connect it? How long did it take to start the request and send the first bite back to the beach. So lower this is, the better it is. And it’s the uncertain elements with your website and also affected but like 90% is hosting that you’re using that is affecting this because we’ve seen the North we do have a list of bad hosts as well Italy, which we were very know that the PDF we will be higher, but if you go to any good host, they are actively working on this score. And on test number two, make sure that your websites are loading like First bite is as soon as possible. And if anything like that 200 milliseconds is good.
9:05
Yeah. And I would say, under what time? How much time? Under 200 milliseconds. Okay. So it’s funny. When I, long time ago, before I really knew what I knew now, I would call or I would talk with web hosts. And they would say, hey, that’s not a server issue. That’s not a server issue. They’d constantly say that. And while it’s interacting with the WordPress platform, and there’s some, you know, you got to have optimization on both sides. I tested out 42 different platforms, right to find one, it wasn’t necessarily the number one fastest because of beta didn’t have some other features that I needed. But it was one of the faster ones just because I was seeing, you know, very, very well known hosting providers over a second Justin first time device. So that’s something you definitely need to look at and your hosting provider and if you want quick load times, obviously if so, He’s taking a second just to connect to your site and provide that information and start to load the page that that’s obviously going to affect your your load time. So why don’t we keep going? This is a great screenshot here that we can just kind of
10:12
scan again, just to compare. Can you open the previous one?
10:16
Yeah.
10:18
So this is a perfect example, like you mentioned, right? So here’s the 1.2 seconds of first time to bite.
10:24
So yes, so that is why it’s taking like, it just took point six seconds, 600 milliseconds for the backend to get ready and respond. So that’s where the server is. And once the server got connected in 300 milliseconds, it took 600 milliseconds to get connected, like 900 milliseconds in total to get connected, and then send the first bite back, if you compare to the optimized one, the new one,
10:48
yeah, hold on real quick. I’m just gonna point this out. So that’s 500 milliseconds, roughly. That’s a point six, you’ve already wasted a second right there, right. So that’s what we’re seeing in the waterfall before we can even really start start seeing stuff, load. But if I go here, we’ll see it’s zero 51 milliseconds and 24 milliseconds.
11:07
Yes. So once the server got the request, it just took 24 milliseconds to get back to the user. So that’s where the tdsb comes in. And it’s a very important metric. Because if, if you’re not good here, you’re ready. Like, you’re like with us the time was two seconds after the optimization, but the previously at 1.2 seconds before the first bite. So that’s why it’s so important to start Well, here because if you don’t start Well, here, then it’s a knockdown effect that follows
11:33
you, I think you could say, this isn’t a marathon, you’re not supposed to start out kind of slow and you know, warm into it. It’s definitely a this is the hundred meter, you know, dash here at the Olympics, you want to start off fast when the gun goes, right. So if you want to be quick in the in the, in the first 10 meters of the hundred meters.
11:52
So that’s, that’s how you want it right. Because nowadays, when when, especially like if you don’t even have to look at studies that you can look at your own Users, like you be all use websites every day. And like, it’s everyday village website is slow. Like, you already the website is already starting on a, like a negative kind of connotation for anyone that’s coming there, right? They won’t be very much happy for that website, you only buy something if you’re like very much like if they’re the only one doing that thing, or they’re only one offering it. But otherwise, if you have options, they won’t be the first choice. Okay, so once the first main area that starts coming up where the page is the first page and contentful paint that the first one basically means when is the How long did it take for the first piece of you can fake relevant information to get to the browser for the DOM. So normally, I’ve seen first paint and content to be an anomaly the same. And because actually you can see point 6.6 because normally happens at the same time, if it’s optimized. If the website is not optimized there it might there might be a delay in this. But if it’s optimized so you get both Two things in the same time. So basically when because you have to dominate and document of it object model. So for people that they’re not very technical, that’s how like, once you have once HTML code starts coming in the basic Dom comes in, which tells the browser how the page is structured, how many elements of it have. So contentful pain means when the first piece of that information reaches the browser, to start creating the page. So that’s, that’s the main element of this. So that’s where what we start marking. So now the thing is that all these key points that are happening here, affect your base speed scores as well. And the low time because there are certain things that are hard because you cannot have these things happening fast if you’re not following the best practices. Like if you don’t have critical CSS happening if you don’t have CFM, which is not random blocking. If you don’t have the JavaScript which is not end up blocking these things. What happened this past they will happen slowly, and then like overlapping either each other and you have these big differences or big time to time differences between each element. So that would affect your PSP score. So that’s why they’re interrelated. So that’s why I said like, I normally don’t see a website with like, hundred Peace Peace Corps in a bad little thing. Yeah. Because it can theoretically happen. It can be like, in theory, it can happen, but it doesn’t happen like that. Yeah. Yeah.
14:19
So talk about I mean, we, you kind of mentioned it to the DOM, you know, versus the DOM fully loaded, right. And that’s how some people measure speed differently,
14:30
right. So for gt metrics, it measures all these things, where you have the contentful paint, then you have domination lies on the lake for this website, we can see it’s 1.6 seconds on 600 milliseconds. The first content for paint came in, in on 700 seconds. So after 100 milliseconds, the DOM start initializing. So it’s like when the page started, starts building itself. So when you go to a website, what you’ll see is that certain things start coming up so that’s what domination ization is. That now the pages started to build out. browser. So then we have the downloaded where majority of the things of the DOM have been loaded. And normally and download means when the website is ready to use. So that’s this all if you count all this, this will come to two seconds. So approximately do not trust like the not not normally, it looks like it’s like 75 milliseconds, plus 6.6 seconds plus point six seconds. It’s not like that. It’s it’s like, these things are loading the last. So it’s like, it’s a little technical in that sense, and how because things happening at the same time, so they’re not six and 600 milliseconds after the previous one, they at the same time, so they can
15:40
run in parallel is what you’re saying. Yes,
15:42
yes. So once you add all these, they come to comparable, two seconds of the load time. So that’s where the defense starts coming in between tools, right? Because now, what gt metrics considered the onload is when the first four that you’re looking at is ready to use The JavaScript has lowered, the CSS has loaded. But that’s where our optimization is kicking in. Because we want to make sure that we prioritize because there’s no use giving a user the footer when they add the header right when they add the first fold. So that’s where that’s what we start doing that we give them the first area that they have to be using. And like, hold on all the images and everything that are better played up underneath the fold. Because the first page is ready to use, everything is ready. And by the time they start, they’ve done with this and they start scrolling down to things would be ready there as well. And that’s what we call them also. So that’s what we do with lazy loading images, ladies, so we never any non essential JavaScript that’s not needed until we detect user detection. So that is one of the key areas where some tools get it wrong, because we have purposefully done that to make the websites were optimized and to make the websites like load fast and also give a better experience instead, okay? And also for us I was has been, we want to make sure that our servers are overloaded as well. So what we do is we say, Okay, let’s only load certain things when we see people actually doing something on the website. So now that’s what controls some of the tools that they keep waiting for that to happen. But it’s purposefully done. So that’s why you’d like it to gt metrics, being one of the ones that have moved very close to our real user will use it.
17:26
Yeah, I go, you know, great, great explanation, we’re actually working with one of our partners right now, inside their tool to help them identify how to properly measure load time, what we believe to be properly measured, because these tools, that’s how they’re measuring it. So this is where our clients go, to measure it to compare our results with them. So we want to make sure we’re showing very similar results within a you know, a couple hundred set, you know, milliseconds or seconds, tenths of a second, you know, so that’s not significantly different in regards to seconds because then otherwise his questions start raised, and then we have to Get into the technical conversation of, of the download time and things like that. So, you know, imagine you mentioned lazy loading images, I think that’s something you almost see on every caching tool that is used out there is to do that, or defer JavaScript or things like that, right. So let’s just talk, you know, quickly, you know, obviously, checking those things can make a difference in your site. And they can cause things to break and you need to test them. I guess that’s kind of where I’m going with with that, and, and, you know, it’s the process of turning one on turning one off, turning one on turning the next one on, oh, which one conflicts with the other one to get it to work properly?
18:38
Because I think that’s a lesson every kind of person who works with WordPress learns the hard way. Download a plugin, a very good plugin and paste the SEO, there’s so many nice things and we activated already want a website to be the best. So we activated all and then we go into pages like pretty much broken so that’s the Like my people like I originally one option like do a couple of things, go back and check if it’s working. So you don’t have to roll back the whole thing, you know where the problems happen because certain websites react certainly because for some websites, we’ve seen it in experiments as well. Most of our websites like in a stack, once the optimizing it, they go well, very smoothly. Because they’re not using a lot of plugins. They’re using, like well maintained plugins, well maintained teams, so we don’t have any problems. But occasionally, we do get a site that has been using a not very well maintained plugins, or well maintained themes. And that’s where things start getting getting a little kind of out of control where we everything that you’re trying to do is breaking something, it’s breaking some part of the functionality, and sometimes that WordPress, especially if you’re using ecommerce like WooCommerce or any other tools, a problem is that you just don’t have to do like a visual check of how the site is looking. You have to do a inflectional check as well to make sure that it’s functioning as well. All the WooCommerce all the pages, all the checkout pages got pages are working properly, because things start happening there as well, specially if you have server side caching as well, because that’s where I’ve seen, most of the plugins that you have for caching in WordPress are very well are very well optimized or into integrated, or supporting WooCommerce. And all that. So they make sure that they’re not optimizing, or they’re not cashing cart pages, checkout pages, but what in my experience in that certain kinds of, if you if you especially at a golf that is not like WordPress focused, if they’re like a standard host, like a shared hosting, especially like an environment where there are configured for WordPress, and they have server side caching. So that’s like a recipe for things going wrong, because then you will have you’ll have people you’ll have got pages cache, you have a lot of things happening with PHP because you don’t want to be cached because certain pages shouldn’t be dashed.
20:55
So your recommendation is to only have one of the two caching usually Just the site itself.
21:01
We do have server side caching software, but he only were because we were focused on WordPress. And we just worked with WordPress, and with other WordPress providers as well that kind of industry manage. What we do is what all of us do is that on server side, we have certain goals in place. Because we know what kind of format the websites will follow. But if you’re not on a host, that is WordPress focused, and they it’s a very good chance that they have just server side catching on, where it’s catching everything, it’s not catching selectively. So only if you have like, if you have if you’re working with any good provider, WordPress focus provider, like a managed WordPress provider, pretty much discovered they’ll have these things in place, but still a good idea to check it out to make sure it’s working. Now sometimes things go wrong. But we do also use server side caching which is kind of we use normally Redis for that because it is one of the most leading ones so use that as well. But I like it at first. It’s very much It’s not like a one size fits all right? Once we get a website, look at it, and we feel okay. Like, for example, on this one, I know that you’re not using Redis ago it was causing some, because it has a lot of videos, we know, okay, we don’t want to use that. So for us, it’s a lot of customization that have to go in for each website. And that’s how it has to be you can’t have for optimization, you can’t have one kind of thing that you fit on everyone.
22:23
Yeah. And I think that’s, that’s a great point. I think it’s, it’s, I mean, we could probably just talk a whole session just about the server side caching using Redis, and things like that, and maybe we will maybe that’ll be the next one. I think, you know, we’re at about 2020 minutes right now. Let’s talk life even fake it happen. It goes very fast on these videos. Are you having fun talking about things we’re very passionate about? Right. So we’ll talk you know about, but I think that’s what we should have a load time needs that much time of this meeting. I mean, this video because it’s that it’s that important. So you know, the last five or you know, Eight minutes, we’ll kind of talk about, you know, total page size and number of requests. Obviously, when you’re optimizing. The goal is to reduce the number of requests. Why don’t you explain why that is? I’ll just show again so that we can see that 290 requests before the average is 88. Based on what gt metrics shows, and now we have 13. Right? So talk a little bit about that.
23:21
In a, I think, with WordPress and number of requests, when we get a website, which is not optimized. They can they’re not optimized like no one is looking at the optimization. Normally, it is like 170 to 200 requests that I’ve seen like to 90 days, one of the like, it’s like kind of a not well optimized ones. But we normally see like 180 to 200 requests on average, because the thing is that you have a lot of we tend to because we have changed WordPress into a lot more like it used to be so WordPress has certain file certain CSS files that are mandatory, it will load then we added a team to it. Then we added like 10 plugins to it where we had to do in different functionalities. So all of these have different CSS files, different JavaScript files and their images there. Then we have YouTube videos embedded. So all these things, when we embedding them on the website, we add when we adding them on the website, they look very nice, right? We need them. But what we don’t know what’s happening in the backend is that it’s adding a lot of files that have to be brought in for the page to load. So it can be images, it can be j JavaScript files, it can be CSS files. So each plugin, each image that you embed, the things are happening with that. So when the page is low, wants to load, it has to call in all those files, all those static files as well, all those image files, all those JavaScript files to make sure the page works. So that’s why you see a huge number of requests, like in that example to 90. And that’s one of the biggest impacts that happened on load time as well. Because each request has to go, your browser has to send a request, bring and fan then send a request, bring in the fight and if certain fighters have from external sources, where you’re calling external, like you have live chat on your website, you have YouTube, or you have any other like plugins or any pixels on your website, they have to be called from external sources. And if you’re using an external source that is not very not like it’s not a big provider, then there’s a chance that it can be slow. See, it keeps people It keeps your browser waiting for that to load. So there are certain things that I then the requests, like it’s a whole topic in itself when it comes to request, like how they work. But the core idea that should be known as that we have to have minimum request for the page to be usable. Now, what happens when whites at 13 here is because there’s certain things that we do minification like, it’s another feature that almost all plugins have. So we minify all the static files that are possible, and then we aggregate them as well. So we have a lot of CSS files, say let’s say just 10 CSS files, we bring it into one has a lot of JavaScript files, we bring them into one. So this way, the insert sending out 22 3040 requests for CSS files, JavaScript files, just sending out to request. And then there are certain things and one more reason why it’s slow because you’re not loading non essential files at load. So if there are any JavaScript file that has a need for the need for non essential things, like for the footer or something like that, or any other embedded things, we’re not loading them at first, we will load them if you need them, if the page needs them.
26:24
So explain that a little bit. Like if the page needs them, if we scroll down,
26:28
right? If you scroll down if a person scores down and it kind of interacts with the page, because all websites there are a lot of ports as well, right? So that’s why a lot of times we won’t share hosting websites to fail with a loaded because these things are not happening. So their websites getting hundreds of bots report requests in a day or even thousands of servers dealing them all as a normal human being. They’re giving them everything. So we load for interaction, we wait for introduction. So once a user interacts, start working with the website, then then certain amount of files school, but the number is drastically reduced because of aggregating CSS files, JavaScript files, that is one of the biggest impact that happens and aggregate a lot of CSS files into one, the aggregate all main main JavaScript files into one. certain files have to be loaded without aggregation, because they needed, but most of the files are, can be aggregated. That’s where the concept of critical CSS came in as well. That’s being like, pushed by Google as well like the tools for that as well. That you don’t need the whole CSS at the start, right? You just need the critical CSS. So you know that first and then let the all the other CSS file in one file and let them load as the page gets loaded, right. Don’t worry at the start, don’t make it render blocking. css also becomes render blocking, it has to be loaded to make sure that the website gets loaded. So you start seeing the website. It’s not just JavaScript that can get later in the blocking.
27:57
Yeah, nothing all great points in between. Google’s pushing for the critical CSS early on. So anything you want to mention around, you know, obviously, when you’re doing optimization, you have less requests, the total page size decreases, right? Do
28:14
you want to talk a little bit about that be created, because you’re not loading non essential things, right. And also, you’re not sending in a lot of information at first because, like you said, For us, the priority is to make the website usable on the first goal. So that gives us and the server time to make sure that every other thing is ready. So it’s kind of like a you give the user what he needs at this time. And while you prepare for the all the other things, that fi Wi Fi, a paid site also going down because you’re not sending it a lot of information. And the pace is pace and also goes down. Because the optimized images for email. So that is also one one year, because I think we mentioned before as well, because you can have websites where you have a lot of images like this one also has where the images are huge. The likes 3000 by 3000 Because which is the end image when you actually need just 500 by 500. So what we do is we don’t load the full image we just we carried out, we load the image that we need. So that also reduces the page size drastically as well, especially where there are a lot of images. So like this one, I think was nine empty or something, I came down to this one. So one reason is we reduced the pace P and P a mid size, we optimize the images, we move them to a CDN. So the loading faster, then we also remove the non essential things that are not near the time. So things like videos that are down down in the base, things like that. So that’s one way to be safe schools down.
29:40
Cool.
29:40
Great. And so what’s a confession as well, because not many not many hosts have that also active, especially if you’re coming from a shared hosting they might not have compression. active on the host we use nginx we have compression already active on the server puts compressing the files on several levels, well each file that’s going out is compressed with that also helps Yeah,
30:00
no good points. Anything else that you want to mention as we wrap up episode five of the crazy optimizer?
30:12
I think, for me, like I said, the start load time has to be the key metric that a person has to make a an owner asked to be monitoring and have to keep as the North Star. You can have peace pitfalls, you can have ISO scores, you can have any insight anything but the low time should be the North Star, where you should be focusing on it having something under three seconds at Matt, low for your website, two seconds, under two seconds, it’s much better if you want to be more future proof, but under three seconds at any cost. So I think that should be not not for everything should follow for that. And it’s not just optimization. It’s it’s a certain mindset that a person has to follow. So that’s what we seen it with our clients as well when they come to us. And they have developed a certain mindset of being very performance focused right, but certain things they also like Make sure that they’re doing they’re loading good images. They’re building optimized images around a huge images. So I think certain things not it’s not just on the developers, you can’t just like put everything on the developer side that are the bad people here, you didn’t make a website fast. It’s certain things that we do as well as users of the website. So I think if the North Star is the note train, if you thinking about that on the website, and you’re measuring that very aggressively, so I think that’s where you focus should focus should be on
31:27
Yeah, exactly. I think that’s a great point. Because a lot of people just get enamored with the green color, right and making sure that that happens. But if you’re able to somehow get the you know, for a lot of time under a second, but you don’t have amazing scores. I think that’s more important just because of the load time and the user experience. So thanks again for tuning in for episode five of the crazy optimizer. He’s a dual. I’m Michael we’re here from the WP help giving websites hope Have a good day. Bye bye
Transcribed by https://otter.ai