One small CSS hack to improve scrolling performance

You might have noticed you have a laggy experience when scrolling around your site. I won’t bore you with all the possibilities but you’ve either got a CSS or JavaScript issue. Most developers will assume it’s a JS issue but CSS can play a big part in scroll performance degradation, especially when position:fixed elements and box shadows come into play.

The one thing I’ve seen come up a number of times that’s easily addressable is fixed side or top navbars. The latter being the frontrunner with Bootstrap offering a out-the-box fixed top navbar.

To witness where things are causing slowdowns on your site, open up Chrome dev tools, hit escape to bring up the console and enable paint flashing.

Now when you scroll around, if you’re seeing lots of green blocks, that’s a repaint which is expensive and thus slows down perceived performance of your site. Here’s an example:

As is evident in the above animation, this often shows up in fixed top navs which you can treat with one line of CSS:

will-change: transform;

I’ll just point out, this is a more purpose built way of the previous method of using transform: translateZ(0) to create a separate rendering context.

When you add this rule to your position: fixed; element, you should now see the repaints stop flashing and your frame-per-second performance bump up ~5–10 frames.

Word of caution, as with any good cologne/perfume, use sparingly or there could be a negative impact. There’s a great article covering the technical details in: Everything You Need to Know About the CSS will-change Property on Opera’s blog.