Here on the timeline, you'll see I have what looks like a timeline.

But right now it's completely empty.

I have a couple of checkboxes down here.

One that says Loading, Scripting, Rendering, and Painting.

And those represent different events that can occur while my page is loading.

Now I'm gonna go ahead and refresh my page here so that I can get back my original

styles, and I'm gonna click on Frames.

Here you'll see a timeline with 30 FPS and 60 FPS.

[BLANK_AUDIO]

Down on the bottom, you'll see this little Record button.

If I click the Record button, and I start scrolling

around my web page, and maybe hovering over different elements.

And then I stop the recording.

We'll actually get a graph of the frame rate that our page was getting.

And I'm gonna go ahead and clear this out, and actually do that one

more time just quickly here. And then stop it.

And here, you'll see this little green bar here,

and that's time that the browser spent painting our page.

And in the timeline view, that's really, for the most part, what

you wanna pay attention to, in addition to rendering which is recalculating styles.

Now, any time

that these bars go over 60 frames per second is when we

have an issue. So your screen basically has a refresh

rate of about 60 hertz, or actually, it's exactly 60 hertz in most cases.

That means that you'll want to have a frame

rate of about 60 frames per second, or 60 FPS.

So, any time that we go below 60 FPS, it's

not gonna be good. You're definately gonna notice when the

frames drop out. Now, this page is actually already

pretty optimized, but let's say that our designer came in.

And they said, you know what, I think this button would be so much better if we

had this really cool transition on it. I'm gonna show you,

using the elements panel here, how we can go ahead and add styles.

On the button class, I'm gonna add a transition.

And you'll see it autocompletes here.

I can just hit tab to go ahead and complete that.

And I'm gonna add a transition of one second.

Now on

my button hover class, I'm going to add this really

ridiculous box shadow. So the x and y offset will be 0, and the

blur radius will be 300 pixels, and we'll set the shadow color to white.

And then I'm gonna add a text shadow, as if the box shadow weren't enough.

And I'm gonna set that to 100 pixels.

And I'm also gonna set that to white.

So now, when we hover over our button, you'll see that it has

this really nifty looking transition, or really

terrible looking, depending on your aesthetic tastes.

So, if we go ahead and click on

timeline again, we'll clear out everything we have here.

And we'll hit record again. And I'll go ahead and hover

over this button a couple times, maybe scroll up and down.

And then I'll hit stop.

You'll notice that these green bars are a lot more noticeable now.

And that's because the browser is doing a lot more painting than it was previously.

Because it actually has to paint that animation, and

it has to render every single frame that you're seeing.

Just like in a movie.

So,

we're in the clear right now because we're below 60 frames per second.

But I'm going to turn on a setting here, and you can access

these settings for the Chrome DevTools by clicking in the bottom right here.

And under General, I'm going to click on Force

accelerated compositing, and then I'm going to click on Enable continuous

page repainting.

Now, the page will constantly be repainting.

It won't ever stop.

So, if I clear this out, hit record again and scroll around a little bit.

You'll see that we actually have some higher spikes in our rendering here.

So, anytime that you see the timeline going over 60

frames per second, it really means that you're dropping frames, and

you're going less than 60 frames per second.

You wanna try to reduce any time that actually happens.

And the way you can do that is by removing gradients, removing shadows,

and other complex effects that might make the browser stutter in its rendering.

In the Timeline panel, we learned how

to profile the rendering performance of our page.

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

where we can take a look at performance for the CPU and memory.