Forem

Ryan Kahn (he/him)
Ryan Kahn (he/him)

Posted on

2 3

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (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 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!

Collapse
 
shiftyp profile image
Ryan Kahn (he/him)

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay