How to decide whether to use CSS property "will-change"

Question

Recently I've dived into the topic of CSS animations and transitions.

I'm aware of the CSS property will-change which could be used to give a hint to the browser, that the element will change in the near future (which could improve the rendering performance).

There are several examples where developers are using will-change to improve the performance, e.g.:

• https://www.android.com/
• https://www.cube.eu/
• https://www.mrsandmr.com/

But the docs clearly state, that:

Warning: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.

So, what are essential considerations to make, whether to use will-change - or not?

Answer 1

DigitalOcean made a great post about this that I would highly recommend you check out.

https://www.digitalocean.com/community/tutorials/css-will-change

As someone else stated, will-change creates a new 'layer' in the browser, so to speak. If you have multiple animations or transitions under a specific parent element, it may be a good idea to assign will-change to that parent element while leaving the animated child elements with their standard animations/transitions.

Edit: I should point out that adding will-change in multiple places will increase your paint time as someone else mentioned, which will decrease your site load speed.