Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Website Optimization

Well done!

You have completed Website Optimization!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

The Timeline Panel

5:26 with Nick Pettit

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 definitely 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