Use will-change sparingly

Add will-change right before animating and remove it after.

From nextjs-pagespeed.

300 cards, two policies

Switch the policy, then hover the grid or press Wave.

will-change0 / 300
Peak0
Layer memory0 MB
card.style.willChange = "transform";
requestAnimationFrame(() => card.classList.add("is-up"));
card.addEventListener("transitionend", () => {
  card.style.willChange = "auto";
});

Hover lift, class list live

Hover, tap or Tab to each card.

In the stylesheetBad
class="wc-lift wc-perm" will-change: transform held 0.0 s
Added, then removedGood
class="wc-lift" will-change: auto held 0.0 s

    Permanent layers stay blurry

    Press Zoom; in Chromium the left chip stays blurry.

    will-change left onBad
    $1,284.50
    will-change: transform
    Removed after the zoomGood
    $1,284.50
    will-change: auto

    Why it matters, pros and cons

    Why it matters

    will-change makes a GPU layer early; hundreds at rest waste memory.

    Pros

    • No first-frame promotion hitch.
    • Zero extra layers at rest.
    • Text re-rasterizes sharp after scaling.

    Cons

    • Browsers already promote transform and opacity animations.
    • Adding it on pointerenter can be too late.
    • A missed removal path leaks layers.