Critical CSS is inlined or render-blocking CSS is eliminated

Every external <link rel="stylesheet"> in <head> 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 <head> 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.

Load non-critical CSS asynchronously using the print-media trick, or eliminate external stylesheets entirely by inlining critical CSS through your framework.

<!-- Before — blocks all rendering -->
<link rel="stylesheet" href="/styles/widget.css" />

<!-- After — loads non-blocking, applies when done -->
<link rel="stylesheet" href="/styles/widget.css"
      media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="/styles/widget.css" /></noscript>

For Next.js projects: import CSS in component files rather than via <link> tags — Next.js inlines critical CSS into <style> blocks in the HTML automatically, eliminating the extra round-trip. Verify this is working by checking the <head> in next build output for inline <style> blocks rather than <link> tags.