API to detect bad performance/dropped frames/jank

[emattias]

It's hard to test how transitions and animations perform on different hardware (and hardware/browser combinations). It would be useful if there was a way to detect when a lot of frames are dropped and there's a lot of jank.

This API could be used to log these problems to know what to fix and also ask the user if they would like to disable animations.

[nhelfman]

I believe @mmocny can provide more information on this non-trivial topic.

See recent post: https://web.dev/smoothness/

[mmocny]

Thanks for expressing interest here! Indeed, it would be a good idea to have something here, and thanks for linking to that recent blogpost. Here is also a recording of a recent Web Perf WG session on the topic.

We did explore some potential API surfaces a year ago at TPAC, but I think we've learned a lot since then and we should re-visit and rethink the options.

I think there is a combination of requirements here:

• Detecting Animations (etc). Not all time durations on the timeline are equally visually important for the user.
• Measuring frame content delivery. As mentioned in the links above, it's not as simple as "did we have a frame?".
• Summarizing the timeline frame-level data into an overall metric. It's not individual dropped frames that are a problem, per-se, its patterns of repeated issues during important intervals.
• Attribution: detection is half the battle-- how can developers address the issues found?

Regarding your suggestion of asking users to disable animations: Perhaps the developer could just do that automatically? If the site is too rich for the majority of users, then perhaps design compromises need to be made. Or, if the site is too janky for a specific long tail of users, perhaps responsively switch to a lite-er, or reduced motion, version of the site?

[emattias]

Regarding your suggestion of asking users to disable animations: Perhaps the developer could just do that automatically? If the site is too rich for the majority of users, then perhaps design compromises need to be made. Or, if the site is too janky for a specific long tail of users, perhaps responsively switch to a lite-er, or reduced motion, version of the site?

Yes if we know that its janky that should be done. The problem is how to know it. That is what I was thinking that this new api could help with :)

I recently discovered detect-gpu which might help with this. It atleast gives some rough estimate of the available performance on that specific device (and browser). Not sure if what detect-gpu is benchmarking can predict CSS, web animation api and/or js animations though. But I guess if the animation is gpu based it should be usable. Then the question becomes, how many UI animations performance can be predicted by a quick GPU benchmark? 🤔