Připojení selhalo. Zkuste to prosím znovu.

Přeskočit na obsah
SEO Tools
Nápověda a dokumentace
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

  1. 1Vyextrahuj „critical CSS" pro viditelnou část a vlož ho inline do <head>.
  2. 2Zbytek CSS načti asynchronně (media="print" trik nebo rel="preload" + onload).
  3. 3Odstraň nepoužívané styly (PurgeCSS / nástroj Coverage v devtools).
  4. 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