Rodymo blokavimas
Rodymo blokavimas atsiranda tada, kai CSS arba JavaScript failai neleidžia naršyklei rodyti turinio, kol jie nėra visiškai atsisiųsti ir apdoroti.
Kai naršyklė krauna tinklalapį, ji turi išanalizuoti HTML kodą ir sukurti rodymo medį prieš rodydama bet kokį turinį. Tam tikri resursai gali blokuoti šį procesą. CSS pagal nutylėjimą blokuoja turinio rodymą, nes naršyklei reikia žinoti, kaip suformuoti stilių, prieš rodydama turinį, nestiluoto turinio rodymas sukeltų staigų vizualinį šuolį.
Resursai, blokuojantys turinio rodymą, yra pagrindinė lėto pirmojo turinio nupiešimo (FCP) ir didžiausio turinio nupiešimo (LCP) priežastis. Kuo daugiau tokių resursų turi puslapis, tuo ilgiau vartotojai žiūri į tuščią arba dalinai įkeltą ekraną.
Praktikoje
- WordPress svetainėje buvo 12 blokuojančių stiliumų ir 8 blokuojantys skriptai, jų konsolidavimas ir atidėjimas FCP laiką sumažino nuo 4,2 sek. iki 1,1 sek.
- El. prekybos svetainė įterpė kritinį viršutinio ekrano CSS (3 KB) ir atidėjo likusius 200 KB, leisdama puslapiui atsirasti iškart, o likusiems elementams krautis fone
- Korporacinė svetainė visus analitikos ir rinkodaros skriptus perkėlė į atidėtus/async ir pagerino Lighthouse našumo balą nuo 42 iki 78
- Vieno puslapio programa (SPA) pridėjo async atributą savo pagrindiniam rinkinio skriptui, dėl ko krovinio indikatorius atsirado 2 sekundėmis anksčiau, dramatiškai pagerindamas subjektyvų greitį
Daugiau apie: Veikimas
Neaišku, kaip tai taikoma Jums?
Vyresnysis inžinierius apžiūrės Jūsų svetainę, paieškos pozicijas ir užklausų gavimo būdą, tada užrašys tris dalykus, kuriuos verta pataisyti pirmiausia. Dokumentą paliekate sau.