Post

This is awesome.

I don't think I'm a UI expert, but the browser gives us plenty of tools to look into the performance of the web. Profiling this page it looks to me like it's able to do a lot of the work on the GPU, which will be more efficient but it's still lots of work being done compared to your average page.

This profile was taken with me circling my mouse around the buttons. A bunch of GPU work being done, and then some animations being triggered any time I accidentally went _over_ a button. The red tags on some of them is attempts to animate box-shadow, which can't be composited (is more expensive).

Everything works smoothly at 20x CPU throttling but given a lot of work happens on the GPU that's not surprising. Frustrating we still can't throttle the GPU to properly emulate lower-end devices, but here we are. Given how cool this is, it doesn't look egregiously expensive to me.

For comparison, here's a profile of me scrolling around this Bluesky thread and hovering things. I've tried to select a roughly equal time range so it's a reasonable visual comparison. Sadly because Bluesky has deeper stacks you can't see the GPU line.

a lot of gpu lol

Generally speaking, it's good to pass off as much as you can to the GPU, because it means the browser has decided the GPU is the right tool for the job and it's usually right. The GPU will do the work faster and more efficiently than the CPU would.