CSS will-change property: when to use it?

Question:

According to the W3C specification , the will-change property is intended to inform the browser which CSS properties will be modified so that it can make optimizations on the elements in question. For example, if I want to change the opacity of a link, I can do the following:

.element { transition: opacity .2s; opacity: 1; }
.element:hover { will-change: opacity; }
.element:active { opacity: .3; }
<a href="#" class="element">Stack Overflow em Português</a>
<br>
<sub>Pressione o link acima para ver o efeito em ação</sub>

That is, when the mouse is over the element, I add the will-change property by setting the opacity property, informing the browser that this property may change soon and then it can perform optimizations on the modified element.

The point is that the specification itself describes the use of this property as delicate and I personally have never seen any place using it, so I ask:

  • How does the will-change property work?
  • What kind of optimization can the browser do when the property is used?
  • When is the use of this property necessary?

Answer:

Initial Considerations

The CSS property will-change , was created with the main intention of enabling browsers to perform optimizations in advance, before the element is actually modified.


How does the will-change property work?

To use the CSS property will-change , we must enter as its value the name of the property that is expected to have an animation or change. Values ​​can be:

/* Valores chave */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* Exemplo de <custom-ident> */
will-change: opacity;          /* Exemplo de <custom-ident> */
will-change: left, top;        /* Exemplo de dois <animateable-feature> */

/* Valores globais */
will-change: inherit;
will-change: initial;
will-change: unset;

auto

This keyword does not express any particular intent; the user agent must apply any optimization as it normally occurs.

O can be one of the following values:

scroll-position

Indicates that the author expects that there will be an animation or change in the element's scroll position in the future.

contents

Indicates that the author expects an animation or change to the element's content in the future.

<custom-ident>

Indicates that the author expects there to be an animation or property change with the name given in the element in the future. It cannot be one of the following values: unset , initial , inherit , will-change , auto , scroll-position , or contents . The specification does not define the behavior of a particular value, but it is common for transform be a composite layer. Chrome currently takes two actions , given the particular properties of CSS: establishing a new composition layer or a new stacking context .

Example:

.slide:hover { 
    will-change: opacity;
}

In the example above, when hovering over the element with the slide class, the browser will perform optimizations, as the author of the code indicated that next a change will occur in the opacity property .


What kind of optimization can the browser do when the property is used?

The optimizations performed by browsers through the will-change property are all performance focused. They can increase the responsiveness of a page, doing potentially expensive work before the time they're actually needed. Translated, the browser leaves "pre-loaded", the heavy work it would do, when changing a CSS property, just waiting for the moment to display them. So it is possible to gain processing speed.

It is worth making a reservation here. Using this property can be tricky! The browser already tries its best to optimize everything, so you shouldn't apply will-change to too many elements. When used in excess it can slow down page loading in some cases or consume a lot of resources. Here's an example of bad will-change usage:

.separador {
  will-change: transform;
}

In this case, any element where the separator class is applied, the browser will immediately understand that the property indicated in the will-change will be changed soon, which will make the browser keep the optimization in memory for much longer than the required. By keeping in memory we understand that the browser prepares the optimizations and store them at runtime in memory, in order to wait for the right moment to display them.


When is the use of this property necessary?

Considering that the purpose of the will-change property is to gain performance, its use should be made when the response time of a page is not satisfactory, due to rendering problems.

Here's the key tip: If your page is performing well, don't add the will-change property to the elements just for speed. will-change is meant as something to be used as a last resort , in order to try to solve performance problems. It should not be used to anticipate these potential issues. Excessive use of will-change can result in excessive memory usage and cause more complex rendering as the browser tries to prepare for a possible change. This will lead to worse performance.


Conclusion

For clarity, use will-change only if you already have a performance problem on your hands, otherwise you might end up finding one.

Scroll to Top