Renderöintiä estävät resurssit

Silktide tarkistaa tyylitiedostot ja komentosarjat, jotka selaimen on ladattava kokonaan, ennen kuin se voi näyttää mitään sivullasi. Jokainen niistä saa kävijät tuijottamaan tyhjää näyttöä hieman pidempään.

Oletusarvoisesti sivun alkuun viitattu tyylitiedosto tai komentosarja estää renderöinnin: selain ei piirrä mitään ennen kuin tiedosto on saapunut, koska tiedosto voi muuttaa kaiken ulkoasua tai toimintaa.

Miksi tämä on tärkeää

Tyhjät hetket ennen sivun ensimmäistä ilmestymistä ovat niitä, jolloin kävijät päättävät, odottavatko he. Jokainen renderöintiä estävä tiedosto lisää yhden verkkopyynnön edestakaisen matkan tähän tyhjään aikaan, ja viiveet kasaantuvat nopeasti mobiiliyhteyksillä – muutama estävä tiedosto voi pitää muuten nopean sivun valkoisena sekuntien ajan.

Suurin osa tästä estämisestä on tarpeetonta. Tavallisesti vain pieni osa sivun tarvitaan ensimmäisen näkymän piirtämiseen, eikä suurinta osaa tarvitse suorittaa ennen sivun ilmestymistä.

Kuinka korjata se

Lataa komentosarjat estämättä renderöintiä lisäämällä defer (tai async itsenäisille komentosarjoille, kuten analytiikkakomentosarjoille):

<!-- Ongelma: estää renderöinnin, kunnes tiedosto on ladattu ja suoritettu -->
<script src="app.js"></script>

<!-- Korjattu: latautuu rinnakkain ja suoritetaan sivun jäsentämisen jälkeen -->
<script src="app.js" defer></script>

Lisää ensimmäiseen näkymään tarvittava pieni määrä CSS:ää suoraan sivulle ja lataa täydet tyylitiedostot estämättä renderöintiä.
Lisää vain tietyissä tilanteissa käytettäville tyylitiedostoille media-attribuutti (kuten media="print"), jotta ne eivät enää estä renderöintiä muualla.
Vähennä estettävää sisältöä: poista käyttämättömät tyylit ja komentosarjat sekä pidä loput pieninä – katso CSS:n pienentäminen ja Pienennetty JavaScript.

Miten Silktide testaa tämän

Lataa sivu oikeassa selaimessa käyttäen nopeustesteillesi määritettyä laitetyyppiä, yhteysnopeutta ja testauspaikkaa.
Tunnista jokainen tyylitiedosto ja komentosarja, joka esti sivun ensimmäisen piirron.
Arvioi, kuinka kauan kukin niistä viivästytti renderöintiä, ja raportoi jokainen tiedosto arvioituine säästöineen.
Arvioi sivu säästettävissä olevan kokonaisajan perusteella: noin 100 millisekuntia alentaa arvosanaa, ja 200 millisekuntia tai enemmän arvioidaan heikoksi.

Vianmääritys

Eikö CSS:n tarvitse estää renderöintiä?

Ensimmäistä näkymää ohjaavan tyylitiedoston täytyy – se on tarkoituksellista, jotta kävijät eivät koskaan näe muotoilematonta sisältöä. Ratkaisu ei ole CSS:n poistaminen, vaan estävän sisällön pienentäminen: lisää kriittinen osa sivulle ja lataa loput renderöintiä estämättä.

Estävä tiedosto on kolmannen osapuolen komentosarja

Tagien hallintatyökalut, fontit ja keskustelupienoisohjelmat ovat usein ongelmien aiheuttajia. Useimmat toimivat oikein defer- tai async-määritteen kanssa – tarkista palveluntarjoajan ajantasaiset upotusohjeet, joissa se on usein jo mukana.