Rýchlosť Vysoký dopad Náročné 1–3 h

Obmedzenie blokujúceho CSS

Veľké CSS v hlavičke zdržuje vykreslenie.

Čo to je

CSS je vo východiskovom stave blokujúce: prehliadač nevykreslí nič, kým nestiahne a nespracuje štýly. Veľké alebo početné CSS súbory tak odkladajú prvý obraz stránky.

Prečo to riešiť

Načítanie jedného veľkého CSS pre celý web zdržuje aj jednoduchú stránku. Optimalizácia priamo zlepšuje LCP a vnímanú rýchlosť.

Ako na to

1Vyextrahuj „critical CSS“ pre viditeľnú časť a vlož ho inline do <head>.
2Zvyšok CSS načítaj asynchrónne (media="print" trik alebo rel="preload" + onload).
3Odstráň nepoužívané štýly (PurgeCSS / nástroj Coverage v devtools).
4Rozdeľ CSS po stránkach/komponentoch namiesto jedného monolitu.

Asynchrónne načítanie nekritického CSS

Správne

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

Záver

Critical CSS inline + zvyšok asynchrónne je najúčinnejší vzorec proti blokujúcemu CSS. Je to náročnejšia úprava, ale pri pomalých weboch prináša výrazné zrýchlenie prvého vykreslenia. Uľahčia ti ju moderné build nástroje a frameworky.

Súvisiace témy