Blokiranje upodabljanja
Do blokiranja upodabljanja pride, ko datoteke CSS ali JavaScript preprečijo, da bi spletna stran prikazala vsebino, dokler jih brskalnik popolnoma ne prenese in obdela.
Ko brskalnik nalaga spletno stran, mora najprej razčleniti HTML in zgraditi drevo upodabljanja, preden kaj prikaže. Določeni viri lahko ta proces blokirajo. CSS je privzeto blokiren za upodabljanje, ker brskalnik mora vedeti, kako stilizirati vsebino, preden jo prikaže, prikaz nestilizirane vsebine bi povzročil moteč utrip.
Vir, ki blokira upodabljanje, je glavni vzrok za počasen prvi upodobljeni element (FCP) in največji upodobljeni element (LCP). Čim več takih virov ima stran, dlje uporabniki gledajo v prazen ali delno naložen zaslon.
V praksi
- WordPressova stran je imela 12 blokirnih listov slogov in 8 blokirnih skript, združitev in odložitev teh virov je skrajšala FCP s 4,2 s na 1,1 s.
- E-trgovinska stran je vdelala kritični CSS za zgornji del strani (3 KB) in odložila preostalih 200 KB, kar je omogočilo takojšen prikaz strani, medtem ko se je preostala vsebina nalagala v ozadju.
- Korporativna spletna stran je vse analitične in marketinške skripte premaknila na odloženo/asinhrono nalaganje in izboljšala oceno zmogljivosti Lighthouse s 42 na 78.
- Enostranska aplikacija je v glavni skriptni paket dodala atribut async, vrtilni indikator nalaganja pa se je pojavil 2 sekundi prej, kar je drastično izboljšalo zaznano hitrost.
Niste prepričani, kako se to nanaša na vas?
Senior inženir obišče vašo lokacijo, vašo prisotnost v iskalnikih in način, kako prispeta povpraševanja, nato zapiše tri stvari, ki jih je vredno najprej popraviti. Dokument lahko obdržite v vsakem primeru.