Render-blocking CSS eliminated or inlined

A render-blocking stylesheet halts all HTML parsing and painting until the browser has fully downloaded and parsed the CSS file (ISO-25010 time-behaviour). On a 3G connection, a 145 KB uncompressed stylesheet can block rendering for 800–1200ms on its own. Tailwind's JIT output, bundled third-party component libraries, and global reset files are common offenders — they pull in styles for elements that are not in the initial viewport, making the user wait for CSS they do not need until the page scrolls.

Split CSS into critical (above-fold) and non-critical (below-fold). Inline critical styles and load the rest asynchronously in your root <head>:

<!-- Inline critical CSS — keep under 14 KB -->
<style>{criticalCSS}</style>

<!-- Defer non-critical stylesheet -->
<link rel="preload" as="style" href="/styles/non-critical.css"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles/non-critical.css"></noscript>

For print or conditional styles, use media attributes to prevent render blocking:

<link rel="stylesheet" href="/styles/print.css" media="print">

For Tailwind projects, verify your content array in tailwind.config.ts is not too broad — unused class purging is essential to keeping the output small.