# Render-blocking CSS eliminated or inlined - **Pattern:** `ab-001998` (`performance-core.loading-resource-priority.render-blocking-css`) - **Severity:** high - **Lifecycle:** active - **Last modified:** 2026-04-18 - **Canonical URL:** https://auditbuffet.com/patterns/ab-001998 - **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001998) ## Why it matters 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. ## Severity rationale High because render-blocking CSS directly delays First Contentful Paint and LCP, and the penalty scales with file size and network conditions. ## Remediation Split CSS into critical (above-fold) and non-critical (below-fold). Inline critical styles and load the rest asynchronously in your root ``: ```html ``` For print or conditional styles, use `media` attributes to prevent render blocking: ```html ``` 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. ## Detection - **ID:** `render-blocking-css` - **Severity:** `high` - **What to look for:** Count all relevant instances and enumerate each. Check HTML source for `` tags without `media` attributes or with `media="all"` or `media="screen"`. These block rendering. Also check for embedded ` ``` Or use `media` attributes for print or non-essential styles: ```html ``` ## External references - iso-25010 performance-efficiency.time-behaviour Taxons: performance HTML version: https://auditbuffet.com/patterns/ab-001998