CSS-ul critic e una dintre acele optimizări care arată simplu pe slide și brutal în practică. Ideea e directă: extragi stilurile necesare pentru a picta above-the-fold, le inlinezi în head-ul documentului și lași restul să se încarce asincron. Compromisul e că acum ai două copii ale fiecărei reguli above-the-fold și un build step care trebuie să știe ce înseamnă 'above-the-fold'.
Pentru un site one-page Next.js, calculul se schimbă. Hero-ul este întregul viewport above-the-fold. Selectoarele care îl stilizează sunt previzibile. Nu ai nevoie de un browser headless ca să-ți dai seama ce reguli să extragi — ai nevoie de un allowlist scurt, lucrat manual, și de un build hook care emite un singur stylesheet inline.
Pattern-ul care a funcționat pentru noi: un plugin PostCSS de cinci linii care parcurge app/globals.css + app/design2.css, păstrează orice regulă al cărei selector se potrivește cu .hero, .nav, .container, :root, html, body, și aruncă rezultatul ca tag <style> în head. Restul se încarcă prin <link> normal. First Contentful Paint a scăzut cu 180 ms pe un cache rece.