Käyttämätön CSS
Silktide lataa sivusi oikeassa selaimessa ja mittaa, kuinka paljon kutakin tyylitiedostoa todella käytetään sivun näyttämiseen. Tyylitiedostot, joissa on paljon käyttämätöntä tyylittelyä, raportoidaan yhdessä mahdollisen säästön kanssa.
Miksi tällä on merkitystä
Selaimet eivät voi näyttää sivua, ennen kuin ne ovat ladanneet ja käsitelleet , joten jokainen käyttämätön sääntökin viivästyttää hetkeä, jolloin sisältösi tulee näkyviin. Käyttämätöntä CSS:ää kertyy luonnostaan: teemat ja kehykset sisältävät tyylejä kaikille ominaisuuksille riippumatta siitä, käytätkö niitä vai et, ja vanhoja tyylejä poistetaan harvoin, kun ulkoasu muuttuu. Lopputuloksena kävijät odottavat tyylittelyä, joka ei koskaan piirrä mitään.
Näin korjaat sen
- Poista tyylit, joita et enää käytä. Rakennustyökalut voivat tehdä tämän automaattisesti skannaamalla mallipohjasi ja säilyttämällä vain niiden viittaaman CSS:n.
- Jaa suuret tyylitiedostot niin, että kukin sivu lataa vain tarvitsemansa tyylit sen sijaan, että se lataisi yhden paketin, joka sisältää kaikkien sivujen tyylittelyn.
- Sivun tarvitsemista tyyleistä priorisoi ne, jotka renderöivät ensimmäisen näkymän, ja anna muiden latautua estämättä renderöintiä:
<!-- Latautuu estämättä ensimmäistä renderöintiä -->
<link rel="preload" href="rest.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>
Ole varovainen automaattisen poistamisen kanssa: tyylit, joita käyttää vain tai joita käytetään vain muilla saman tyylitiedoston jakavilla sivuilla, voidaan poistaa vahingossa.
Näin Silktide testaa tämän
- Lataa sivu oikeassa selaimessa ja tallenna, mitä CSS-sääntöjä käytetään sivun latautuessa.
- Mittaa jokaisesta tyylitiedostosta, kuinka montaa sen tavua ei koskaan käytetty.
- Raportoi jokainen tyylitiedosto, jossa on merkittävästi hukkaa, ja näytä sen nykyinen koko, käyttämättömän osuuden prosenttiosuus sekä tavut, jotka voisit säästää.
Vianmääritys
CSS:ää käytetään, mutta ei heti
Mittaus kattaa sivun ensimmäisen latauksen. Tyylit, joita käytetään vasta myöhemmin – hiiren osoittamisen yhteydessä, modaalisissa ikkunoissa tai sen jälkeen, kun JavaScript paljastaa sisältöä – lasketaan käyttämättömiksi, vaikka sivu tarvitseekin niitä myöhemmin. Tämä on silti hyödyllistä tietoa: näiden tyylien ei tarvitse estää ensimmäistä renderöintiä, joten ne kannattaa ehkä ladata erikseen.
Tyylitiedosto on jaettu koko sivustolla
Jaettu tyylitiedosto on enimmäkseen "käyttämätön" millä tahansa yksittäisellä sivulla. Tämä voi olla kohtuullinen kompromissi, sillä tiedosto ensimmäisen sivun katselun jälkeen. Punnitse ensimmäisen käynnin kustannusta ja käytännöllisyyttä ennen sen jakamista osiin.