Rýchlosť Vysoký dopad Stredné 30–60 min

Blokujúce zdroje (render-blocking)

CSS a JS v hlavičke, ktoré brzdia prvé vykreslenie.

Čo to je

Render-blocking zdroje sú súbory (typicky CSS a synchrónny JS v <head>), ktoré musí prehliadač stiahnuť a spracovať skôr, než vykreslí obsah. Dovtedy vidí používateľ prázdno.

Prečo to riešiť

Sú najčastejšia príčina pomalého prvého vykreslenia a zlého LCP. Čím viac ich je a čím väčšie sú, tým dlhšie trvá, kým sa objaví obsah.

Ako na to

1Skripty odlož cez defer/async.
2Identifikuj „critical CSS“ (štýly pre viditeľnú časť) a vlož ich inline, zvyšok načítaj asynchrónne.
3Zlúč a minifikuj CSS/JS súbory, odstráň nepoužívané štýly.
4Externé fonty načítavaj s font-display: swap a prednačítaj ich.

Záver

Cieľom je doručiť viditeľný obsah čo najskôr a všetko ostatné odložiť. Začni odložením skriptov (rýchla výhra) a optimalizáciou CSS (critical CSS). Táto oblasť má priamy dopad na LCP, metriku, ktorú Google sleduje.

Súvisiace témy