CODEWITHSUNDEEP
google-chrometimeline
Ray
Ray

Reputation: 637

Google Chrome Timeline

I am recording the performance of the website I am currently working. When I checked the Timeline. There are these different colors that shows (my guess) fps, CPU, memory. But I have no idea which is which.

Can anyone explain what these different colors mean? I have searched but I couldn't see any Timeline explanation that has this layout.

Sample Timeline

Upvotes: 2

Views: 200

Answers (1)

alph
alph

Reputation: 676

The topmost strip (the red one) is responsiveness. If it's red you have a problem in that place, e.g. very long frame causing jank, excessive style recalculation etc. Zoom into this region with flame chart to find details.

Next one (green) is frame rate. The higher the better. Max is 60fps.

Next one is CPU utilization, Its color depends on the type of activity CPU is currently busy working on. E.g. lots of yellow means it runs JS code, purple is for CSS style recalc or layout, etc.

The last strip with small bars is network activity. It shows if there're network requests currently in flight.

Upvotes: 1

Related Questions