Rychlost Vysoký dopad Náročné 1–3 h

Omezení blokujícího CSS

Velké CSS v hlavičce zdržuje vykreslení.

Co to je

CSS je ve výchozím stavu blokující: prohlížeč nevykreslí nic, dokud nestáhne a nezpracuje styly. Velké nebo četné CSS soubory tak oddalují první obraz stránky.

Proč to řešit

Načítání jednoho velkého CSS pro celý web zdržuje i jednoduchou stránku. Optimalizace přímo zlepšuje LCP a vnímanou rychlost.

Jak na to

1Vyextrahuj „critical CSS" pro viditelnou část a vlož ho inline do <head>.
2Zbytek CSS načti asynchronně (media="print" trik nebo rel="preload" + onload).
3Odstraň nepoužívané styly (PurgeCSS / nástroj Coverage v devtools).
4Rozděl CSS po stránkách/komponentách místo jednoho monolitu.

Asynchronní načtení nekritického CSS

Správně

<link rel="preload" href="/css/styly.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styly.css"></noscript>

Závěr

Critical CSS inline + zbytek asynchronně je nejúčinnější vzorec proti blokujícímu CSS. Je to náročnější úprava, ale u pomalých webů přináší výrazné zrychlení prvního vykreslení. Ulehčí ti ji moderní build nástroje a frameworky.

Související témata