Renderdamist takistavad ressursid
Renderdamist takistavad ressursid tekivad siis, kui CSS või JavaScripti failid takistavad veebilehe sisu kuvamist, kuni need on täielikult allalaaditud ja brauseri poolt töödeldud.
Kui brauser laeb veebilehte, peab ta parsima HTMLi ja ehitama renderduspuu enne midagi kuvamist. Teatud ressursid võivad seda protsessi blokeerida. CSS on vaikimisi renderdamist takistav, sest brauser peab teadma, kuidas sisu vormindada, enne selle kuvamist, vormindamata sisu kuvamine põhjustaks häirivat vilkumist.
Renderdamist takistavad ressursid on aeglase esimese sisukuvamise (FCP) ja suurima sisukuvamise (LCP) peamine põhjus. Mida rohkem renderdamist takistavaid ressursse leheküljel on, seda kauem vaatavad kasutajad tühja või osaliselt laetud ekraani.
Praktikas
- WordPressi saidil oli 12 renderdamist takistavat stiililehte ja 8 takistavat skripti, nende konsolideerimine ja edasilükkamine vähendas FCP-d 4,2 sekundilt 1,1 sekundile
- E-pood inline-istas oma kriitilise vaateväljas oleva CSSi (3KB) ja lükkas allesjäänud 200KB edasi, lastes leheküljel koheselt ilmneda, samal ajal kui ülejäänud taustal laeti
- Ettevõtte veebisait viis kõik analüütika ja turunduse skriptid defer/async-re ja parandas oma Lighthouse'i jõudlusarvest 42-lt 78-le
- Ühe lehekülje rakendus lisas oma peamise paketiskriptile async atribuudi ja laadimispöördis ilmus 2 sekundit varem, dramaatiliselt parandades tajutud kiirust
Kas ei ole kindel, kuidas see teile kehtib?
Kogenud insener vaatab üle teie veebisaidi, nähtavuse otsingus ja päringute teekonna ning kirjutab seejärel üles kolm asja, mida esmalt parandada. Dokument jääb teile igal juhul.