0

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.:

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?

gru
  • 2,319
  • 6
  • 24
  • 39
  • 5
    I strongly recommend you to read these articles in order. Then you will get the answer yourself. https://developers.google.com/web/fundamentals/performance/rendering https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count – Duannx Feb 11 '22 at 02:52
  • 4
    Do you have a reproducible code that gives "rendering hiccups" and on what platform? So that discussion can be made. Without it people will provide just links. – the Hutt Feb 12 '22 at 14:55
  • @gru as mentioned by the users above, please try to create a jsfiddle with reproducible code. Also, what are your target devices? I've never had a single issue without the specific property, but will try to help out. – scooterlord Feb 16 '22 at 17:37
  • `will-change` creates a new compisition layer in the browser, which allows you to change certain CSS properties (notably: `transform`) without having to re-run the entire rendering pipeline. The tradeoff is speed vs memory (which also increases first content paint time) . Here's another source https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas – Nearoo Feb 17 '22 at 18:12

1 Answers1

0

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.

Mizzy
  • 71
  • 6