DEV Community

loading...

How would you debug CSS performance? ⏱

Ryan Lynch (he/him)
I solve computer problems as a dev, human problems as a teacher
・1 min read

Hello all!

I'm having some performance issues with Emoji Island, and I could use some help debugging! How do you debug CSS animation performance? Here's what emoji island looks like on my machine. You can really notice the low frame rate in the new ocean wave animation! 🌊

And here's what it looks like on your machine (this is a current version always, so it may not look the same at the time you're reading this):

I'd love some debugging advice, or a pointer to a good resource! How do you tell if its the animations causing the slow performance? How do you debug which animation is slowing things down? How do you tell if the real culprit is JS blocking rendering? All advice appreciated!

-- Ryan

Discussion (3)

Collapse
pavelloz profile image
Paweł Kowalski

Are you sure you are doing CSS animations? Ive recorded a little bit of perf. in Firefox and first thing that greeted me was a lot of setTimeouts and dom events.
I think CSS animations dont leave that kind of traces.

Also, this page is consuming A LOT of CPU, so i assume there is something fundamentally wrong with JS, something is running constantly in the background and is not throttled/debounced/operation is too heavy, or all of the above.

Anyway, performance tab in the browser dev tools is always good first step.
Second step would be to remove animations and see the resource usage - if its animations problem, then resource heavy usage should go away. Then you can add animations one by one and see which one is problematic - standard bisect stuff :)
At the end i would most definietly look if there is something im transitioning thats "heavy" but not elevated to its own layer (GPU accelerated) - this trick is old as hell, so i have no idea if its true nowadays ( blog.teamtreehouse.com/increase-yo... )

Collapse
shiftyp profile image
Ryan Lynch (he/him) Author

Great advice! Here's where it took me!

  1. There were some JS issues, and fixing them sped things up! The timeouts you pointed out are however internal to react or react-transition-group, as I only set a single interval for the game loop.
  2. The trick for GPU acceleration didn't work as expected, so I think that is no longer an issue
  3. I ended up solving my issues by using SVG animations, which are much faster for what I need.

Thanks again for your help!

Collapse
shiftyp profile image
Ryan Lynch (he/him) Author

Just found this excellent post on from @jhy3 on CSS Animations from literally today covering performance! Super! Thanks Jhey!