CSS @ 60 FPS — Optimizing Browser Rendering

With the flood of applications that differ in little more than color palette and font-face selection, it is a necessity for web apps and content farms alike to provide users with the snappiest and most responsive experience possible. In technical terms this translates to giving the browser the air it needs to pump out a blinding 60 FPS (~16ms per frame, but with browser housekeeping you’re really looking at about 10ms per frame).

This commitment to rendering at 60 FPS comes in to play even more with the advent of non-native web apps running on mobile devices and tablets.

So, why 60 FPS?

Well, monitors refresh at the rate of 60HZ (60 times per second) and thus to keep up the appearance of fluid motion the browser needs to render 60 frames per second, or a frame per screen refresh. If the browser renders anything less than 60 FPS, frames get dropped and things start looking choppy — what developers describe as jank.

The browser walks through each of these steps when a change to an element’s CSS properties are made.

A typical browser rendering frame is made up of the following pieces: Javascript, Style, Layout, Paint, Composite. In the image to the left, you’ll see the various steps of a frame and the order the browser walks through as it renders that frame. All the steps in the rendering process (besides the initial Javascript step) can be affected by changes to an element’s CSS properties. This is why it is so important to pick CSS properties that affect the fewest pieces of the frame rendering process when looking for optimal performance. When looking to optimize your browser’s render and hit that golden 60 FPS, you want to avoid CSS properties that affect the layout portion of frame when updating (or animating) CSS properties, as those properties trigger every step on down the line.

While working through a course focused on Browser Rendering Optimization, I found a great resource: CSS Triggers. This site will let you know in an instant which CSS properties require more heavy lifting from your favorite browser. Some of you have probably already hit the link and started reviewing the list in despair — some of your favorite CSS tricks are bogging down your frame rates. For those of you that are still reading, here are some take aways:

  1. Transforms only affect the composite portion of a frame render and are thus the most performant CSS property to animate or apply transitions to.
  2. Properties that affect the geometry of an element (height, width, border-width, margin, padding) always affect the layout, paint, and composite and are thus the least performant CSS properties to apply animations and transitions to.
  3. You will also notice that some CSS properties do not have any affect on the rendering of an individual frame and are thus OK to apply transitions or update on the fly without any serious negative implications on performance.

While this post only scratches the surface on how to make your site or application 60 FPS friendly, this should be a solid baseline for making your next slide out navigation menu or overlay as performant as possible.

Show your support

Clapping shows how much you appreciated Brent ONeill’s story.