Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

The Audits Panel

2:29 with Nick Pettit

The Audits panel provides automated suggestions for improving front-end performance. For example, the audits panel might suggest specifying explicit dimensions for images to improve rendering performance. It can also help identify CSS rules that aren’t being utilized.

  • 0:00

    In the audits panel here, you'll see that you can select different audits to run.

  • 0:07

    I'm going to keep all the default selected

  • 0:09

    here, and I'm gonna go ahead and click Run.

  • 0:14

    And that's gonna bring up a few different optimizations, that I can make to my page.

  • 0:21

    Now first here, it says specify image

  • 0:24

    dimensions, there's seven instances of this occurring.

  • 0:28

    And it says a width and height should be specified for all images

  • 0:32

    in order to speed up page display.

  • 0:35

    The following images are missing a width and or height and then it

  • 0:38

    gives me each one of the images that are missing a width and height.

  • 0:41

    And I can click on those and it's gonna bring them up in the resources panel.

  • 0:45

    So I can go ahead and take a look at some additional information about them.

  • 0:51

    So that's a good tip.

  • 0:53

    Another tip here is that we have several unused CSS rules.

  • 0:58

    We have 45 of them. Which is really inefficient.

  • 1:01

    So it looks like in Grid and Normalize here, we have

  • 1:07

    quite a bit of CSS rules that are not being utilized.

  • 1:10

    And it will actually tell you what percentage of

  • 1:13

    that file is not being used by the current page.

  • 1:17

    Now, there could be a couple of reasons for this.

  • 1:19

    One, if your using you know, a robust framework

  • 1:23

    like bootstrap or you have normalize.css included which is

  • 1:27

    meant to reset some of the styles on the page.

  • 1:30

    Of course you're not gonna to be using all of that at

  • 1:32

    any given time, so you're not gonna be using 100% of this.

  • 1:36

    However, if you wrote some styles and you're

  • 1:41

    not actually using all of them on this

  • 1:43

    page and they are meant specifically for this

  • 1:45

    page, then that would be something to take

  • 1:48

    a look at.

  • 1:49

    Additionally, if you aren't really, really trying to optimize a page as

  • 1:52

    much as possible, and there are some things that maybe you can

  • 1:56

    go ahead and remove from a framework, say you wanna go ahead

  • 1:59

    and customize your installation of bootstrap you could go ahead and do that.

  • 2:04

    So that's pretty much the Audits panel.

  • 2:06

    It just gives you some handy tips for you can go

  • 2:10

    ahead and customize your page so it performs a little bit better.

  • 2:14

    That's about all for the Audits panel.

  • 2:16

    You may notice other errors in your web page

  • 2:19

    that didn't appear on ours that you might wanna fix.

  • 2:22

    Next up, we're gonna take a look at the Console panel.

  • 2:25

    Which allows us to interact with the JavaScript on our page.

You need to sign up for Treehouse in order to download course files.

Sign up