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.
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:
- Transforms only affect the composite portion of a frame render and are thus the most performant CSS property to animate or apply transitions to.
- 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.
- 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.