Check CSS Animation Performance with the Browser’s Dev Tools

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

CSS animations are known to be super performant. Although this is the case for simple animations on a few elements, add more complexity, and if you didn't code your animations with performance in mind, website users will soon take notice and possibly get annoyed.

In this article, I introduce some useful browser dev tools' features that will enable you to check what happens under the hood when animating with CSS. This way, when an animation looks a bit choppy, you'll have a better idea why and what you can do to fix it.

Developer Tools for CSS Performance

Your animations need to hit 60 fps (frames per second) to run fluidly in the browser — the lower the rate the worse your animation will look. This means the browser has no more than about 16 milliseconds to do its job for one frame. But what does it do during that time? And how would you know if your browser is keeping up with the desired framerate?

I think nothing beats user experience when it comes to assess the quality of an animation. However, developer tools in modern browsers, while not always being 100% reliable, have been getting smarter and smarter and there's quite a bit you can do to review, edit and debug your code using them.

This is also true when you need to check framerate and CSS animation performance. Here's how it works.

Exploring the Performance Tool in Firefox

In this article I use Firefox Performance Tool, the other big contender is Chrome Performance Tool. You can pick your favorite, as both browsers offer powerful performance features.

To open the developer tools in Firefox, choose one of these options:

• Right-click on your web page and choose Inspect Element in the context menu
• If you use the keyboard, press Ctrl + Shift + I on Windows and Linux or Cmd + Opt + I on OS X.

Next, click on the Performance tab. Here, you'll find the button that lets you start a recording of your website's performance:

Press that button and wait for a few seconds or perform some action on the page. When you're done, click the Stop Recording Performance button:

In a split second Firefox presents you with tons of well-organized data that will help you make sense of which issues your code is suffering from.

The result of a recording inside the Performance panel looks something like this:

The Waterfall section is perfect for checking issues related to CSS transitions and keyframe animations. Other sections are the Call Tree and the JS Flame Chart, which you can use to find out about bottlenecks in your JavaScript code.

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

• Yellow bars refer to JavaScript operations
• Purple bars refer to calculating HTML elements’ CSS styles (recalculate styles) and laying out your page (layout). Layout operations are quite expensive for the browser to perform, so if you animate properties that involve repeated layouts (also known as reflows), e.g., margin, padding, top, left, etc., the results could be janky
• Green bars refer to painting your elements into one or more bitmaps (Paint). Animating properties like color, background-color, box-shadow, etc., involves costly paint operations, which could be the cause of sluggish animations and poor user experience.

You can also filter the type of data you want to inspect. For instance, I'm interested only in CSS-related data, therefore I can deselect everything else by clicking on the filter icon at the top left of the screen:

The big green bar below the Waterfall summary represents information on the framerate.

A healthy representation would look quite high, but most importantly, consistent, that is, without too many deep gaps.

Let's illustrate this with an example.

The Performance Tool In Action

Continue reading %Check CSS Animation Performance with the Browser’s Dev Tools%

by Maria Antonietta Perna via SitePoint