When and how to use CSS will-change
Tags: css, webdev
Published: 2023-02-23 15:11:42

**Written by [Pelumi Akintokun](https://blog.logrocket.com/author/pelumiakintokun/)✏️**

The [`will-change` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) 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`?](#what-will-change)
*   [Why use `will-change`?](#why-use-will-change)
    *   [Optimizing performance](#optimizing-performance)
    *   [Improving animations](#improving-animations)
    *   [Preventing repaints and reflows](#preventing-repaints-reflows)
*   [Breaking down the `will-change` syntax](#breaking-down-will-change)
*   [Adding `will-change` to an element](#adding-will-change-element)
*   [When to use `will-change`](#when-use-will-change)
*   [When to avoid using `will-change`](#when-avoid-use-will-change)
*   [Browser support for CSS `will-change`](#browser-support-will-change)

## What is `will-change`? <a name="what-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`? <a name="why-use-will-change">

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

### Optimizing performance <a name="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 <a name="improving-animations">

`will-change` can [improve the performance of animations](https://blog.logrocket.com/understanding-animation-transition-timing-functions-css/). 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 <a name="preventing-repaints-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 <a name="breaking-down-will-change">

The `will-change` syntax looks like this:

```css
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 <a name="adding-will-change-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:

```css
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:

```css
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:

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

```css
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` <a name="when-use-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](https://blog.logrocket.com/best-practices-improving-css-performance/). 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
//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');
});
```

![Using CSS Will-Change Communicate Property Changes Browser](https://blog.logrocket.com/wp-content/uploads/2023/02/using-css-will-change-communicate-property-changes-browser.gif) 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
//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');
});
```

![Communicate Changes Browser Width Height Transform CSS Will-Change](https://blog.logrocket.com/wp-content/uploads/2023/02/communicate-changes-browser-width-height-transform-css-will-change.gif) 

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` <a name="when-avoid-use-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` <a name="browser-support-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](https://caniuse.com/will-change).

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

---

## Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, [try LogRocket] (https://logrocket.com/signup/).

[![LogRocket Dashboard Free Trial Banner] (https://blog.logrocket.com/wp-content/uploads/2019/12/cpu-memory-usage.png)](https://logrocket.com/signup/)

[LogRocket] (https://logrocket.com/signup/) is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — [Start monitoring for free] (https://logrocket.com/signup/).