Pripojenie zlyhalo. Skúste to prosím znova.

Preskočiť na obsah
SEO Tools
Pomocník a dokumentácia
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

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