Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Diagnose a Slow Page Using Developer Tools

    Dave CeddiaDave Ceddia
    chrome-devtoolsChrome DevTools
    eggheadegghead

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss