Renderöinnin esto
Renderöinnin esto tapahtuu, kun CSS- tai JavaScript-tiedostot estävät verkkosivun näyttämästä sisältöä, kunnes ne on ladattu ja käsitelty täysin selaimessa.
Kun selain lataa verkkosivun, sen on purettava HTML ja rakennettava renderipuu ennen minkään sisällön näyttämistä. Tietyt resurssit voivat estää tämän prosessin. CSS on oletuksena renderöintiä estävä, koska selaimen on tiedettävä, miten sisältöä tyylistetään ennen sen näyttämistä, tyylistämättömän sisällön näyttäminen aiheuttaisi häiritsevän välähdyksen.
Renderöintiä estävät resurssit ovat hitaan First Contentful Paint (FCP) ja Largest Contentful Paint (LCP) pääasiallinen syy. Mitä enemmän renderöintiä estäviä resursseja sivulla on, sitä kauemmin käyttäjät tuijottavat tyhjää tai osittain ladattua ruutua.
Käytännössä
- WordPress-sivustolla oli 12 renderöintiä estävää tyyliarkkia ja 8 estävää skriptiä, konsolidointi ja viivyttäys vähensi FCP-arvoa 4,2 sekunnista 1,1 sekuntiin
- Verkkokauppa inline-käytti kriittisen yläpuolisen CSS:n (3 KB) ja viivytti jäljellä olevat 200 KB, mahdollistaen sivun välittömän näkymisen, kun loput latautuivat taustalla
- Yrityssivusto siirsi kaikki analytiikka- ja markkinointiskriptit defer/async-tilaan ja paransi Lighthouse-suorituskykypistearvoaan 42:sta 78:aan
- Yksittäinen sovellus lisäsi async-attribuutin pääpakkaus-skriptiinsä, ja latauspinni ilmestyi 2 sekuntia aiemmin, parantaen huomattavasti havaittua nopeutta
Et ole varma, miten tämä koskee sinua?
Kokenut insinööri käy läpi kohteen, hakukoneesi esiintymisen ja yhteydenottojen saannin, ja kirjoittaa kolme asiaa, jotka kannattaa korjata ensin. Pidät dokumentin joka tapauksessa.