Improve Site Performance: Fixing Laggy Scrolling Caused by CSS Issues

You might have noticed your website lags when you scroll. This could be due to issues with either CSS or JavaScript, though many developers assume it's a JavaScript problem. However, CSS can significantly affect scroll performance, particularly with elements using position: fixed and box shadows.

One common and easily fixable issue is fixed side or top navigation bars, with fixed top navbars being especially problematic due to their prevalence in frameworks like Bootstrap.

To identify performance issues on your site, open Chrome DevTools, press escape to bring up the console, and enable paint flashing.

As you scroll, if you see numerous green blocks, those are repaints, which are costly and slow down your site's performance. Here’s an example:

In the animation above, the frequent repaints are often caused by fixed top navigation bars, which you can fix with one line of CSS:

will-change: transform;

This method is a more specific approach than the older technique of using transform: translateZ(0) to create a separate rendering context.

Adding this rule to your position: fixed element should stop the repaints and improve your frames-per-second performance by about 5-10 frames.

However, use this CSS rule sparingly, as overuse can have negative effects.