CSS:n pienentäminen

Silktide tarkistaa, onko sivusi lataamat tyylitiedostot pienennetty – eli kirjoitettu uudelleen poistamalla välilyönnit, kommentit ja toistot, joilla on merkitystä vain koodia lukeville ihmisille. Pienentämättömät tyylitiedostot ovat tarpeettoman suuria, mikä hidastaa sivun näkymistä.

ei muuta sivun ulkoasua. Esimerkiksi:

/* Ennen pienentämistä: luettava, mutta raskas */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

/* Jälkeen: sama lopputulos, murto-osa koosta */
h1,h2{background-color:#000}

Miksi tämä on tärkeää

Tyylitiedostot estävät yleensä renderöinnin: selain lataa sivun ennen kuin se näyttää mitään, joten jokainen tarpeeton tavu tyylitiedostossa pidentää suoraan tyhjää aikaa ennen sivusi näkymistä. Pienentäminen pienentää tyylitiedostojen kokoa yleensä merkittävästi, ja säästö toistuu jokaisella kävijällä jokaisella sivunäkymällä, jota ei ladata välimuistista.

Koska pienentäminen on automaattista eikä muuta toimintaa, pienentämättömät tuotantoympäristön tyylitiedostot ovat lähes aina huolimattomuusvirhe: rakennusvaihe on ohitettu tai kehitystiedostoja on julkaistu vahingossa.

Korjaaminen

Ota CSS:n pienentäminen käyttöön sivuston rakennusprosessissa. Jokaisessa nykyaikaisessa rakennustyökalussa on pienennin, joka on yleensä oletusarvoisesti käytössä tuotantoversioissa.
Jos sivustolla ei ole rakennusprosessia, tarkista : useimmissa on asetus tai lisäosa, joka pienentää tyylitiedostot automaattisesti.
Viimeisenä keinona aja tiedostot erillisen pienentimen läpi ennen niiden lataamista palvelimelle. Säilytä luettavat alkuperäistiedostot – muokkaat niitä ja julkaiset pienennetyn tulosteen.
Jos raportoitu tyylitiedosto kuuluu kolmannelle osapuolelle, tarkista, tarjoavatko he pienennettyä versiota; useimmat tarjoavat.

Miten Silktide testaa tämän

Lataa sivu oikeassa selaimessa käyttäen nopeustesteillesi määritettyä laitetyyppiä, yhteysnopeutta ja testisijaintia.
Tarkastele jokaista sivun lataamaa tyylitiedostoa ja arvioi, kuinka paljon pienempi se olisi pienennettynä.
Raportoi jokainen tiedosto, josta voidaan säästää merkittävästi, ja arvioi sivu kokonaismäärän perusteella: noin 50 kt:n mahdolliset säästöt heikentävät arvosanaa, ja 250 kt tai enemmän arvioidaan heikoksi.

Vianmääritys

Tiedosto näyttää jo pienennetyltä

Pienentimet eroavat tehokkuudeltaan, joten kevyesti tiivistetty tyylitiedosto voi silti sisältää merkittäviä säästömahdollisuuksia. Tarkistus raportoi, kuinka paljon pienempi tiedosto voisi olla; sen ajaminen nykyisen pienentimen läpi yleensä korjaa eron.

Tarvitsemme luettavia tyylejä virheenkorjaukseen

Säilytä projektissasi luettavat lähdetiedostot ja tee virheenkorjaus lähdekarttojen avulla. Niiden avulla selaimen kehittäjätyökalut voivat näyttää alkuperäiset tyylit, kun taas kävijät saavat pienennetyn version. Luettavaa virheenkorjausta varten ei koskaan tarvitse tarjota luettavaa koodia.