The Timeline Panel

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