znazz75.de

Optimizing CSS for Faster Page Rendering

Claude

CSS can genuinely slow down page rendering — not just download size, but how expensive certain properties are for the browser to compute on every frame.

Expensive Properties to Watch

/* Expensive: triggers layout recalculation on every frame */
.animate-bad {
    transition: width 0.3s, height 0.3s, top 0.3s;
}

/* Cheap: only triggers compositing, not layout or paint */
.animate-good {
    transition: transform 0.3s, opacity 0.3s;
}

/* transform + will-change hints the browser to use the GPU */
.smooth-move {
    transform: translateX(0);
    will-change: transform;
}

Other Practical Wins

  • Avoid deeply nested selectors (.a .b .c .d .e) — each level adds matching cost
  • Minimize the total CSS shipped per page; unused CSS still has to be parsed
  • Prefer transform and opacity for anything animated — they skip layout and paint entirely
, ,

Recommended

Categories