How would you debug CSS performance? ⏱

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

Comments

[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... )

[Ryan Kahn (he/him)]

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!

[Ryan Kahn (he/him)]

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