When and how to use CSS will-change

The will-change CSS property is a powerful tool that allows developers to hint to the browser about the elements on a page that are likely to change soon. This gives the browser a chance to optimize its rendering of those elements ahead of time, potentially resulting in better performance.

This article will discuss how to use the will-change property and when to avoid using it. We’ll also share information about its browser support.

N.B., will-change should be used with caution, as overuse can actually harm performance rather than improve it.

 

Jump ahead:

• What is will-change?
• Why use will-change?
  • Optimizing performance
  • Improving animations
  • Preventing repaints and reflows
• Breaking down the will-change syntax
• Adding will-change to an element
• When to use will-change
• When to avoid using will-change
• Browser support for CSS will-change

What is will-change?

will-change is a CSS property that tells the browser which properties of an element (e.g., content, scroll position, opacity, etc.) are likely to change in the future. This allows the browser to optimize the element’s rendering ahead of time, potentially resulting in better performance.

For example, let’s say you have a page with many elements of the same size and color. If you know that one of those elements will change size or color soon, you can use will-change to inform the browser about this change before it happens.

This “heads-up” will allow the browser to optimize its rendering of the element, potentially resulting in better performance when the change occurs.

Why use will-change?

There are a few reasons why you might want to use will-change. Let’s take a look.

Optimizing performance

As mentioned earlier, the primary reason for using will-change is to improve performance. By letting the browser know which elements are likely to change soon, it can optimize its rendering of those elements ahead of time, potentially resulting in better performance when the change actually happens.

Improving animations

will-change can improve the performance of animations. It allows the browser to optimize element rendering, potentially producing smoother and more fluid animations. If you know an element will be animated, you can use will-change to inform the browser about this.

Preventing repaints and reflows

Repaints and reflows are expensive operations that can significantly impact the performance of a page. Repaint occurs when there are changes to an element that do not affect the DOM layout (e.g., a change in an element’s background). Reflows occur when changes to an element do affect the DOM layout (e.g., a change in an element’s width or height).

By using will-change, you can help prevent unnecessary repaints and reflows, further improving the performance of your page.

Breaking down the will-change syntax

The will-change syntax looks like this:

will-change: <animateable-feature> = auto | scroll-position | contents | <custom-ident>

The will-change property can have one or more values:

• auto: Tells the browser that it should apply the standard optimization; this is the default value
• scroll-position: Tells the browser that an element’s scroll position will be animated later and should prepare for its content which is not visible in the scroll window of that element
• contents: Tells the browser that the contents of an element will change, so the browser should not cache this element’s content
• <custom-indent>: This can be any user-defined property, such as transform or background. It tells the browser that the value of the property will soon change; it can also be one or more properties separated by a comma

N.B., if you specify a shorthand property as a custom-indent value (e.g., background), you are telling the browser that the background-color, background-image, background-position, and other background-related properties are likely to change

Adding will-change to an element

It’s relatively simple to use the will-change property. Just add will-change to the element you want to optimize and specify the properties that are likely to change, like so:

element {

will-change: height, width, color;

}

In the example above, we’re telling the browser that the element’s height, width, and color properties are likely to change soon. This allows the browser to optimize the element’s rendering, potentially resulting in better performance when the property changes occur.

Do not use the will-change property at the point of an animation or transition; instead, use it before the transition or animation. will-change is supposed to tell the browser about an upcoming change so that the browser can prepare for it.

The browser can’t prepare for a change that is currently happening or has already occurred.

For example, instead of adding it directly to an element at the point of transition, like this:

my-element:hover {
  will-change: color;
  color: red;
}

You’ll add it to the element at its initial state when no change has occurred yet:

.element {
  will-change: color;
  transition: color 300ms ease-in-out;
}

.my-element:hover {
  color: red;
} 

Also, it’s best practice to turn will-change on and off before and after the desired change occurs, especially if such changes will be infrequent. It can be hard to do this from your CSS stylesheet, but with JavaScript, you can easily add (and remove) it to your elements:

const el = document.querySelector('.parent-element')
el.addEventListener('mouseenter', addWillChange)
el.addEventListener(mouseleave, removeWillChange)

const addWillChange = () => {
  this.style.willChange = 'color'
}

const removeWillChange = () => {
  this.style.willChange = 'auto'
}

Now that we understand how to use will-change, take a look at when to use it.

When to use CSS will-change

There are different instances in which you might want to use the CSS will-change property to improve the performance of your page. For example, if you observe that parts of your animation are not running smoothly and other optimizations haven’t helped, you can try will-change to make it more fluid and crisp, thereby improving animation performance:

//CSS file
#animated-element {
  will-change: transform, opacity;
}

#animated-element.animated {
  transition: transform 0.5s, opacity 0.5s;
  transform: scale(2);
  opacity: 0;
}

//JS file
const element = document.querySelector('#animated-element');

element.addEventListener('click', () => {
  element.classList.toggle('animated');
});

In the above example, we use will-change to let the browser know that the transform and opacity properties of the #animated-element are likely to change when the element is clicked. This enables the browser to optimize its element rendering, potentially producing smoother and more fluid animations.

Another use case for the CSS will-change property is when you know that the size or position of an element is going to change soon. Using will-change to inform the browser about this change ahead of time, enabling the browser to optimize its rendering of the element, potentially resulting in better performance when the change occurs:

//CSS file
#changing-element {
  will-change: width, height, transform;
}
#changing-element.changed {
  width: 200px;
  height: 200px;
  transform: translateX(100px);
}

//JS file
const element = document.querySelector('#changing-element');
element.addEventListener('click', () => {
  element.classList.toggle('changed');
});

Here, we use will-change to let the browser know that the width, height, and transform properties of the #changing-element are likely to change when clicked.

Other examples where will-change can be helpful are when the style of an element, like the color, font size, or text decoration, is going to change soon.

When to avoid using will-change

The will-change property can be useful for optimizing performance and improving animations in certain scenarios, but there are some cases where it may be best to avoid using it altogether. Use will-change with caution and only on elements that are likely to change soon and benefit from optimization.

Here are some situations where you should avoid using will-change:

• During active animations or transitions: Don’t apply will-change to an element when an animation or transition is already taking place. Only use will-change when a change is imminent or likely to happen in the near future to give the browser sufficient time to optimize its rendering. Using will-change when a change has already occurred or is no longer imminent can strain the browser and harm performance

• Unpredictable changes: If changes to an element are unpredictable and can occur frequently or unexpectedly, it may not be worth using will-change as it can cause unnecessary performance overhead

• Small elements: will-change can be counterproductive for small elements on a page, as the performance gain from optimizing the rendering of a small element may be negligible

• Non-animatable properties: If you use will-change on non-animatable properties such as font-size or border-radius, it may have no effect on performance or could even negatively impact performance

• Legacy browsers: will-change is a relatively new CSS property and may not be supported in older browsers. If you need to support older browsers, you may need to avoid using will-change altogether

• Overuse: Overusing will-change can actually harm performance rather than improve it. You should avoid applying will-change to several elements on a page. This can cause the browser to hog machine resources, thereby slowing down the page load time. Instead, only use it on the elements that are likely to change soon and benefit from optimization. In general, will-change is best used as a solution for responding to performance issues rather than a means to preempt them

Browser support for CSS will-change

The will-change property is supported in most modern browsers, including Microsoft Edge 79+, Google Chrome 36.0+, Mozilla Firefox 36.0+, Apple Safari 9.1+, and Opera 24+. You can learn more about its browser support here.

Conclusion

The will-change CSS property is a valuable tool for optimizing the performance of elements on a page that are likely to change very soon. By letting the browser know about these changes ahead of time, the browser can optimize its rendering of those elements, potentially resulting in better performance.

However, will-change should be used with caution, as overuse can actually harm performance rather than improve it. You should limit the use of this property to cases when there is a specific need, such as when animating an element or when you know that an element’s properties will change. Then, remove it as soon as it is no longer needed.

It’s also important to realize that the browser may ignore the will-change hint if it’s unnecessary. will-change is supported in most modern browsers.

By understanding when and how to use CSS will-change property, developers can leverage this powerful tool to improve the performance of their websites and applications.