Čo je Critical CSS?
Critical CSS je technika extrakcie a inline vloženia CSS pravidiel potrebných na vykreslenie viditeľnej časti stránky (above the fold). Zvyšný CSS sa načíta asynchrónne. Eliminuje render-blocking CSS a výrazne zrýchľuje prvé vykreslenie stránky.
Definícia Critical CSS
Čo je Critical CSS
Critical CSS (po slovensky kritické CSS) je optimalizačná technika, ktorá identifikuje a extrahuje CSS pravidlá potrebné na vykreslenie obsahu viditeľného bez scrollovania (anglicky above the fold). Tieto pravidlá sa vložia priamo do <head> elementu HTML stránky ako inline <style> blok, čím sa eliminuje nutnosť čakať na stiahnutie externého CSS súboru.
Prečo je Critical CSS dôležité
CSS súbory sú v prehliadači render-blocking zdroje — prehliadač nezobrazí žiadny obsah, kým nestiahne a nespracuje všetky CSS súbory:
- Bez Critical CSS — prehliadač čaká na stiahnutie celého CSS (často 50-200 kB), aj keď na vykreslenie viditeľnej časti potrebuje len 5-15 kB
- S Critical CSS — kritické pravidlá sú inline v HTML a prehliadač vykreslí viditeľnú časť okamžite. Zvyšný CSS sa načíta asynchrónne na pozadí
Nástroje na generovanie Critical CSS
- Critical — Node.js nástroj od Addy Osmaniho z Google
- Penthouse — generátor critical CSS s headless Chrome
- Critters — webpack plugin pre inline critical CSS (používaný v Angular)
Moderné frameworky ako Next.js riešia Critical CSS automaticky — CSS moduly a Tailwind CSS sú optimalizované na úrovni frameworku.
Praktický príklad
Príklad: Blog s externým CSS súborom o veľkosti 85 kB. Na prvé vykreslenie (nadpis, navigácia, úvodný odsek) je potrebných len 4 kB CSS pravidiel.
Bez Critical CSS prehliadač čaká na stiahnutie celých 85 kB — na pomalšom pripojení to trvá 800 ms, počas ktorých používateľ vidí bielu obrazovku.
Po implementácii sa 4 kB kritických pravidiel vloží inline do HTML. Prehliadač vykreslí stránku okamžite po prijatí HTML. Zvyšných 81 kB CSS sa stiahne asynchrónne. First Contentful Paint sa zlepší z 1,2 s na 0,4 s.
Často kladené otázky
Čo je Critical CSS?
Critical CSS je technika, pri ktorej sa CSS pravidlá potrebné na vykreslenie viditeľnej časti stránky vložia priamo do HTML ako inline štýly. Zvyšný CSS sa načíta asynchrónne. Výrazne to zrýchľuje prvé vykreslenie stránky.
Ako zistím, ktoré CSS pravidlá sú kritické?
Manuálne je to takmer nemožné. Používajú sa automatizované nástroje (Critical, Penthouse), ktoré otvoria stránku v headless prehliadači, identifikujú viditeľnú oblasť a extrahujú CSS pravidlá, ktoré sa na ňu aplikujú.
Rieši Next.js Critical CSS automaticky?
Next.js optimalizuje CSS automaticky — CSS moduly sa extrahujú a minimalizujú, Tailwind CSS sa purguje na minimálnu veľkosť. Aj keď to nie je klasické Critical CSS, výsledný efekt je podobný — minimálny CSS pre každú stránku.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.