Blokování vykreslování
Blokování vykreslování nastává, když soubory CSS nebo JavaScript brání zobrazení obsahu webové stránky, dokud nejsou zcela staženy a zpracovány prohlížečem.
Když prohlížeč načítá webovou stránku, musí zpracovat HTML a sestavit renderovací strom, než cokoli zobrazí. Určité zdroje mohou tento proces blokovat. CSS blokuje vykreslování ve výchozím nastavení, protože prohlížeč potřebuje vědět, jak obsah nastylovat, než jej zobrazí, zobrazení nenastylovaného obsahu by způsobilo rušivé bliknutí.
Zdroje blokující vykreslování jsou hlavní příčinou pomalého First Contentful Paint (FCP) a Largest Contentful Paint (LCP). Čím více zdrojů blokujících vykreslování stránka má, tím déle se uživatelé dívají na prázdnou nebo částečně načtenou obrazovku.
V praxi
- Web na WordPressu měl 12 stylů blokujících vykreslování a 8 blokujících skriptů, jejich sloučením a odložením se FCP zkrátil ze 4,2 sekundy na 1,1 sekundy
- E-shop vložil své kritické CSS pro obsah nad ohybem (3 KB) přímo do HTML a odložil zbývajících 200 KB, takže se stránka zobrazila okamžitě, zatímco zbytek se načítal na pozadí
- Firemní web přesunul všechny analytické a marketingové skripty do defer/async a zlepšil své skóre výkonu v Lighthouse ze 42 na 78
- Jednostránková aplikace přidala atribut async ke svému hlavnímu bundle skriptu a načítací indikátor se objevil o 2 sekundy dříve, což výrazně zlepšilo vnímanou rychlost
Nejste si jistí, jak se to týká vás?
Zkušený inženýr projde váš web, vaši viditelnost ve vyhledávání a způsob, jakým se k vám dostávají poptávky, a poté sepíše tři věci, které je vhodné opravit jako první. Dokument si ponecháte tak jako tak.