Why Compositor-Only Animations Matter
Compositing is the final step where painted page sections are combined for display on screen. Animations that require layout or paint work are more expensive and may appear janky on low-end devices or when the main thread is busy with other tasks. Two factors dominate this stage of the pipeline: the number of compositor layers to manage and the CSS properties you choose to animate.
The ideal animation path touches only the compositor, skipping layout and paint entirely:
Only two properties can currently be changed without forcing layout or paint: transform and opacity:
There is a catch: these properties only provide that benefit when the element lives on its own compositor layer. You must actively promote the element to get that layer, which is covered next.
Promote Elements You Plan to Move
Elements you intend to animate should be promoted to their own layer, but do so judiciously. Use will-change to hint at the upcoming change:
.moving-element {
will-change: transform;
}
For older browsers that lack will-change support, the fallback is a translateZ hack:
.moving-element {
transform: translateZ(0);
}
Layer Explosions Are a Real Cost
Knowing that layers help performance, it might seem sensible to promote everything on the page at once:
* {
will-change: transform;
transform: translateZ(0);
}
That approach effectively tells the browser to give every element its own layer. Each layer consumes memory and requires management; that overhead is not free. On memory-constrained devices, the performance penalty can outweigh any gain. Layer textures also must be uploaded to the GPU, adding CPU-to-GPU bandwidth pressure and increasing GPU texture memory usage.
A target of 4–5ms for compositing during critical actions like scrolling or transitions is a reasonable goal. If you exceed that, your layer count is likely part of the problem.
Inspecting Layers in Chrome DevTools
To see what layers your application has and why they exist, enable the Paint profiler in the DevTools Timeline. Then record a session. After recording, you can click on individual frames between the frames-per-second bars and the details panel:
Clicking a frame adds a Layers tab to the details pane:
That tab opens a view where you can pan and zoom across all layers active in that frame, along with the reason each layer was created:
Use this view to audit your layer count. If compositing time is high during performance-critical interactions, the data tells you how many layers exist, why they were created, and where you can reduce the workload.
