CSS performance optimization strategies

CSS performance optimization is a key factor in improving webpage loading speed and user experience. Proper optimization strategies can reduce render blocking, decrease file size, and enhance code efficiency, thereby enabling faster page rendering and smoother operation.

Reduce Selector Complexity

CSS selectors are matched from right to left, and overly complex selectors increase the browser's computational load. For example:

/* Not recommended: Too deeply nested and overly specific */
body div#main .content ul li a:hover { 
  color: red;
}

/* Recommended: Simplified selector */
.content-link:hover {
  color: red;
}

Optimization principles:

1. Avoid nesting beyond 3 levels
2. Minimize the use of universal selectors (*)
3. Prefer class selectors over tag or ID selectors
4. Avoid using attribute selectors for frequent matching

Compress and Merge CSS Files

Reduce CSS file size using tools:

• Use CSS minification tools (e.g., cssnano, clean-css)
• Merge multiple CSS files to reduce HTTP requests
• Enable server-side Gzip compression

# Example using cssnano for minification
npm install cssnano -g
cssnano input.css output.css

Avoid Using @import

@import causes serial loading and blocks page rendering:

/* Not recommended */
@import url("header.css");
@import url("footer.css");

/* Recommended: Use <link> tags for parallel loading */
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="footer.css">

Use CSS Sprites

Reduce image HTTP requests:

.icon {
  background-image: url("sprites.png");
  background-position: -20px -30px;
  width: 16px;
  height: 16px;
}

Leverage GPU Acceleration

Enable hardware acceleration for animated elements:

.animate-element {
  transform: translateZ(0);
  will-change: transform;
}

Notes:

• Avoid overusing will-change
• Apply only to elements that truly need animation
• Consider removing related properties after animation ends

Minimize Reflows and Repaints

CSS properties vary in their impact on rendering performance:

/* Properties triggering reflow (high performance cost) */
element.style.width = "100px";
element.style.height = "100px";

/* Properties triggering only repaint (better performance) */
element.style.color = "red";
element.style.backgroundColor = "blue";

/* Best practice: Use transform and opacity */
element.style.transform = "scale(1.2)";
element.style.opacity = "0.5";

Use CSS Variables Instead of Preprocessor Variables

Native CSS variables offer better performance:

:root {
  --primary-color: #4285f4;
  --spacing-unit: 8px;
}

.button {
  color: var(--primary-color);
  padding: var(--spacing-unit);
}

Optimize Media Queries

Load CSS resources on demand:

<link rel="stylesheet" media="(max-width: 600px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 601px)" href="desktop.css">

Remove Unused CSS

Detect and remove unused CSS with tools:

• PurgeCSS
• UnCSS
• Chrome DevTools Coverage tool

// PurgeCSS configuration example
module.exports = {
  content: ["*.html"],
  css: ["*.css"]
};

Use the contain Property to Limit Rendering Scope

.widget {
  contain: layout paint style;
}

Preload Critical CSS

<link rel="preload" href="critical.css" as="style">

Avoid Expensive CSS Properties

Some CSS properties trigger full-page reflows:

/* Expensive properties */
element.style.fontFamily = "Arial";
element.style.boxShadow = "10px 10px 5px #888";

/* Relatively inexpensive properties */
element.style.opacity = "0.5";
element.style.transform = "rotate(5deg)";

Use CSS Grid and Flexbox Instead of Traditional Layouts

Modern layout methods offer better performance:

/* Traditional layout (poorer performance) */
.float-layout {
  float: left;
  width: 30%;
  margin-right: 3%;
}

/* Modern layout (better performance) */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Optimize Font Loading

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap; /* Avoid font loading blocking rendering */
}

Minimize Pseudo-Element Usage

Excessive pseudo-elements increase DOM complexity:

/* Not recommended: Overusing pseudo-elements */
.button::before, .button::after {
  content: "";
  display: block;
  position: absolute;
  /* Multiple style declarations */
}

/* Recommended: Use only when necessary */
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  /* Necessary styles */
}

Use CSS Instead of JavaScript for Animations

/* Not recommended: JavaScript-based animation */
element.animate({ opacity: [0, 1] }, 1000);

/* Recommended: CSS animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in-out;
}

Layer Rendering Strategy

.layer-1 {
  z-index: 1;
  will-change: transform;
}

.layer-2 {
  z-index: 2;
  contain: strict;
}

Use CSS Containment

.isolated-component {
  contain: content;
}

Avoid Frequent Style Modifications

Batch process style changes:

// Not recommended
element.style.width = "100px";
element.style.height = "200px";
element.style.margin = "10px";

// Recommended: Use class or cssText
element.classList.add("new-style");
// Or
element.style.cssText = "width:100px;height:200px;margin:10px;";

CSS Implementation for Responsive Images

.responsive-image {
  background-image: url("small.jpg");
}

@media (min-resolution: 2dppx) {
  .responsive-image {
    background-image: url("large.jpg");
  }
}

Use CSS Masks Instead of Images

.icon {
  background-color: currentColor;
  mask-image: url("icon.svg");
  mask-repeat: no-repeat;
}

Optimize Shadow Effects

/* Not recommended: Excessive blur radius */
box-shadow: 0 0 20px rgba(0,0,0,0.5);

/* Recommended: Control shadow parameters appropriately */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

Minimize Filter Usage

/* Expensive filter effects */
.filter-heavy {
  filter: blur(5px) drop-shadow(5px 5px 5px #000);
}

/* Better-performing alternatives */
.filter-optimized {
  opacity: 0.9;
  transform: translate3d(5px, 5px, 0);
}

Use CSS Scroll Snap

Optimize scrolling performance:

.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.scroll-item {
  scroll-snap-align: start;
}

Optimize Print Styles

@media print {
  .no-print {
    display: none;
  }
  
  body {
    background: none;
    color: black;
    font-size: 12pt;
  }
}

Use CSS Variables for Theme Switching

:root {
  --primary: #4285f4;
  --text: #333;
}

[data-theme="dark"] {
  --primary: #34a853;
  --text: #fff;
}

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

Avoid Using Expressions

/* Not recommended: CSS expressions */
width: expression(document.body.clientWidth > 800 ? "800px" : "auto");

/* Recommended: Use media queries */
@media (min-width: 800px) {
  .element {
    width: 800px;
  }
}

Use CSS Instead of Images

/* Not recommended */
background: url("gradient.jpg");

/* Recommended */
background: linear-gradient(to right, #ff9966, #ff5e62);

Optimize Table Layouts

table {
  table-layout: fixed; /* Improves rendering performance */
  width: 100%;
}

Use content-visibility

.long-list {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

Minimize z-index Usage

/* Not recommended: Arbitrarily high z-index values */
.modal {
  z-index: 9999;
}

/* Recommended: Establish a z-index layering system */
:root {
  --z-base: 1;
  --z-overlay: 10;
  --z-modal: 100;
}

.modal {
  z-index: var(--z-modal);
}

Use CSS Instead of SVG Icons

.menu-icon {
  width: 24px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
}

.menu-icon::before {
  top: -8px;
}

.menu-icon::after {
  top: 8px;
}