Tips for Improving CSS and JS Animation Performance
Instead of using
requestAnimationFrame() to execute your animation code at the best time for the browser. This method chooses the appropriate frame rate for the user's device, so mobile visitors will see a different frame rate than desktop users.
2. Decouple animations from events
The code responsible for handling events such as scrolling should be kept separate from your animation code. HTML5Rocks has a great write up on this which dives deeper into how you should decouple events from the code that handles
4. Don't use jQuery
Choosing which CSS properties to animate
Continuous animations can consume a significant amount of resources, but some CSS properties are more costly to animate than others. The harder a browser must work to animate a property, the slower the frame rate will be. Therefore, choosing the right CSS properties to animate can have a huge impact on page performance.
There are three main types of CSS properties:
- Layout properties - These determine the size and placement of page elements. Animations that change an element's width and height can affect the placement of other page elements, which can cause a chain reaction known as "layout thrash." Since animations that change the page layout are especially costly, they are best avoided.
- Paint properties - These define the appearance of page elements. Making changes to properties such as color requires repainting, which can be costly. That said, simple animations that require a small portion of the viewport to be repainted may have a negligible impact on overall performance. Larger animations that require repainting may not be worth the effort.
- Composite properties - Which include transform and opacity, are your best friends for creating CSS animations with minimal cost. With transform, you can scale and rotate animations without affecting the page layout. Try to use composite properties for animations whenever possible. With a little creative thinking, you'd be surprised by what you can pull off with just these properties.
For best results, try to limit yourself to using these four composite properties:
You can do almost everything using these four options that you can using layout properties without affecting the positioning of other page elements. For example, to change the size of an image, use scale() rather than width().
CSS animation tips
1. Avoid simultaneous animations
Animations that run smoothly in isolation may not work so well on a page alongside dozens of other animations. More than two animations going at the same time is likely to cause lag. Therefore, timing your animations so that they don't all execute all at once is vital to maintaining consistent performance. This can be accomplished by adding transition delays. Figuring out how to optimally choreograph your animations may require some trial and error, but the performance boost you'll get is worth the effort.
2. Examine your animations in slow motion
If an animation looks good in slow motion, it will look great at normal speed. Slowing down an animation can help you better pinpoint rendering problems.
3. Delay all animations by a fraction of a second
Since the browser is very busy when your page begins loading, delaying all animations until a few hundred milliseconds after the initial load event can make a noticeable difference in overall page performance.
4. Don't bind CSS animations to scroll
Animations that follow the viewport as the user scrolls are not only annoying, but they also drag down the performance of everything else on screen.
5. Combine CSS with SVGs
Scalable vector graphics, or SVGs, are excellent for animations since they can be scaled without degrading resolution. You can create SVGs in a program like Adobe Illustrator and apply CSS to alter their appearance. Just another reason to choose SVGs over icon fonts.
When to use
If you've tried everything else and are still having performance problems, then you might want to try adding the
will-change property to your animations. As its name implies, will-change indicates that an element's properties will change so that the browser can make appropriate preparations. List the specific properties that will change like so:
will-change: transform, opacity;
will-change consumes resources, be warned that overuse can lead to further performance problems. Putting it before every animation by default isn't recommended. Only use
will-change as a last resort to optimize page performance.
Put your animations to the test
Performance testing should be an ongoing process while building animations for your web app. The longer you wait to identify rendering issues, the harder it becomes to pinpoint the root of the problem.
The developer tools for Chrome, Firefox and Safari offer a frame-by-frame breakdown of paint and render events under their Network tabs. This information can help you optimize animations as you design them. If you're using Chrome, look under the Rendering tab in the DevTools console for additional features such as an FPS meter.
The user's screen size has a major impact on how animations display, so be sure to test your project on multiple platforms including mobile devices.
Optimizing animations for the web is a relatively straight-forward process. Choosing engaging animations that will entice new visitors to stay on your website is more challenging because you have to consider your audience. In addition to tracking how your site's technical performance affects conversions, take note of the impact that web animations have on your bottom line. If your animations aren't helping, then they are just wasting resources better spent elsewhere.