How to benchmark CSS3 hardware acceleration translate3d, and should I apply it to body element?

Question

I came across this question about transform: translate3d(0,0,0) or transform: translateZ(0), and how they serve to enable CSS3 hardware acceleration for animations on some/most platforms and browsers, especially if used in conjunction with -webkit-backface-visibility: hidden and -webkit-perspective: 1000.

However, these questions formed in my mind as I am reading about the topic:

1. How do I benchmark whether adding the transform: translate3d(0,0,0) actually makes animations smoother on my machine? Or is it just a perception thing?
2. Where should I add the transform: translate3d(0,0,0) CSS for it to be as effective as possible? To the body element, or is that slower than exclusively marking the animated element with the transformation?

I will be able to answer the second question myself if the first question is answered. So how would I go about benchmarking animation smoothness?

Answer 1

Hardware acceleration on the web is somewhat subjective.

Just because you've convinced the browser to utilize hardware-acceleration doesn't mean it will actually improve perceived performance.

1. Your GPU can't solve choppy animation caused due to forcing the browser to repaint/redraw significant sections of the window. So you need to understand what causes a browser to repaint. In general, composite properties like opacity and transform are best.
2. The human eye can realistically perceive frame rates up to around 150fps. BUT, the average computer display in 2019 is typically around 60Hz which equates to 60fps. Basically, you'd need a high-end gaming monitor to really test this for human perception. All that to say there's little value in getting a small FPS increase with the GPU on an already highly performant animation.

Benchmarking animation

Chrome's Devtools have several useful tools to help you understand animation. I'm going to use Google's fun Game of the Year for these examples.

The Performance tab. You have to let this start recording and it will then show you FPS at a point in time or an average as a bar horizontal to the "Frames" label. It will also show you how long a specific composite took.

Layers Tab You can access this in Dev tools by selecting the three dots icon -> More Tools -> Layers

Once you have this tab open, you can select individual elements to see paint count, memory usage and what type of visual compositing is being used (and why).

Rendering Details Finally, you can add real-time FPS counters and repaint visualization by opening the "rendering" panel also found in the "more tools" menu. This will add overlays to the actual browser window so you can track what happens as you change things.