In the ever-evolving landscape of web development, performance is king. Users demand fast, responsive websites, and developers are constantly seeking ways to optimize their code. One often-overlooked tool in the developer’s arsenal is the will-change CSS property. While it might not be as flashy as other CSS properties, its strategic use can have a significant impact on your site's performance.
In the world of web development, performance is always going to rank high in terms of priority and importance. And while in the past, that used to mainly be relegated to caching policies and image sizes, we now have a few more tools at our disposal. The CSS 'will-change' property is one of those tools and today I'll be going over just what the property is, how it helps and how it might have negative impacts depending on how you use it.
What is the will-change CSS Property?
.element{
will-change: transform;
}
The will-change property informs the browser about which elements are likely to change in the near future. By setting this in advance, the browser can begin to make optimizations that can lead to smoother transitions and animations. This property can be applied to a few CSS features such as transform, opacity, and top.
In the code snippet above, we're letting the browser knows that the transform property of the .element is likely to change so that it can prepare these optimizations.
Overall, on the surface, this sounds pretty fantastic. Smoother transitions and transforms and the browser handles the bulk of the work. Sign me up. Except, not really. All of this optimization can come at a cost, which I'll go into further down below.
Possible 'will-change' values
The 'will-change' property can be used on a variety of elements such as:
will-change: left;
will-change: opacity;
will-change: transform;
will-change: contents;
will-change: scroll-position
scroll-position - Let's the browser know that the scrolling position might change soon and to prepare for the event by making optimizations, potentially giving a smoother scrolling experience.
contents - Let's the browser know that the contents of an element might be changing and to prepare for the event. As an example, imagine an HTML element that has content loaded into it dynamically based on some event.;
transform - Used when you plan to use CSS transformations, such as 'rotate', 'scale' or 'translate'.
opacity - Used when the opacity of an element is being modified, in order to allow a smoother looking fade effect.
top, left, bottom, right - Useful when you're modifying an elements position using an animation or a transition.
Here is a practical example of what that might look like:
.button:hover{
will-change: transform, opacity;
transition: transform .3s ease, opacity .3s ease;
}
Why Should You Use will-change?
Most web developers out there have encountered this issue when using either CSS transitions or transformations on their elements. An element might need to slide in to the page from some unknown location, and using a CSS transition where you modify the 'top', 'left', 'right' or 'bottom' property is your preferred method.
And it works. For the most part. But sometimes, you just can't get the timing sequence right and things get choppy. Enough so that it impacts the visual attractiveness of your web page.
And while the browser will obviously attempt to provide a good user experience, it might not be enough and using will-change can offer that extra boost in performance.
When to avoid using will-change
Despite the many sounding benefits of this CSS property, it should be used sparingly and only as a last resort. Overusing it, or using it when not really appropriate, can lead to more memory usage and it can potentially degrade performance for the client, leading to a worse experience.
This is particularly true if you've set the 'will-change' property in your CSS files, meaning that the browser will constantly be on the look out for changes to any elements that have this property.
Best Practices
If you are going to use it though, because you see where it can improve the visual fidelity of your page, then there are a few best practice tips that I can offer:
Monitor performance - Pretty much all of the current browser developer tools have built it performance measuring features. Learning how to use these tools will be important if you plan on using 'will-change'.
Don't overuse it - If there are elements that for sure are having a difficult time rendering properly and are causing a user experience problem, then will-change is a good candidate. But if you have normal looking animations and transitions and you think that this might give them some kind of boost, you should avoid it, as the degradation in performance might make things worse for the client.
Remove the property when done - Depending on the lifetime of your animation or transition, it might make sense to remove the property through JavaScript once you are done loading the animation. This will stop the browser from allocating resources to the given element.
Conclusion
The will-change property is definitely a good addition to the web developer toolkit. It provides advanced notice to the browser to prepare for rendering of elements, though at a resource cost. For that reason, it is important that you monitor the performance of your web pages and if possible to remove the property once you have completed rendering elements.