CSS Optimization

When building modern web applications, performance is key. While JavaScript and image optimization often get the spotlight, CSS can be a hidden culprit in rendering jank and sluggish UI interactions.

Optimizing your CSS not only makes your website faster but also improves user experience across devices.

Here's how you can squeeze more performance out of your stylesheets.

1. Reduce Selector Complexity

Browsers read selectors from right to left, so the more complex the selector, the more work it takes for the browser to match elements.

Avoid this:

ul li a span.highlighted {
  color: red;
}

Prefer this:

.highlighted {
  color: red;
}

Using class-based selectors and keeping them short helps the browser parse and apply styles faster.

2. Avoid Expensive Properties

Some CSS properties are more expensive to compute and repaint than others. Overusing them can lead to jank during scroll, hover, or animation events.

Expensive properties include:

• box-shadow

• filter

• border-radius

• outline

• position: fixed

Use them sparingly, and test performance on lower-end devices if they’re necessary for your design.

3. Use will-change Judiciously

The will-change property gives the browser a heads-up about what elements are likely to change, allowing it to optimize those parts in advance.

Example:

.button {
  will-change: transform;
}

But be careful—overusing “will-change” can hurt performance by forcing the browser to reserve GPU memory unnecessarily. Only use it when absolutely needed and remove it when no longer relevant.

4. Optimize Animations with transform and opacity

CSS animations that modify layout (like width, height, top, or left) trigger reflows and repaints.

Instead, animate properties that can be GPU-accelerated:

• transform

• opacity

Better:

.card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

Avoid animations that affect layout and use transform: translate3d(...) or scale(...) to trigger the GPU.