# Critical CSS is inlined or render-blocking CSS is eliminated - **Pattern:** `ab-001789` (`marketing-page-speed.resource-optimization.critical-css-inlined`) - **Severity:** high - **Lifecycle:** active - **Last modified:** 2026-04-18 - **Canonical URL:** https://auditbuffet.com/patterns/ab-001789 - **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001789) ## Why it matters Every external `` in `` adds at minimum one additional network round-trip before the browser can render a single pixel — this is the definition of a render-blocking resource as measured by ISO-25010 time-behaviour. On a 4G connection, one round-trip is approximately 80–120ms; three blocking stylesheets add 240–360ms to FCP before any page content appears. This is distinct from CSS file weight: even a 1KB external stylesheet blocks paint if it's in `` without a non-blocking loading pattern. Marketing pages accumulate these most often from third-party widget CSS (chat, cookie consent, marketing pixels) pasted in verbatim from vendor documentation. ## Severity rationale High because each render-blocking stylesheet in `` adds a full network round-trip to FCP regardless of the file's size, making this a pure latency tax with no user benefit. ## Remediation Load non-critical CSS asynchronously using the print-media trick, or eliminate external stylesheets entirely by inlining critical CSS through your framework. ```html ``` For Next.js projects: import CSS in component files rather than via `` tags — Next.js inlines critical CSS into `