How to optimize CSS for performance and reduce render blocking

· Category: HTML & CSS

Short answer

Optimize CSS by minifying files, removing unused styles, inlining critical CSS, and loading non-critical styles asynchronously.

Steps

  1. Audit with Chrome DevTools Coverage and Lighthouse to find unused CSS.
  2. Use tools like PurgeCSS or UnCSS to strip dead code.
  3. Extract above-the-fold critical CSS and inline it in <head>.
  4. Load remaining styles with media="print" swapped via onload, or use rel="preload".
  5. Serve CSS compressed with Brotli or Gzip.

Example

<style>
  /* inlined critical CSS */
  body { margin: 0; font-family: sans-serif; }
  .hero { background: #000; color: #fff; }
</style>
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="non-critical.css" /></noscript>

Tips

  • Prefer modern formats and serve only the CSS needed for the current route.
  • Avoid @import in CSS; it creates sequential blocking requests.
  • Use content-visibility: auto for off-screen sections to reduce rendering work.