Korjaa Lighthouse-varoitus 'Eliminate render-blocking resources'
Poista render blocking -resurssit ja paranna Core Web Vitals -arvoja
'Eliminate render-blocking resources' lyhyesti
Ladattaessa sivua, jolla on render-blocking -resursseja, selain ei voi aloittaa renderöintiprosessia ennen kuin kaikki tätä aiheuttavat elementit on ladattu ja arvioitu.
Tämä rikkoo PageSpeedin kultaisen säännön: 'aloita renderöinti aina mahdollisimman aikaisin'. Mikä tahansa viive sivun renderöinnissä hidastaa sivun latautumista tarpeettomasti.
Korjaa tämä lighthouse-varoitus poistamalla tai lykkäämällä nämä render blocking -resurssit.
Mikä on 'Eliminate render-blocking resources' lighthouse-varoitus?
Mikä aiheuttaa Eliminate render-blocking resources -varoituksen lighthousessa? Lighthouse merkitsee sivut, joilla on jompikumpi seuraavista:
- Script-tagi, joka on headissa eikä ole lykätty.
Sivun headissa olevat skriptit ovat oletusarvoisesti render blocking -tyyppisiä, jos niillä ei ole defer- tai async-attribuuttia. - Linkitetty tyylitiedosto, joka vastaa laitteen mediaa.
<link rel="stylesheet"> estää sivun renderöinnin, jos sitä ei ole poistettu käytöstä ja se vastaa selaimen mediaa. Esimerkiksi <link rel="stylesheet" media="print"> ei estä renderöintiä pöytäkoneissa
'Eliminate render-blocking resources' -varoitus vaikuttaa suoraan joihinkin lighthouse-mittareihin. Teoriassa sivut, joilla on render-blocking -resursseja, voivat silti latautua melko nopeasti. Käytännössä ne usein eivät lataudu. Liian monet render-blocking -resurssit vaikuttavat todennäköisesti suoraan tärkeisiin lighthouse-mittareihin, kuten First Contentful Paint (FCP) ja Largest Contentful Paint (LCP).
Pikamuistutus - Mitä renderöinti on?
Renderöinti on web-kehityksessä käytettävä prosessi, joka muuttaa verkkosivuston koodin interaktiivisiksi sivuiksi, joita käyttäjät näkevät vieraillessaan verkkosivustolla. Termi viittaa yleensä HTML-, CSS- ja JavaScript-koodien käyttöön. Prosessin suorittaa renderöintimoottori, ohjelmisto, jota verkkoselain käyttää verkkosivun renderöimiseen.
Mikä aiheuttaa 'render-blocking resources' -ongelman?
Render blocking -resurssit ovat aina tyylitiedostoja ja JavaScriptejä sivun headissa. Tämä tarkoittaa, että niitä voi lisätä vain CMS:si, manuaalisesti web-kehittäjäsi toimesta tai liitännäisen kautta. Kun yrität löytää render blocking -resurssin alkuperän, kokeile etsiä seuraavista paikoista:
- Mallinne Verkkosivustosi mallitiedostot ovat ensimmäinen paikka, josta kannattaa etsiä. Etsi paikka, jossa <head>-koodi sijaitsee, ja etsi kovakoodattuja tyylejä ja skriptejä.
- CMS joskus CMS itse vaatii joitakin skriptejä (esimerkiksi jQuery) toimiakseen kunnolla.
- Liitännäiset liitännäiset ovat tunnettuja tyylin ja skriptien injektoimisesta sivulle.
Miten 'render-blocking resources' vaikuttavat sivun nopeuteen
Render-blocking -resurssit estävät render treen luomisen. Kun render treeta ei ole rakennettu, selain ei aloita renderöintiä. Tämä tarkoittaa, että sivu pysyy täysin tyhjänä, kunnes kaikki render blocking -resurssit on ladattu ja arvioitu. Tämä vaikuttaa mittareihin, kuten First Contentful Paint ja Largest Contentful Paint.
Miten korjata 'Eliminate render-blocking resources'
Korjataksesi 'render blocking resources' -ongelman sinun on varmistettava, että nämä resurssit eivät enää ole render blocking -tyyppisiä. Helpoin tapa on vain poistaa nämä resurssit. Joskus vanhat, käyttämättömät resurssit estävät edelleen sivun renderöinnin. Jos et voi poistaa niitä, sinun tulisi lykätä niitä.
JavaScriptin lykkääminen
JavaScript voidaan lykätä lisäämällä defer- tai async-attribuutti script-tagiin.
//lykätty javascript
<script src="script.js"></script>
//async javascript
<script src="script.js"></script>
Tyylitiedostojen lykkääminen
Tyylitiedostojen lykkääminen voi olla hieman hankalampaa. Kun tyylitiedosto lykätään, sivu renderöidään ensin ilman tyylejä. Sitten, kun tyylit on ladattu, selain soveltaa tyylit aiheuttaen kaikenlaista välkkymistä ja layout shiftejä. Siksi tarvitset inline-kriittistä CSS:ää. Kriittinen CSS on kokoelma tyylejä, joita tarvitaan sivun näkyvän osan renderöimiseen.
<style>//kriittinen CSS tähän</style> <link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel='stylesheet';"/> Kiertotapa 'eliminate render-blocking resources' -ongelmaan
Joskus noiden render blocking -resurssien poistaminen ei ole mahdollista. Sinulla ei ehkä ole pääsyä malliin tai CMS:si saattaa vaatia tiettyjä skriptejä. On olemassa muutamia kiertotapoja vähentää näiden render blocking -resurssien vaikutusta.
- Pienennä ja pakkaa tyylisi ja skriptisi.
Pienennä ja pakkaa nykyiset tyylit ja skriptit. Pienemmillä resursseilla on vähemmän vaikutusta lataussuorituskykyyn kuin suuremmilla resursseilla. - Jaa suuret tiedostot useisiin tiedostoihin.
Suurten tiedostojen jakaminen useisiin tiedostoihin saattaa vähentää resurssien latausaikaa. - Poista resurssit käytöstä sivukohtaisesti.
Kun resurssia ei voida poistaa yhdeltä sivulta, se ei tarkoita, että sitä tarvitaan kaikilla sivuilla. Esimerkiksi Wordpress-liitännäiset lisäävät yleensä skriptejä ja tyylejä kaikille sivuille, vaikka liitännäinen ei ehkä ole aktiivinen kyseisellä sivulla.
Compare your segments.
Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.
- Device filtering
- Route Analysis
- Connection Types
