Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

performanceRauno

Sparingly Use GPU Rendering

SHOULD

SHOULD: Reach for `transform: translateZ(0)` / `will-change` sparingly — only on the specific element with a measured animation problem. Blanket layer promotion burns GPU memory and can make things slower.

Only enable GPU rendering with translateZ(0) on elements that need it

Bad

Good

Why it matters

Promoting elements to their own GPU layer with translateZ(0) can improve animation performance, but applying it broadly wastes GPU memory and can actually degrade performance. Only use it on specific elements with known performance issues.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.