Blokovanie vykresľovania
Blokovanie vykresľovania nastáva, keď súbory CSS alebo JavaScript bránia zobrazeniu obsahu webovej stránky, kým nie sú úplne stiahnuté a spracované prehliadačom.
Keď prehliadač načíta webovú stránku, musí parsovať HTML a zostaviť strom vykresľovania predtým, než zobrazí čokoľvek. Určité zdroje môžu tento proces blokovat'. CSS je predvolene blokujúce vykresľovanie, pretože prehliadač musí vedieť, ako obsah štýlovať, než ho zobrazí, zobrazenie neštýlovaného obsahu by spôsobilo rušivý blik.
Zdroje blokujúce vykresľovanie sú hlavnou príčinou pomalého First Contentful Paint (FCP) a Largest Contentful Paint (LCP). Čím viac zdrojov blokujúcich vykresľovanie stránka má, tým dlhšie sa používatelia pozerajú na prázdnu či čiastočne načítanú obrazovku.
V praxi
- WordPress stránka mala 12 blokujúcich stylesheets a 8 blokujúcich skriptov, ich konsolidácia a odkladanie znížilo FCP z 4,2 sekundy na 1,1 sekundy
- E-shop vložil kritický CSS nad záhybom (3 KB) a odkladal zvyšných 200 KB, čím umožnil okamžité zobrazenie stránky, zatiaľ čo zvyšok sa načítaval na pozadí
- Korporátna stránka presunula všetky analytické a marketingové skripty do odkladania/asynchrónneho režimu a zlepšila svoje skóre Lighthouse z 42 na 78
- Jednostránková aplikácia pridala atribút async na svoj hlavný balík skriptov a spinner načítania sa objavil o 2 sekundy skôr, čo dramaticky zlepšilo vnímanú rýchlosť
Nie ste si istí, či sa to týka aj vás?
Senior inžinier prejde vaše stránky, vašu prítomnosť vo vyhľadávaní a spôsob, akým dotazy k vám prichádzajú, a potom zapíše tri veci, ktoré sa oplatí opraviť ako prvé. Dokument si necháte v každom prípade.