Optimizing CSS: Tweaking Animation Performance with DevTools

CSS animation performance optimization guide: Using browser developer tools to improve animation fluency

This article is created in collaboration with SiteGround. Thanks to our partners who support SitePoint.

As we all know, CSS animation performance is usually very high. However, for scenes that contain a large number of elements or complex animations, if the code is not optimized for performance, it will cause animation to be stuttered and affect the user experience.

This article will introduce some practical browser developer tool features to help you check the running mechanism behind CSS animations. When the animation is stuck, you can better understand the reasons and fix them.

Key Points

• Use browser developer tools to optimize CSS animation performance, identify problems that cause animation lag, and gain insight into the underlying operation of animation. These tools can check frame rates, review, edit, and debug code, and analyze layout and drawing operations that may affect performance.
• To obtain smooth animation effects, the target frame rate should reach 60fps (frames per second). To ensure smoother animation, only the opacity, transforms and filters of CSS are animated. Animating other properties can put pressure on the browser, forcing it to perform costly tasks in a very short time, resulting in bad results.
• Use the will-changeCSS attribute, or translateZ(0) and translate3d(0,0,0) techniques to force the browser to hand over some property changes to the GPU (graphics processing unit) for processing. This takes advantage of hardware acceleration and relieves some of the pressure on the main browser thread. However, overuse can cause problems you are trying to avoid, such as animation stuttering.

Developer Tools and CSS Performance Analysis

Your animation needs to reach 60fps to run smoothly in the browser. The lower the frame rate, the worse the animation effect. This means that the browser only has about 16 milliseconds per frame to do its job. But what did it do during this time? How do you know if your browser keeps up with the required framerate?

I think there is nothing more important than the user experience when evaluating animation quality. However, while modern browser developer tools are not always 100% reliable, they are becoming smarter and you can use them to review, edit, and debug your code.

Same is true when you need to check frame rate and CSS animation performance. Here is how it works.

Firefox Performance Tool Exploration

In this article, I am using Firefox performance tools. Another major contender is Chrome Performance Tools. You can choose your favorite tool as both browsers offer powerful performance features.

To open the developer tools in Firefox, select one of the following options:

• Right-click on your webpage and select Check Elements in the context menu.
• Or use keyboard shortcuts: press Ctrl Shift I on Windows and Linux, and Cmd Opt I on macOS.

Next, click the Performance tab. Here you will find a button that will allow you to start recording the performance data of your website:

Press this button and wait for a few seconds, or perform some action on the page. When finished, click the "Stop Performance Recording" button:

In a moment, Firefox will present you with a lot of well-organized data to help you understand what problems are in your code.

The recording results in the Performance panel are as follows:

The "Waterfall" section is great for checking issues related to CSS transitions and keyframe animations. The other parts are "Call Tree" and "JS Flame Graph", which you can use to find bottlenecks in JavaScript code.

The waterfall flow view has a summary section and a detailed breakdown at the top. In both, the data is color-coded:

• Yellow bar indicates JavaScript operation.
• The purple bar represents the CSS style (recalculate style) and page layout (layout) that calculates HTML elements. Layout operations are quite expensive for the browser, so if you animate properties involving duplicate layouts (also known as "reflow" - for example margin, padding, top, left,
,
• , etc.), The result may be stuttered. color background-colorThe green bar indicates that the element is drawn into one or more bitmaps (draw). Animating attributes such as box-shadow,
,

and other attributes involve expensive drawing operations, which may be the reason for slow animation and poor user experience.

You can also filter the data types to check. For example, I'm only interested in CSS-related data, so I can deselect everything else by clicking the filter icon in the upper left corner of the screen:

The green bar below the waterfall flow summary indicates frame rate information.

The healthy expression should look quite high, but most importantly consistency—that is, there are not too many deep gaps.

Let's illustrate this with an example.

Practical tool combat@keyframes

This is a simple CSS animation using the keyword. The test page looks like this:

Rectangular purple frame slides in and out of view in an infinite loop.

I do this by animation representing the <div> attribute of the <code>margin-left element of the rectangle box on the screen. @keyframesAnimation blocks are as follows:

<code class="language-css">@keyframes slide-margin {
  100% {
    margin-left: 0;
  }
}</code>

The performance data I get from this animation is as follows:

Frame rate visualization looks a bit uneven, with an average frame rate of 44.82fps, which is a bit low.

Also, pay attention to all layout and drawing operations that occur during the animation process. These are the costly actions a browser performs on its main thread, which negatively affects performance.

Finally, if you access the Inspector tool, click on the Animation section, and then hover over the animation name, an information box will pop up with all the relevant data about the current animation. If your animation is optimized, a message explaining the fact is displayed. In this case, no message:

Now, I will change my code and do a new recording, as the browser uses this @keyframes block to animate CSStranslate3d() properties:

<code class="language-css">@keyframes slide-three-d {
  100% {
    transform: translate3d(0, 0, 0);
  }
}</code>

This is the image recorded in performance:

The frame rate is now higher (56.83fps), and the waterfall flow does not show costly layout and drawing operations.

Also, if you open the "Inspector" tab of the developer tools, access the "Animation" panel and hover over the animation name, you will see something like this:

The Info box associated with the animation name indicates that all animations are optimized, which is good news for your website visitors.

Animate only opacity, transforms and filters

of CSS

You may have heard this suggestion before, but just in case it is worth talking about it again: if you want the animation to run smoothly, you will only have opacity, transforms, and filters for CSS ( filters) to set animation effects. Animating everything else can put pressure on the browser, forcing it to perform costly tasks in a very short time, which usually does not produce the best results.

As the performance tools in the browser have proven, repeated layout and drawing operations are not your friends.

However, each browser handles CSS properties slightly differently. If you want to know which browser will trigger publishing and drawing operations for which properties (especially when updating the values ​​of these properties, which are involved in web animations), visit CSS Triggers.

To ensure animation performance, a popular approach is to force the browser to hand over some property changes to the GPU (Graphics Processing Unit), which relieves some of the pressure on the browser's main thread and takes advantage of hardware acceleration. You can use the will-change CSS attribute, or the translateZ(0) and translate3d(0,0,0) techniques to achieve it. All of these tips work, but if you overuse, you may actually get the result you are trying to avoid, i.e. animation stuttering.

I don't intend to go into detail about hardware acceleration for web animation performance, but if you want to dig deeper, check out the resources listed below.

Resources

• High Performance Animations by Paul Lewis and Paul Irish
• CSS animations and transitions performance: looking inside the browser by Max Vujovic
• Animations and Performance by Paul Lewis and Sam Thorogood
• Stick to Compositor-Only Properties and Manage Layer Count by Paul Lewis
• Tricks for GPU Composited CSS by Sara Soueidan
• An Introduction to the CSS will-change Property by Nick Salloum
• Animating CSS properties by MDN

FAQs about CSS animation performance (FAQs)

What are the key factors affecting the performance of CSS animations?

The performance of CSS animations is affected by a variety of factors. The complexity of the animation, the number of elements being animated, and the attributes being animated will all work. Animating properties such as transform and opacity tends to perform better because they don't trigger publishing or drawing operations. However, animating properties such as width, height, or margin can cause layout offsets and redraws, which slows down the animation. In addition, the hardware of the device and the rendering engine of the browser will also affect the performance of CSS animation.

How to measure the performance of CSS animation?

You can use browser developer tools to measure the performance of CSS animations. For example, in Chrome, you can use the Performance tab to record and analyze the runtime of your animation. This tool provides a detailed breakdown of time consumption in the animation lifecycle to help you identify any performance bottlenecks.

What is the ideal frame rate for smooth CSS animations?

The ideal frame rate for smooth animation is 60 frames per second (fps). This is because most devices refresh the screen 60 times per second. So, to create smooth animations, you should target updates the animation every 16.67 milliseconds (1 second/60), which corresponds to 60fps.

How to optimize CSS animation for better performance?

There are various strategies to optimize CSS animations for better performance. A common approach is to animation properties that do not trigger posting or draw operations, such as transform and opacity. In addition, reducing the number of elements being animated and simplifying animations can also improve performance. Using the will-change attribute can also help the browser optimize animation by prompting for properties that may be animated.

What is the difference between CSS animation and JavaScript animation in terms of performance?

CSS animations usually perform better than JavaScript animations. This is because CSS animation runs on the browser's rendering engine, separate from the main JavaScript thread. This means that even if JavaScript threads are busy, CSS animations can still run smoothly. However, JavaScript animations provide more control and flexibility, which can be beneficial for complex animations.

How does hardware acceleration affect CSS animation performance?

Hardware acceleration can significantly improve the performance of CSS animations. When hardware acceleration is enabled, the browser offloads some rendering tasks to the device's GPU, freeing up the CPU to handle other tasks. This can lead to smoother animations, especially in complex animations or animations involving a large number of elements.

requestAnimationFrameWhat role does the function play in animation performance?

The

requestAnimationFrame function is a JavaScript method that allows for more efficient animations by calling the specified function before the next repaint. This means that animations can be synchronized with the refresh rate of the device, resulting in smoother animations. It also allows the browser to optimize animations, reduce CPU usage and improve performance.

How to use DevTools' Performance panel to improve CSS animation performance?

The Performance panel in DevTools provides a detailed breakdown of time consumption in the animation life cycle. By analyzing this data, you can identify any performance bottlenecks and optimize animations accordingly. For example, if a lot of time is spent on drawing, you may want to consider properties that animations do not trigger the drawing operation.

What is the impact of layout jitter on CSS animation performance?

Layout jitter refers to the situation where the browser must repeatedly calculate layout information due to changes in the DOM. This can seriously affect the performance of CSS animations, causing the animation to run slowly or cause stuttering. To avoid layout jitter, try batching DOM read and write operations together and avoid animations to trigger the publishing operation's properties.

How to use CSSwill-change attribute to improve animation performance?

will-changeProperties allow you to inform the browser in advance of the properties you plan to animation. This allows the browser to perform any necessary optimizations before the animation starts, which may result in smoother animations. However, the will-change attribute should be used with caution, as overuse may cause the browser to consume more resources and negatively affect performance.

(Please note that all the above links need to be replaced with actual links)