Site speed audit with Google Lighthouse profiler

Lesson Details:

Video Transcription: I want to show you how to audit your website using the Google tool called lighthouse and again you go to the google chrome profiler this video is brought to you by Appy Pie’s Academy. in because I'm using Mac it's for me it's command option I and then this pops up and what you do is perform an audit because I already have this as a default if you don't have this as a default that's one of the tabs here you see as I am hovering over and if you don't see this as one of your options it's right here the double arrow will have this for you because I used it before this put it it automatically kind of dynamically changed my most commonly used items so you click on perform an audit and performing a lot it takes a little bit of time so I'm gonna skip right ahead and I'm going to show you results of the audit of my site now these are the results of the audit of this website remember keep in mind that you know I haven't really done a lot of optimization on the site so you see some of the performance issues aren't that good although thanks Google I appreciate that they appreciate my SEO 89 in any case what I wanted to show you here is something else is they literally show you how long it takes for your site to load and literally you see that 1.3 2.6 how many seconds it takes and so you see it takes about six point four seconds in my in this pages case for things to start really loading for people to be able to use it in my case I can tell all like the firt that the good dark background color is not loading fast enough and maybe there's something I can do with it I know I haven't checked yet but in my case maybe I should check is it the CSS why is it the CSS loading so slowly it shouldn't maybe there's something that CSS is waiting for and so it's it's a debugging opportunity and it's something that it seems like it's pretty simple to debug probably there are some CSS libraries or JavaScript libraries and maybe they're clashing and one is waiting for another who knows but it sound it seems like at least at first glance and it could be totally wrong because I haven't researched it deeply but at least you see how this can structure your thinking on what to debug because right now these pictures I see immediately that if they take you know the actual text takes about you know like you see right here three point nine to five point.

You know three point nine seconds it's it's loaded which is relatively acceptable amount of time but the CSS which is the black background color and the picture took six point four seconds which is less good and of course the better the picture here is not that relevant it can load later but for this particular sites readability the black background really you know it's only a styling element but but it prevents readability so it up it's problem here so and that's one issue that is really helpful and it can immediately show you what to start debugging now I want to walk you through a few other elements that are very interesting here and so that we can kind of tell hey let's explore what the issues are and you can focus on some you can see some things some things they're a little bit hard to understand what Google means by that okay but they do say first meaningful paint what's meaningful for them may be different but you see that they do show that here right it's this paint and it could be meaningful if the background loaded okay first interactive paint and you can see that if I scroll like it's here so that's when they say the page is totally loaded the user can start interacting with the page and that's unacceptable for Google right it's twelve seconds it's very bad now they show you consistently interactive and it's a little technical here perceptual speed index how quickly the contents are populated so that people actually can start reading as opposed to interacting that's the you know it's all impactful for the user and the user latency is how long it takes for the site to respond to user input in this case there's not a lot of user input here it's not too interactive it's mostly informational and link so it's not a big issue on my particular page then opportunities for improvement this is very interesting they talk about serving images differently you can save a lot of space and they show the problematic images and they're very easy to fix it literally tells you what the image is how much space it's taking and then you can immediately go and decrease the image size of all of these images and scroll down down down then you see other issues that are affecting you off-screen images and then they talk about text compression a lot of script issues these are all things we cover in other places of the course you know you can and they give you places to debug like I literally have unused CSS rules so that's great I can just get rid of that right away so there's a lot of very quick wins and who knows what you know maybe some part of CSS is holding up other parts of the rendering so this can really all help and then there's Diagnostics area about different parts of performance gets into some technical issues like JavaScript booting up and there's some invisible text issues that I have at least with my page talks about cashing commits complaining about enormous well that's weird that they use enormous networked payloads so generally they can they explain you know you can look into you know and again.

It's you see it's the image problem so in my case they literally tell me what the problems are then they talk about some other technical issues like HTTP asks you know secure HTTP and other things I can fix and other other other you know a lot of suggestions here I don't want to bore you to my to my too much but if you go one by one in your case in your site's case it will be different so to look at my to look at every detail of my sites problems it's not it's not going to help you necessarily for you what's going to happen is if your technical you just go through one by one and see what the problems are on your site and if you're not very technical which most people generally aren't like most people who aren't technical you would start to work through with your developer and focus and when you are working with your developer you or actually when you are doing it on your own so even fixing all of these issues one by one some of them are quick there's a lot I can do in one day but some I have to spend time researching and figuring out how to fix and whether you're doing it on your own or whether you're hiring a freelancer or developer who is helping you with this it takes time and that means money okay even if you do it on your own there's something you can admit you could have been doing on your own you know you know for the day or two that it will take you to fix all these issues you could have been promoting your site you could have been doing other things so it's really a decision for you whether you need to fix all these issues or whether you will fix like almost the 80/20 rule comes into play where if you fix the 20 of the worst offending issues you will be able to increase your page speed dramatically and that will probably be enough and the other fixes will become lower priority you should get to them later but you probably have other higher priority things you'll need to do so I'd recommend spending a day on this maybe half a day just just improving the image size is the very basic things that you personally can do that are low-hanging fruit for you and then seeing you know consulting a developer for more complicated things and getting their quote on how much it will cost to fix these things for you and that way you'll be able to reasonably fix a lot of things on your own and cheaply with the developer and most likely the things that will left me leftover are not going to be they're gonna be so few things left over that it's generally gonna be most in most cases it's gonna be okay to leave them as they are so that's the strategy for fixing these in and not wasting too much time and money doing so.