Your page is showing high CPU usage and spinning up your laptop fan, but nothing is visibly happening. What is it doing, and why is it so slow?

This lesson is a real-world performance diagnosis of this very page, right here on egghead. Two infinite (but hidden) animations were causing CPU usage to spike, and Chrome's Task Manager and Performance tools helped uncover the elements causing the problem. You'll see how to use the profiler to record a snapshot, and learn a trick for discovering animations running in the background.

https://app.egghead.io/api/v1/lessons/chrome-devtools-diagnose-a-slow-page-using-developer-tools/subtitles

Diagnose a Slow Page Using Developer Tools

Instructor: [00:00] I noticed my CPU usage was really high sitting on this page doing nothing. I thought I'd look into it. Here's what I did to debug it. If I open up the task manager, I can see that GPU's pretty high and this tab is high for some reason.

[00:17] If I open up the developer tools and hit Escape, this performance monitor thing shows that the tab is like 15 percent. If you don't have the performance monitor tab, you can click these little dots here and then click on performance monitor.

[00:32] Then, where I looked at was the performance tab and recording a quick snapshot shows that there's a lot going on. If I zoom into one of these and then zoom in on the events, there's this layout happening because of this SVG LDS ellipsis thing.

[00:52] If I go and find that element with document.query selector and remove it, then bring back up that performance thing, CPU usage has dropped a lot. It's still a little bit, but it's a lot better. That LDS ellipsis thing is the little loading spinner that shows up at the bottom before it loads the featured stuff, the yellow green blue thing.

[01:20] It's interesting that SVG will cause layouts even when it's not visible. The other thing is I learned this cool trick where you can set window.onanimationiteration to console.log. Then, it'll print out every time there's an animation.

[01:38] It seems like there's like maybe three every second here. If I set that back to null, expand these things, looks like all of them have to do with this little video player. There's a buffering indicator in the middle. Then, there's another one on the right of that.

[02:01] Then, there's another one on the left. I think the problem is that if I go into this BMPUI hidden class, doesn't set them display none. I think they're still animating in the background. If I set display none, then CPU usage drops down to below one percent. Now if we go back over to console, there's no more animations going on. Now, we can take our findings back to the code and fix the performance for good.

Diagnose a Slow Page Using Developer Tools

Share this video with your friends