14 Proven Ways to Optimize CSS for Better Performance

Optimizing CSS for performance can significantly speed up page load times, reduce bandwidth usage, and enhance the overall user experience.

Here are several techniques you can use to write performant CSS and keep your stylesheets lean.

If you are new to CSS and want to learn the fundamentals first, check out the post Getting Started with CSS.

1. Write Efficient Selectors

Overly specific selectors or complex combinators can slow down rendering performance. Use simpler selectors to improve efficiency.

/* Overly specific */
div.container ul li a {
    color: blue;
}

/* Efficient */
a {
    color: blue;
}

In the efficient example, we’re directly targeting a elements without using deeply nested selectors, improving performance.

Here are additional examples:

/* Overly specific */
div.container > ul > li > a {
    text-decoration: none;
}

/* Better */
.container a {
    text-decoration: none;
}

When using attribute selectors, limit their use:

/* Slower */
input[type="text"] {
    border: 1px solid #ccc;
}

/* Faster */
.text-input {
    border: 1px solid #ccc;
}

Additionally, prefer class selectors over type selectors:

/* Inefficient */
ul {
    margin: 0;
    padding: 0;
}

/* Efficient */
.no-margin {
    margin: 0;
    padding: 0;
}

2. Reduce the Use of Complex Selectors

Complex selectors like descendant or sibling combinators are powerful, but they can be slower to process. Keep your selectors as simple as possible, especially for large or dynamic web pages.

/* Inefficient */
div > p + a {
    color: blue;
}

/* Efficient */
a {
    color: blue;
}

Additional examples:

/* Avoid */
div.container p span {
    font-weight: bold;
}

/* Better */
.container span {
    font-weight: bold;
}

/* Complex sibling selector */
h1 + p {
    margin-top: 10px;
}

/* Simplified */
.intro-paragraph {
    margin-top: 10px;
}

Reducing complexity in selectors helps improve the browser’s rendering speed by minimizing the relationships it needs to compute.

3. Use Media Queries Efficiently

Media queries are essential for creating responsive designs, but inefficient usage can lead to bloated CSS and unnecessary processing. Here’s how to optimize their usage:

Target Only Necessary Elements

Apply media queries only to elements that need to change at specific breakpoints. Avoid wrapping your entire stylesheet in media queries when only a few elements require adjustments.

/* Inefficient: Overusing media queries */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  p {
    line-height: 1.5;
  }
  .container {
    padding: 10px;
  }
}

/* Efficient: Target only necessary elements */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

Combine Related Media Queries

Instead of writing multiple media queries for different elements at the same breakpoint, group them together to reduce redundancy.

/* Inefficient */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}
@media (max-width: 768px) {
  .header {
    width: 100%;
  }
}

/* Efficient */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  .header {
    width: 100%;
  }
}

Use Mobile-First Approach

Start with base styles for smaller screens and add media queries for larger screens. This reduces the number of overrides and ensures better performance on mobile devices.

/* Mobile-first approach */
.container {
  padding: 10px;
}

@media (min-width: 769px) {
  .container {
    padding: 20px;
  }
}

Avoid Overlapping Media Queries

Ensure that your breakpoints do not overlap unnecessarily, as this can cause conflicting styles and make debugging more difficult.

/* Inefficient: Overlapping queries */
@media (max-width: 768px) {
  .text {
    font-size: 14px;
  }
}

@media (max-width: 800px) {
  .text {
    font-size: 13px;
  }
}

/* Efficient: Define non-overlapping breakpoints */
@media (max-width: 768px) {
  .text {
    font-size: 14px;
  }
}

@media (min-width: 769px) and (max-width: 800px) {
  .text {
    font-size: 13px;
  }
}

By following these practices, you can keep your media queries clean and efficient, ensuring better performance and maintainability.

4. Use CSS Shorthands

Shorthand properties allow you to set multiple related properties with a single declaration, reducing the amount of code and improving readability.

This helps streamline your CSS, making it easier to maintain and reducing file size.

/* Inefficient */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

/* Efficient */
margin: 10px 15px;
padding: 5px 10px;

Here’s a more complex example that combines multiple properties into shorthand:

/* Inefficient */
background-color: #3498db;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

/* Efficient */
background: #3498db url('background.jpg') no-repeat center/cover;

Using shorthands like this not only reduces the overall file size but also improves readability by consolidating related properties into a single line.

5. Use CSS Variables (Custom Properties)

CSS variables allow you to store reusable values, such as colors, fonts, and spacing, that can be applied throughout your stylesheet. This not only reduces repetition but also makes it easier to implement global changes by simply updating the variable’s value in one place.

CSS variables are defined within a selector and follow the --variable-name naming convention. They can be scoped globally (using :root) or locally within specific elements.

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
  color: var(--main-color);
}

button {
  background-color: var(--secondary-color);
  color: white;
}

Why Use CSS Variables?

• Consistency: Define values once and apply them across multiple elements.
• Dynamic Updates: Easily update variables using JavaScript for runtime changes (e.g., implementing dark mode).
• Scoped Customization: Override global variables locally within components for custom styling.

Here’s a more complex example demonstrating how CSS variables can be used for theming:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --background-color: #f5f5f5;
}

.dark-theme {
  --primary-color: #1abc9c;
  --secondary-color: #9b59b6;
  --background-color: #333;
}

body {
  background-color: var(--background-color);
  color: var(--primary-color);
}

a {
  color: var(--secondary-color);
}

In this example, switching between themes is as simple as adding or removing the dark-theme class, making your CSS highly flexible and maintainable.

6. Avoid Repetitive CSS

Keep your CSS DRY (Don’t Repeat Yourself) by avoiding repetitive styles and using classes effectively. Reuse styles instead of repeating the same code.

/* Inefficient */
h1 {
  color: #333;
}

h2 {
  color: #333;
}

/* Efficient */
h1, h2 {
  color: #333;
}

By grouping similar elements, you can reduce the amount of code and improve performance.

7. Use Hardware-Accelerated CSS Animations

CSS animations are a powerful tool, but they can be demanding in terms of processing resources. Using properties that trigger hardware acceleration, such as transform and opacity, allows the browser to utilize the Graphics Processing Unit (GPU) instead of the Central Processing Unit (CPU). This improves animation performance and makes it smoother.

Certain properties, like width and height, cause reflow by re-rendering the element and impacting the layout of other elements on the page, which slows down performance. In contrast, properties like transform and opacity only affect the element’s paint layer (repaint), making them more efficient.

/* Efficient animation using transform */
.element {
  transition: transform 0.5s ease;
}

.element:hover {
  transform: translateX(20px);
}

Additional examples of hardware-accelerated animations:

/* Efficient animation using opacity */
.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.fade-in.visible {
  opacity: 1;
}

In this example, we use opacity to create a smooth and efficient “fade-in” effect.

/* Rotation animation using transform */
.spinner {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

This animation creates a continuous spinning effect using transform and hardware acceleration.

Tips for Using Hardware-Accelerated Animations:

• Keep animations short: Long animations can affect user experience and create a sense of slowness.
• Avoid animating properties like margin or padding: These can cause reflow, slowing down performance.
• Use will-change cautiously: This property allows the browser to prepare for upcoming changes, but excessive use can lead to high memory consumption.

8. Load CSS Files Only for Specific Media Queries

To optimize performance, especially for responsive designs, you can load CSS files conditionally based on specific media queries.

This ensures that only the necessary styles are applied for the user’s device or screen size, reducing unnecessary CSS processing and improving load times.

By using the media attribute in the <link> tag, you can specify when a particular CSS file should be loaded:

<link rel="stylesheet" href="styles.css" media="(max-width: 768px)">

In this example, styles.css will only be loaded and applied if the screen width is 768 pixels or less.

You can also load styles for larger screens:

<link rel="stylesheet" href="desktop-styles.css" media="(min-width: 1024px)">

Using JavaScript for Dynamic Media Query Loading

For more control, you can use JavaScript to dynamically load stylesheets based on media queries. This approach is useful when you want to load styles after the initial page load:

// Dynamically load a CSS file for small screens
if (window.matchMedia("(max-width: 768px)").matches) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'mobile-styles.css';
  document.head.appendChild(link);
}

This script checks the screen size and loads mobile-styles.css only if the screen width is 768 pixels or less.

9. Minify CSS

Minifying CSS removes all unnecessary characters, such as spaces, line breaks, and comments, to reduce the file size.

/* Minified CSS */
body{margin:0;padding:0;font-family:Arial,sans-serif;}

Tools like CSSNano or CleanCSS can be used to automatically minify your CSS during your build process.

10. Remove Unused CSS

Tools like PurgeCSS or UnCSS scan your project and remove unused CSS selectors, reducing file size.

npx purgecss --css styles.css --content index.html

This will scan index.html and remove unused styles from styles.css.

11. Load CSS Asynchronously

To prevent render-blocking, you can load non-critical CSS asynchronously or defer it until after the main page content loads.

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

In this example, the stylesheet will load only after the page content has been rendered, improving initial load performance.

Check out the post about Critical CSS and Render-Blocking Resources.

12. Combine and Inline Critical CSS

For above-the-fold content, consider inlining critical CSS directly into your HTML to reduce render-blocking and speed up initial page load.

<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
</style>

For the rest of the CSS, you can load it asynchronously using a deferred <link> tag as shown earlier.

13. Limit Use of @import

The @import rule can cause additional HTTP requests, slowing down your website. Instead, use the <link> tag for including external CSS files.

/* Inefficient */
@import url('styles.css');

/* Efficient */
<link rel="stylesheet" href="styles.css">

Using <link> ensures that your CSS is loaded more efficiently and that the browser can discover all stylesheets in parallel.

14. Use content-visibility for Off-Screen Content

The content-visibility property tells the browser to skip rendering off-screen elements until the user scrolls them into view. This can dramatically reduce initial rendering time on long pages.

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

When you apply content-visibility: auto, the browser automatically applies layout, style, and paint containment to that element. Off-screen sections are rendered with 0px height initially and painted just-in-time as they approach the viewport.

The contain-intrinsic-size property reserves vertical space so the scrollbar does not jump as content is rendered. Without it, users may experience layout shifts.

Browser support is strong: Chrome 85+, Edge 85+, and Safari 18+. Firefox added support in version 125.

FAQs

Common questions about optimizing CSS for performance:

Conclusion

By applying these performance optimization techniques, you can significantly reduce the size and complexity of your CSS, leading to faster load times and improved user experience.

Whether it is minifying CSS, removing unused styles, writing efficient selectors, or leveraging modern properties like content-visibility, these practices will help you build faster, more scalable websites.

For a broader look at website speed, check out the guide on proven strategies to speed up your WordPress site.