Critical CSS
Stručně
CSS nutné pro renderování above-the-fold obsahu. Inlinováno v <head> pro eliminaci render-blocking.
Detail a kontext
Critical CSS je minimální set CSS rules potřebných pro vykreslení viditelné části stránky (above-the-fold) bez čekání na external stylesheet. Implementace: 1) extract critical CSS (Penthouse, Critical, CriticalCSS), 2) inline do <style> v <head>, 3) full CSS loaduje async přes <link rel="preload" as="style" onload="this.rel=stylesheet">. Výsledek: 40–60 % rychlejší FCP a LCP. Trade-off: HTML je větší (3–10 KB extra inline CSS), ale eliminuje render-blocking request. Best practice: cca 14 KB inline CSS (TCP slow-start initial congestion window), rest async. Pro modern Tailwind workflow: pre-compute critical utilities (container, flex, grid, base utility classes pro hero/header).
Související pojmy
Potřebujete pomoci s tímto pojmem v praxi?
Naučit se teorii je první krok. Implementovat ji efektivně už chce zkušenost. Pojďme se o tom pobavit.
Napište mi