Hello, my name is Christy Rae, and in these lessons, I will show you how to improve the speed of your website. Page speed is really important. It's especially important for your users that are on slow or on mobile networks, because the longer that it takes to download your website, the longer that they're using that internet. So especially if they're paying per minute or per megabyte or gigabyte for the downloads, then the larger your website is, the more that they have to pay. So it's really important to get the speed of your website as quick as possible. And there are a few things that you can use to check the speed of your website. I mean, number one is to open up the website on a mobile device, see how long it takes for you to download it. But another way that you can do it is using some tools online. These are some free tools that I'm going to show you. So I've got my Chocolate World website up right now. I've got it on a temporary domain, but we're going to take a look at how fast the site loads using two free tools. One of them is called PageSpeed Insights, and it is a tool from Google. The URL is pagespeed .web .dev, and you can go there and you can check any page on the internet as long as there's no password on it. And you can see the performance for both mobile and for desktop. So the really nice thing about this report, it comes straight from Google. This is a Google service. You can see they're going to give you a PageSpeed score, a performance score. And you can see right now for this page, mine is 72. And this score is for the specific page that we're looking at. So it's just for, in this case, my homepage. You can also check the performance of other pages in your website. And I do recommend doing that to sort of spot check after you've made some improvements to make sure that the entire site is moving quickly. We can see on this PageSpeed Insights report that my first contentful paint is 3 .1 seconds. So that's basically how long does it take for the page to appear in the browser. And it's doing this on slow 4G, is the test method that they're using on Moto G Power with Lighthouse 10 .0 .2. So those are basically the specs that it's testing for. Now it does give me a report on things that I could do to improve the speed of my page or the speed of this particular page. And you can see one of the things is to serve images in next -gen formats. So if you expand each of these opportunities, it's going to give you some potential savings that you might be able to make. So for example, if I used for this particular image, the image that's at the top up here, if I used a WebP image instead of a JPEG, that I could potentially get about half of the file size. And it shows me similar settings or similar reports for other images on this page. So that's one of the things that I can do is improve the format that I'm using for my website. Another thing is to eliminate render -blocking resources. So these are usually going to be things like CSS files, JavaScript files. And so one of the things I can do is defer those so that they don't need to be loaded in order for the page to render. And so those are some things that I can do with some plugins using WordPress. And then another thing that we've got here is reducing unused CSS. So these are some CSS styles that are loaded that aren't necessarily being used within the website. So I could potentially save some transfer size, some file size of my webpage if I was to reduce or remove those. So those are a few things that I could use to improve my performance. Now 72 is not horrible. It's not the best. I mean, your goal would be to get, I would say, in the 80s or the 90s. If you can get 100, even better. But if we look at the desktop, usually the desktop performance is better because the assumption on desktop is that it's going to be a faster network. So instead of the 4G throttling, we've got custom throttling. And you can see it's 10 ,240 kilobits per second simulated. So it's going to be much faster of a network. So it should download faster. But it's still going to give me some opportunities for improvement, including some of the ones that we saw on the previous screen. Now another tool that you can use to check the performance of a page is GTmetrix. The URL is gtmetrix .com. And you can see for this one that I got a score of 100%. It's pretty good. Got a GTmetrix grade. They give you a grade. It's an A, and my structure is 98%. So this is pretty good. If I was to just look at this one, I would say I probably don't need to do anything. It's probably fine. I don't need to make any changes. But you want to take into account what you also saw on the PageSpeed Insights because that mobile score, as you can see, is much lower. And some of the reasons, besides the fact that you don't want users to have to wait for the downloads, another reason that you might want to increase this score is because it could potentially be used for search engine optimization. So if two websites are exactly the same and one of them performs better, one of them loads faster and the other one loads slower, then the one that loads faster could be ranked higher in the search engine. So just something to keep in mind for that. Now in addition to PageSpeed Insights and GTmetrix, another tool you can use if you are on the Chrome browser is something called Lighthouse. And you can get to that if you go into the Developer menu under View and then Developer Tools. And you'll see under the tools here, this little arrow here, you can choose Lighthouse. And Lighthouse, it's a built -in tool built into Chrome. And you can analyze the page load. And this is the information that... It's a lot of the information that you're going to get in the PageSpeed Insights. It's just that it's built into your browser. So you can check for mobile or desktop. And so I'm just going to click on Analyze Page Load here. And this can take a few minutes for it to load everything. But again, you can see it does these dimensions and you can see right now it's got no throttling. It's kind of hard to see because it's grayed out, but it's going to show me some statistics based on those criteria. And you can change that. But you can see here that I got a 93. So that's pretty good. This is a pretty highly performing website. It's pretty optimized. I don't need to do too much. But again, if I scroll down, it gives me these opportunities and it shows me some things that I can do to improve the speed of my website. One of the other nice things that we get here in Lighthouse is in addition to the performance, it also gives me some scores for accessibility, best practices, and search engine optimization. So it's good to have that information. And whenever I do a website audit for a client, I usually include this information so they can see sort of from an automated testing perspective, what kind of things they can improve for their website. So once you get this information, then you do need to, in many cases, take the suggestions to make improvements for your website. And there are some other things that you might see in the performance report. And I forgot to show you in ETmetrics, they do give you issues that you can fix. So there are some things that you can fix there. But some of the things that you need to fix, it's better to start off with an optimized website from the beginning than it is to go back and fix something after the fact. So when you're building your website, I want you to think about those things. What can you do to optimize your website as you're building your website out? So for example, start off with a very optimized theme. And you can check to see how optimized the theme is by just installing it from scratch. I call it out of the box, but just do a fresh installation of it. And as soon as you've installed it, don't make any changes, don't upload any images, don't do anything to it. Test it using the PageSpeed Insights and or GTmetrics to see how fast it is. And this is how I usually figure out if I want to use a theme or not. I'll install it, make sure that it's very quick, very fast performing, and then I'll build the website on top of that. So if you're starting off with a very highly optimized theme from the beginning, then you're probably going to be more likely to end up with an optimized website. There are several other things that you need to consider like file size, image size, and the server that you're on and other things like that. So stay tuned.
