The Audits Panel

In the audits panel here, you'll see that you can select different audits to run. 0:00 I'm going to keep all the default selected 0:07 here, and I'm gonna go ahead and click Run. 0:09 And that's gonna bring up a few different optimizations, that I can make to my page. 0:14 Now first here, it says specify image 0:21 dimensions, there's seven instances of this occurring. 0:24 And it says a width and height should be specified for all images 0:28 in order to speed up page display. 0:32 The following images are missing a width and or height and then it 0:35 gives me each one of the images that are missing a width and height. 0:38 And I can click on those and it's gonna bring them up in the resources panel. 0:41 So I can go ahead and take a look at some additional information about them. 0:45 So that's a good tip. 0:51 Another tip here is that we have several unused CSS rules. 0:53 We have 45 of them. Which is really inefficient. 0:58 So it looks like in Grid and Normalize here, we have 1:01 quite a bit of CSS rules that are not being utilized. 1:07 And it will actually tell you what percentage of 1:10 that file is not being used by the current page. 1:13 Now, there could be a couple of reasons for this. 1:17 One, if your using you know, a robust framework 1:19 like bootstrap or you have normalize.css included which is 1:23 meant to reset some of the styles on the page. 1:27 Of course you're not gonna to be using all of that at 1:30 any given time, so you're not gonna be using 100% of this. 1:32 However, if you wrote some styles and you're 1:36 not actually using all of them on this 1:41 page and they are meant specifically for this 1:43 page, then that would be something to take 1:45 a look at. 1:48 Additionally, if you aren't really, really trying to optimize a page as 1:49 much as possible, and there are some things that maybe you can 1:52 go ahead and remove from a framework, say you wanna go ahead 1:56 and customize your installation of bootstrap you could go ahead and do that. 1:59 So that's pretty much the Audits panel. 2:04 It just gives you some handy tips for you can go 2:06 ahead and customize your page so it performs a little bit better. 2:10 That's about all for the Audits panel. 2:14 You may notice other errors in your web page 2:16 that didn't appear on ours that you might wanna fix. 2:19 Next up, we're gonna take a look at the Console panel. 2:22 Which allows us to interact with the JavaScript on our page. 2:25