Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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 you're 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 are 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
You need to sign up for Treehouse in order to download course files.
Sign up