Blokiranje renderiranja
Blokiranje renderiranja događa se kada CSS ili JavaScript datoteke sprječavaju prikazivanje sadržaja web stranice dok se one u potpunosti ne preuzmu i obrade u pregledniku.
Kada preglednik učitava web stranicu, mora parsirati HTML i izraditi stablo renderiranja prije nego što prikaže bilo što. Određeni resursi mogu blokirati ovaj proces. CSS je prema zadanim postavkama blokiran renderiranjem jer preglednik mora znati kako stilizirati sadržaj prije njegovog prikaza, prikaz nestiliziranog sadržaja izazvao bi oštar bljesak.
Resursi koji blokiraju renderiranje glavni su uzrok sporog First Contentful Paint (FCP) i Largest Contentful Paint (LCP). Što više resursa koji blokiraju renderiranje stranica ima, duže korisnici gledaju prazan ili djelomično učitani zaslon.
U praksi
- WordPress stranica imala je 12 render-blokirajućih stilskih listova i 8 blokirajućih skripti, njihovo konsolidiranje i odgađanje smanjilo je FCP s 4,2 sekunde na 1,1 sekundu
- E-trgovina je inline-irala svoj kritični CSS za sadržaj vidljiv bez pomicanja (3 KB) i odgodila preostalih 200 KB, omogućujući da se stranica odmah prikaže dok se ostalo učitava u pozadini
- Korporativna web stranica premjestila je sve analitičke i marketinške skripte na defer/async i poboljšala svoj Lighthouse rezultat performansi s 42 na 78
- Jednostavnica aplikacija dodala je async atribut svojoj glavnoj skripti paketa, a spinner za učitavanje pojavio se 2 sekunde ranije, dramatično poboljšavajući percipiranu brzinu
Niste sigurni kako se ovo odnosi na vas?
Senior inženjer pregledava vašu web stranicu, vašu prisutnost u pretraživanju i način na koji upiti dolaze do vas, a zatim bilježi tri stvari vrijedne popravka prvo. Dokument zadržavate u svakom slučaju.