Why Excessive CSS will-change Hurts Performance

The CSS will-change property is designed to inform the browser ahead of time about which properties of an element are likely to be animated, allowing the rendering engine to apply proactive optimizations. However, excessively applying will-change forces the browser to create excessive stacking contexts and compositing layers, which drastically increases memory consumption and burdens both the CPU and GPU. Instead of smooth animations, overuse frequently leads to dropped frames, high battery drain, and sluggish page responsiveness.

How will-change Works

When a browser renders a web page, it calculates layout, paints pixels, and composites layers into the final view displayed on screen. Certain animations, like transforms and opacity changes, can be processed on the GPU via dedicated compositing layers, avoiding expensive layout recalculations and repainting.

The will-change property acts as an explicit instruction telling the browser: "Prepare this element for an intensive change." In response, the browser immediately isolates the element onto its own hardware-accelerated layer (a distinct texture in GPU memory).

The Problems Caused by Overuse

1. Massive Memory Consumption (VRAM)

Every time an element is promoted to its own compositing layer, the browser must store that layer as an image texture in graphics memory (VRAM). Applying will-change across dozens or hundreds of elements creates hundreds of separate textures. On devices with constrained memory, such as smartphones, this can quickly exhaust available resources, causing the browser to freeze, drop frames, or crash the tab entirely.

2. Excessive Layer Tree Management

The browser's CPU must keep track of every layer's geometry, hierarchy, and visibility. Managing an overly complex "layer tree" requires significant processing power. When the number of layers becomes too large, the overhead required for the CPU to compute layer relationships cancels out any performance gains achieved by offloading work to the GPU.

3. GPU Compositing Overhead

While the GPU is efficient at combining layers, it is not limitless. During each frame, the GPU must composite all active layers together in the correct stacking order. When faced with a massive number of layers, the compositing step itself becomes a bottleneck, leading to jank and dropped frames during scrolling or page interactions.

4. Suppression of Native Browser Optimizations

Modern browser rendering engines feature sophisticated, automated heuristics that detect and optimize animations on the fly. When developers apply will-change globally or prematurely, it overrides these built-in systems, forcing resources to remain permanently locked into high-performance states even when elements are completely idle.

Best Practices for Using will-change

  • Use it as a last resort: Only introduce will-change when an animation is measurably stuttering or dropping frames after profiling with browser developer tools.
  • Apply and remove dynamically: Use JavaScript to apply will-change just before an animation begins (such as on mouseenter or focus) and remove it immediately after the animation completes (using transitionend or animationend).
  • Never use universal selectors: Avoid rules like * { will-change: transform; } or applying it broadly to class selectors used across large lists or grids.
  • Keep it scoped to the specific property: Declare only the exact property being animated, such as will-change: transform;, rather than generic or multiple properties.