Performance optimization recommendations

CSS performance optimization is key to improving webpage loading speed and rendering efficiency. Reasonable CSS coding standards can reduce the time spent on style calculations and layout repaints, thereby enhancing user experience. Here are some practical performance optimization recommendations.

Reduce Selector Complexity

Overly complex selectors increase the time the browser takes to match styles. Use simple selectors whenever possible and avoid multi-level nesting.

/* Not recommended */
div.container > ul.list > li.item > a.link {
  color: blue;
}

/* Recommended */
.link {
  color: blue;
}

Avoid Universal Selectors

The universal selector (*) matches all elements, leading to performance degradation. Use it sparingly and limit its scope when necessary.

/* Not recommended */
* {
  margin: 0;
  padding: 0;
}

/* Recommended */
body, h1, p {
  margin: 0;
  padding: 0;
}

Use Efficient Properties

Certain CSS properties (e.g., box-shadow, border-radius) trigger repaints and reflows, impacting performance. Minimize their use or optimize their values.

/* Not recommended */
.box {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Recommended */
.box {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Avoid @import

@import blocks page loading, causing rendering delays. Use <link> tags instead.

<!-- Not recommended -->
<style>
  @import url("styles.css");
</style>

<!-- Recommended -->
<link rel="stylesheet" href="styles.css">

Minify and Combine CSS Files

Reducing HTTP requests and file size significantly improves performance. Use tools like Webpack or Gulp to minify and merge CSS files.

# Use Webpack plugin to minify CSS
npm install css-minimizer-webpack-plugin --save-dev

Optimize Animations with will-change

The will-change property informs the browser in advance about which properties will change, optimizing rendering performance.

.element {
  will-change: transform, opacity;
  transition: transform 0.3s ease;
}

Avoid Frequent Style Manipulations

Directly modifying DOM element styles triggers repaints and reflows. Prefer updating styles by changing class names in bulk.

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

// Recommended
element.classList.add("resized");

.resized {
  width: 100px;
  height: 100px;
}

Use Flexbox or Grid Layout

Modern layout methods like Flexbox and Grid are more efficient than traditional float layouts, reducing unnecessary calculations.

/* Not recommended */
.container {
  overflow: hidden;
}
.item {
  float: left;
  width: 33.33%;
}

/* Recommended */
.container {
  display: flex;
}
.item {
  flex: 1;
}

Minimize Repaints and Reflows

Repaints and reflows are performance bottlenecks. Avoid frequently reading layout properties (e.g., offsetHeight) in JavaScript, or optimize animations with requestAnimationFrame.

// Not recommended
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = elements[i].offsetWidth + 10 + "px";
}

// Recommended
function resizeElements() {
  requestAnimationFrame(() => {
    for (let i = 0; i < elements.length; i++) {
      elements[i].style.width = elements[i].offsetWidth + 10 + "px";
    }
  });
}

Use CSS Variables

CSS variables (custom properties) reduce code duplication and improve maintainability, but be mindful of their performance impact.

:root {
  --primary-color: #3498db;
}

.button {
  background-color: var(--primary-color);
}

Optimize Font Loading

For large font files, use font-display: swap to avoid rendering blocks, or preload critical fonts.

@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: swap;
}

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Avoid Unnecessary Media Queries

Excessive media queries increase style calculation complexity. Merge or simplify conditions where possible.

/* Not recommended */
@media (min-width: 600px) {
  .box { width: 50%; }
}
@media (min-width: 900px) {
  .box { width: 33.33%; }
}

/* Recommended */
@media (min-width: 600px) {
  .box { width: 50%; }
  @media (min-width: 900px) {
    .box { width: 33.33%; }
  }
}

Leverage Hardware Acceleration

Using transform and opacity for animated elements triggers GPU acceleration, improving performance.

.animate {
  transform: translateZ(0);
  transition: transform 0.3s ease;
}

Reduce Pseudo-Element Usage

Pseudo-elements (e.g., ::before, ::after) add rendering overhead. Avoid overusing them.

/* Not recommended */
.button::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
}

/* Recommended */
.button-icon {
  width: 10px;
  height: 10px;
}