DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in

Discussion on: How would you debug CSS performance? ⏱

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 ( )

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!