How would you debug CSS performance? ⏱

Ryan Kahn (he/him) - Dec 21 '19 - - Dev Community

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

. . . . . . . . . . . . . . . . . . . .
Terabox Video Player