In this post you’ll learn how browser rendering works and how to navigate DevTools to diagnose animation performance issues. We’ll use Chrome DevTools, but other browsers have very similar features and the high-level concepts are the same everywhere.

When the browser downloads and parses HTML and CSS, it creates the DOM (Document Object Model). To calculate the styles, the browser goes over all of the elements in the DOM and looks at the rules defined in stylesheets to figure out which CSS properties should be applied to each element.

Modern browsers can animate four things really cheaply: position, scale, rotation and opacity.

Property	Value
Position	transform: translate(x, y)
Scale	transform: scale(n)
Rotation	transform: rotate()
Opacity	opacity: 0..1

Browsers make optimizations by creating separate layers for elements with CSS transitions or animations on those four properties.

The reason why compositing is a fast operation is that it happens on the GPU. GPU is a like a separate computer inside your device. It is a standalone unit with its own processors and its own memory. It’s designed for performing the complex mathematical calculations that are necessary for graphics rendering so it’s able to compose images very quickly, which takes the load off the CPU.

With that in mind, here are some tips:

• Instead of changing height and width properties, use transform: scale().
• To move elements around, avoid changing top, right, bottom, or left properties and use transform: translate() instead.
• If you want to blur the background, consider using a blurred image and changing its opacity.

Tools for identifying animation performance issues

Chrome DevTools FPS meter

1. To enable the FPS meter Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux) to open DevTools.
2. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu.
3. Start typing Rendering in the Command Menu and select Show Rendering.
4. Select the FPS meter checkbox.

Animation performance can be affected by JavaScript, because style, layout and paint all happen on the browser’s main thread, alongside JavaScript execution. If the main thread is too busy running JavaScript, your animations can get slow and choppy.

Remember the rendering pipeline? Here’s a reminder:

parse → style → layout → paint → composite

Chrome DevTools Layers panel

You can see what your page’s layers look like in 3D in the Layers panel. To enable it, while in DevTools:

1. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu.
2. Start typing Layers in the Command Menu and select Show Layers.

You can zoom, rotate, and drag the layers model to explore its contents. Hovering over a layer reveals its current position on the page. When you select a layer, the Details panel displays its memory consumption and the reason for the compositing. Keep the number of layers relatively low and watch out for memory hungry layers.