CSS · Layout and visual systems
How do you use will-change without hurting performance?
Short answer
will-change hints that a property will change so the browser can prepare, often by promoting a layer. Use it narrowly, apply it shortly before the change, and remove it when the animation ends.
will-change is a hint, not a command. It can cause the browser to create a compositor layer or prepare resources for a property. That can reduce jank, but each layer costs memory and too many layers can make performance worse.
.drawer {
will-change: transform;
}
.drawer.is-idle {
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.drawer {
transition: none;
}
}How to use it responsibly
- Animate transform and opacity rather than layout properties when possible
- Do not put will-change on everything as a blanket optimization
- Apply it just before an interaction and remove it afterward
- Each promoted layer consumes GPU memory
- Measure with browser performance tools instead of guessing
- contain and content-visibility can isolate expensive rendering work
A common mistake is adding will-change: transform to every card or list item. That can create hundreds of layers and increase memory pressure. If the browser already handles the animation smoothly, the hint is unnecessary.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What does will-change actually do?
- 2Why can too many layers hurt performance?
- 3When should you remove will-change?
- 4Which properties are compositor friendly?
Say it in the interview
will-change hints that a property is about to change, so the browser may promote the element or prepare resources. It can help transform and opacity animations, but each layer costs memory. I use it narrowly, often just before an interaction, and remove it when idle. I validate with performance tools instead of applying it everywhere.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.