Share This Post
0:23
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 going to 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, 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 of more of the details of the seconds. And what we went down the page scores preparing the old and the new the number of requests the time to first byte we talked about that is that’s a will learn today is a site speed it issue that we definitely want to address. And it’s usually addressed at the server level, page, page speed or a page size. So you can see the difference. There’s 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 measured differently, based on what we’ve seen, even with tools that we’ve used, and even tools we’re currently using right now. Or 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:34
Okay, I think in the last video, we touched upon the Page Speed score, and we wanted to do the page load time and site 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 Because a website, do it’s not generally possible, but I have seen it, sometimes I can have very good PageSpeed scores, but not a good low time. But if you normally it’s not possible if you have a good pitch good 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 school rate 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 learning 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 anytime this year, we I expected to see chrome in Chrome the daily flagging websites that are And it still affects your rankings. But now it’ll start affecting it more. So I think the people like because most of the people these days, code studies have four seconds, or you have to be under four seconds. But I think we mentioned in the previous video somewhere, because that studies also from below 15. So I think like, it’s even gotten worse now. Like people expect websites go even faster than four seconds after like for us. Four seconds is not good enough, we always make sure that we like we have somewhere around two under two seconds, some of our websites even go under one thing. But to second is a good sweet spot with you anywhere from like 1.5 to 2.5 seconds, you end this in the safe zone, where you can say like, even with this updates that are coming up with people getting more demanding on speed, you end the safe zone.
4:48
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 There 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 the 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 loading the 37 seconds previously, probably not having a lot of fun bouncing around their 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 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 site that just shows how poor the web is performing right now, in regards to sites overall, in general, as gt metric is measured.
6:25
And I think one point that you also mentioned is how different tools track it 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 we’re actually using, 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 php page size. Good schools because we prioritize the pH level, you 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. So the Tula program to wait for the whole thing to load. So when a system is not even ready to give them the information, because they’ve 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 gt metrics sense. But we do use digital metrics because they accepted because we we do get our own tools as well, very measured, but gt metrics being one of the widely recognized ones. So that’s where we form a baseline on
7:47
that. I think that and we use Google page insights, because those are the two biggest ones that people use. We talk a little bit about, like fully loaded versus page loaded and what’s that actually called and how people recognize that differently. Can you go to the timings?
8:03
Okay, so the free time basically what happens is that you when a user hits enter once you use Alexis Valley plumbing.com, they send the request. The first thing, which is there’s tttt fp, 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 backend, 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 this whole thing 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 this number to make sure that your websites are loading, like the first bite is as soon as possible. And anything like that 200 milliseconds is good.
9:21
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 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 tonight. So that’s something you definitely need to look at and your hosting provider. And if you want quick load times, obviously, if somebody’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:29
scan again, just to compare. Can you open the previous one? Yeah, yeah.
10:35
So this is a perfect example, like you mentioned, right? So here’s the 1.2 seconds of first time to bite.
10:40
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,
11:03
the new one? Yeah, 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 seeing stuff, load. But if I go here, we’ll see it’s zero 51 milliseconds and 24 milliseconds.
11:23
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 already like you’re like, with us the time was two seconds after the optimization, but previously, it’s 1.2 seconds after 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:49
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, dashians at the Olympics, you want to start off fast when the gun goes, right. So if you want to be quick in this in the, in the first 10 meters of the hundred meters.
12:08
So that’s that’s how users bought it, right? Because nowadays with one, especially like if you don’t even have to look at studies that you can look at your own usage, like he’d be all use websites every day and like, it’s every day, like if a 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 are the 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 How long did it take for the first piece of you can fake relevant information to get to the browser for the DOM Normally, I’ve seen first painted content to be an anomaly the same. And because actually you can see it, point 6.6, because normally happens at the same time, if it’s optimized, if the website is not optimized, then it might, there might be a delay in this. But if it’s optimized, so you get both of the things in the same time. So basically when because you have to dominate and document 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 paint 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 peak 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 does not end up blocking these things, what happened this past they’ll happen slowly, and they’ll like overlap with either each other and you have these big differences, or Big Time, 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 battle 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:36
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:46
right? Yes. So for gt metrics, it measures all these things, where you have the contentful paint, then you have dominant life on the lake police website, we can see it’s 1.6 seconds on 600 milliseconds, the first contentful paint is In, in on 702nd. So after 108 seconds, the dumpster 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 on the browser. So then we have the downloaded where majority of the things of the DOM have been loaded. And normally and onload means when the website is ready to use so that this all if you count all this, this will come to two seconds. So approximately, if they’re not plus, like they not not normally, it looks like as they get 75 million seconds, plus 6.6 seconds plus point six seconds. It’s not like that. It’s it’s like a these things. All load is a plus. 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 BBs one, they at the same time so
15:56
they can run in parallel is what you’re saying. Yes.
16:00
When you add all these, they come to comparable two seconds of the load time. So that’s where the different starts coming in between tools, right? Because now, what gt metrics considered the onload is when the first folder you’re looking at is ready to use, the JavaScript has loaded, 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 play 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 the 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 well optimized, and to make the websites like load fast and also give a better experience instead, okay, and also for our servers as well, we want to make sure that our servers are not 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 it like I said, gt metrics, being one of the ones that have wet move at growth to our real user will use it. Yeah,
17:43
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, there’s 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:55
Because I think that’s a it’s a lesson every kind of person who works with WordPress learns the hard way. Download a plugin, a very good plugin. And this day SEO, there’s so many nice things and we activated already want a website to get the best. So we activated all and then we go into pages like pretty much broken. So that’s like my people like Irish mentally it’s 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 themes so we don’t have any problems. But occasionally we do get a site that has been using a not very well maintained plugins, a well maintained themes, and that’s where things start getting a little kind of out of control where we everything that you’re trying to do is breaking something is breaking some part of the funnel analogy. And something that WordPress, especially if you’re using e commerce 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 functional 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, especially if you have server side caching as well, because that’s where I see most of the plugins that you have for caching in WordPress are very well a very well optimized or 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 shirt often, especially like an environment with are configured for WordPress and they have server side caching. That’s a good recipe for things going wrong because then you will have you’ll have people, you’ll have got pages cash, you have a lot of things happening by pages because you don’t want to be cash because certain pages shouldn’t be touched.
21:12
So your recommendation is to only have one of the two caching usually just the site itself.
21:17
We do have server side caching since well, but he only were because we were focused on WordPress and we just worked with WordPress, and with other WordPress providers as well that I the industry manage. What we do is for all of us to is there on server side, we have certain rules 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, then 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 focused provider like a managed WordPress provided pretty much discovered they’ll have these things in place. A good idea to check it out to make sure it’s working out, sometimes things go wrong. But we do also use server side caching, which is kind of we use normally Redis for that. Because which is one of the most leading ones. So use that as well. But like, for us, it’s very much like it’s not like a one size fits. All right? Once we get a website, look at it, and Wi Fi, 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:39
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 cash and 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. It flies we fake it happened. 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. Low 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 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 metric shows, and now we have 13. Right. So talk a little bit about that.
23:38
In a I think with WordPress, the 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. And I see like to 90 days one of the makeups like kind of a not well optimized once, but we normally see like 180 to 200 requests on average because The thing is that you have a lot of V 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 1020 plugins to add 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 of admin, 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 there, 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 way You’ll see a huge number of requests, like in that example to 90. And that’s one of the biggest impacts that happened last time as well, because each request has to go, your browser has to send a request thing and then send a request, bring in that file. And if certain files are from external sources, where you’re calling external light, 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 always plugins have slowly minify all the static files that are possible. And then we aggregate them as well. So we have a lot of CSS file, select pages 10 CSS files, we bring it into one has a lot of JavaScript files, we bring them into one. So this way, the inserts sending out 20 3040 requests for CSS files, JavaScript files, you’re 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 files that have need for the need for non essential things, they for the footer or something like that, or any other embedded things, you’re not loading them at first, we will load them if you need them if the page needs them.
26:40
So explain that a little bit. Like if the page needs them, if we scroll down,
26:44
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 time very 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 look for interaction, we wait for introduction. So once a user interacts, start working with the website, then then a certain amount of files, cool. But the number is drastically reduced because of aggregating CSS files, JavaScript files, that is one of the biggest impact that happens, an aggregate a lot of CSS files into one, we aggregate all main main JavaScript files to 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 pff five in one file and let them load as the page gets loaded, right. Don’t worry Start don’t make it render blocking, because CFL also becomes enter blocking, it has to be loaded to make sure that the website gets loaded. So you start seeing the website. Yeah, it’s not just JavaScript that can can get later in the blocking.
28:13
Yeah. Now, all great points, and especially 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:30
you want to talk a little bit about that? Because you’re not loading non essential things right. And also you’re not sending in a lot of information at first because magazines for us a 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 we see a paid site also going down because you’re not sending it a lot of information. And the pace is pacing also goes down Because he optimize the 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. They’re like 3000 by 3000 pixels, 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, we cut it 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 MB or something, it came down to this one. So one reason is be reduced to pace speed and be a mid size. we optimize images, we move them to a CDN. So they’re 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 don’t. Cool. Great. And so what’s a confession as well? Because no Many not many hosts have that also active, especially if you’re coming from a shared offering, 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 server level as well. So each file that’s going out is compressed. So that also helps. Yeah,
30:17
no good points. Anything else that you want to mention as we wrap up, Episode Five of the crazy optimizer?
30:28
I think, for me, like I said, the start load time has to be the key metric that a person has to like a, an owner has to be monitoring and has to keep as the non stop. You can have pace 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 max 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 an 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 with our clients as well when they come to us. And they have developed a certain mindset of being very performance focused, right? For certain things. They also like make sure that they’re doing they’re loading good images. They’re loading 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 you are the bad people here, you didn’t make a website faster, certain things that we do as well as users of the website. So I think if the North Star is the load time, if you thinking about that on the website, and you’re measuring that very aggressively. So I think that’s where your focus should focus should be on
31:43
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, fully loaded time under a second, but you don’t have amazing scores. I think that’s more important just because of the load time. 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
32:13
bye