Renderelést blokkoló erőforrások
Renderelést blokkolás akkor fordul elő, amikor a CSS- vagy JavaScript-fájlok megakadályozzák, hogy a weboldal megjelenítse a tartalmat, amíg a böngésző teljesen le nem tölti és fel nem dolgozza azokat.
Amikor a böngésző betölt egy weboldalt, először fel kell dolgoznia a HTML-t, és fel kell építenie egy renderelési fát, mielőtt bármit megjelenítene. Bizonyos erőforrások blokkolhatják ezt a folyamatot. A CSS alapértelmezés szerint renderelést blokkoló, mert a böngészőnek tudnia kell, hogyan stílusozza a tartalmat, mielőtt megjeleníti, a stílus nélküli tartalom megjelenítése zavaró villanást okozna.
A renderelést blokkoló erőforrások a lassú First Contentful Paint (FCP) és Largest Contentful Paint (LCP) elsődleges okai. Minél több renderelést blokkoló erőforrás van egy oldalon, annál tovább bámulják a felhasználók az üres vagy részben betöltött képernyőt.
A gyakorlatban
- Egy WordPress-webhelyen 12 renderelést blokkoló stíluslap és 8 blokkoló szkript volt, ezek összevonása és elhalasztása 4,2 másodpercről 1,1 másodpercre csökkentette az FCP-t
- Egy e-kereskedelmi webhely beágyazta a kritikus hajtás feletti CSS-ét (3 KB), és elhalasztotta a fennmaradó 200 KB-ot, így az oldal azonnal megjelent, míg a többi a háttérben töltődött be
- Egy vállalati webhely az összes analitikai és marketing szkriptet defer/async módba helyezte, és a Lighthouse teljesítménypontszámát 42-ről 78-ra javította
- Egy egyoldalas alkalmazás async attribútumot adott a fő csomagszkriptjéhez, és a betöltésjelző 2 másodperccel korábban jelent meg, ami drámaian javította az érzékelt sebességet
Nem biztos benne, hogy ez hogyan vonatkozik Önre?
Egy vezető mérnök bejárja az Ön webhelyét, keresési jelenlétét és azt, ahogyan a megkeresések eljutnak Önhöz, majd leírja az elsőként javítandó három dolgot. A dokumentumot mindenképpen megtartja.