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 Timeline panel allows you to see how pages behave over time. You can profile memory usage, JavaScript events, and rendering performance. For example, if complex effects are impacting the framerate of a page, the Timeline panel can help reveal where and when those issues exist.
Here on the timeline, you'll see I have
what looks like a timeline.
0:00
But right now it's completely empty.
0:05
I have a couple of checkboxes down here.
0:07
One that says Loading, Scripting,
Rendering, and Painting.
0:10
And those represent different events that
can occur while my page is loading.
0:15
Now I'm gonna go ahead and refresh my page
here so that I can get back my original
0:22
styles, and I'm gonna click on Frames.
0:26
Here you'll see a timeline with 30 FPS and
60 FPS.
0:32
[BLANK_AUDIO]
0:37
Down on the bottom, you'll see this little
Record button.
0:39
If I click the Record button, and I start
scrolling
0:43
around my web page, and maybe hovering
over different elements.
0:47
And then I stop the recording.
0:52
We'll actually get a graph of the frame
rate that our page was getting.
0:55
And I'm gonna go ahead and clear this out,
and actually do that one
1:02
more time just quickly here.
And then stop it.
1:04
And here, you'll see this little green bar
here,
1:09
and that's time that the browser spent
painting our page.
1:13
And in the timeline view, that's really,
for the most part, what
1:18
you wanna pay attention to, in addition to
rendering which is recalculating styles.
1:22
Now, any time
1:28
that these bars go over 60 frames per
second is when we
1:30
have an issue.
So your screen basically has a refresh
1:35
rate of about 60 hertz, or actually, it's
exactly 60 hertz in most cases.
1:40
That means that you'll want to have a
frame
1:46
rate of about 60 frames per second, or 60
FPS.
1:48
So, any time that we go below 60 FPS, it's
1:55
not gonna be good.
You're definately gonna notice when the
2:00
frames drop out.
Now, this page is actually already
2:03
pretty optimized, but let's say that our
designer came in.
2:08
And they said, you know what, I think this
button would be so much better if we
2:14
had this really cool transition on it.
I'm gonna show you,
2:20
using the elements panel here, how we can
go ahead and add styles.
2:26
On the button class, I'm gonna add a
transition.
2:32
And you'll see it autocompletes here.
2:35
I can just hit tab to go ahead and
complete that.
2:37
And I'm gonna add a transition of one
second.
2:39
Now on
2:44
my button hover class, I'm going to add
this really
2:46
ridiculous box shadow.
So the x and y offset will be 0, and the
2:51
blur radius will be 300 pixels, and we'll
set the shadow color to white.
2:57
And then I'm gonna add a text shadow, as
if the box shadow weren't enough.
3:04
And I'm gonna set that to 100 pixels.
3:09
And I'm also gonna set that to white.
3:11
So now, when we hover over our button,
you'll see that it has
3:15
this really nifty looking transition, or
really
3:19
terrible looking, depending on your
aesthetic tastes.
3:24
So, if we go ahead and click on
3:27
timeline again, we'll clear out everything
we have here.
3:29
And we'll hit record again.
And I'll go ahead and hover
3:33
over this button a couple times, maybe
scroll up and down.
3:36
And then I'll hit stop.
3:39
You'll notice that these green bars are a
lot more noticeable now.
3:42
And that's because the browser is doing a
lot more painting than it was previously.
3:46
Because it actually has to paint that
animation, and
3:52
it has to render every single frame that
you're seeing.
3:54
Just like in a movie.
3:58
So,
4:00
we're in the clear right now because we're
below 60 frames per second.
4:02
But I'm going to turn on a setting here,
and you can access
4:07
these settings for the Chrome DevTools by
clicking in the bottom right here.
4:12
And under General, I'm going to click on
Force
4:17
accelerated compositing, and then I'm
going to click on Enable continuous
4:22
page repainting.
4:27
Now, the page will constantly be
repainting.
4:31
It won't ever stop.
4:35
So, if I clear this out, hit record again
and scroll around a little bit.
4:36
You'll see that we actually have some
higher spikes in our rendering here.
4:43
So, anytime that you see the timeline
going over 60
4:49
frames per second, it really means that
you're dropping frames, and
4:53
you're going less than 60 frames per
second.
4:57
You wanna try to reduce any time that
actually happens.
5:00
And the way you can do that is by removing
gradients, removing shadows,
5:04
and other complex effects that might make
the browser stutter in its rendering.
5:09
In the Timeline panel, we learned how
5:14
to profile the rendering performance of
our page.
5:16
Next up, we're gonna take a look at the
Profiles panel
5:19
where we can take a look at performance
for the CPU and memory.
5:22
You need to sign up for Treehouse in order to download course files.
Sign up