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

FCP First Contentful Paint

Okamžik, kdy se na stránce objeví první viditelný obsah (text, obrázek, SVG). Indikátor vnímané rych...

LCP Largest Contentful Paint

Doba, za jakou se vykreslí největší viditelný prvek na stránce (typicky hero obrázek nebo hlavní nad...

Zpět na slovník

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