Minifisering av CSS

Silktide kontrollerer om stilarkene siden laster ned, er minifisert – skrevet om for å fjerne mellomrom, kommentarer og gjentakelser som bare er relevante for personer som leser koden. Uminifiserte stilark er større enn nødvendig, noe som gjør at siden bruker lengre tid på å vises.

endrer ikke hvordan siden ser ut. For eksempel:

\/* Før minifisering: lesbart, men omfattende *\/
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

\/* Etter: identisk resultat, en brøkdel av størrelsen *\/
h1,h2{background-color:#000}

Hvorfor dette er viktig

Stilark blokkerer vanligvis gjengivelsen: Nettleseren laster ned sidens før den viser noe, så hver unødvendige byte i et stilark forlenger tiden siden er blank før den vises. Minifisering reduserer vanligvis størrelsen på stilark betydelig, og besparelsen gjentas for hver besøkende ved hver visning av en side som ikke er bufret.

Fordi minifisering skjer automatisk og ikke endrer funksjonaliteten, er uminifiserte stilark i produksjon nesten alltid en forglemmelse: et byggetrinn som ble hoppet over, eller utviklingsfiler som ble distribuert ved en feil.

Slik løser du det

Slå på minifisering av CSS i nettstedets byggeprosess. Alle moderne byggeverktøy inkluderer en minifier, som vanligvis er aktivert som standard i produksjonsbygg.
Hvis nettstedet ikke har en byggeprosess, kontroller : De fleste har en innstilling eller et programtillegg som minifiserer stilark automatisk.
Som siste utvei kan du kjøre filene gjennom en frittstående minifier før du laster dem opp. Behold de lesbare originalene – det er dem du redigerer, og publiser det minifiserte resultatet.
Hvis et rapportert stilark tilhører en tredjepart, bør du undersøke om de tilbyr en minifisert versjon, noe de fleste gjør.

Slik tester Silktide dette

Last inn siden i en ekte nettleser med enhetstypen, tilkoblingshastigheten og teststedet som er konfigurert for hastighetstestene dine.
Undersøk hvert stilark siden laster ned, og beregn hvor mye mindre det ville blitt hvis det var minifisert.
Rapporter hver fil med en meningsfull mulig besparelse, og vurder siden ut fra totalen: rundt 50 KB i mulige besparelser gir lavere vurdering, og 250 KB eller mer vurderes som dårlig.

Feilsøking

Filen ser allerede minifisert ut

Minifiseringsverktøy varierer i hvor grundig de komprimerer, så et lett komprimert stilark kan fortsatt inneholde betydelige besparelser. Kontrollen rapporterer hvor mye mindre filen kunne vært; hvis du kjører den gjennom en oppdatert minifier, fanges forskjellen vanligvis opp.

Vi trenger lesbare stilark for feilsøking

Behold lesbare kildefiler i prosjektet, og feilsøk med kildekart. De gjør at utviklerverktøyene i nettleseren kan vise de opprinnelige stilene, mens de besøkende mottar den minifiserte versjonen. Du trenger aldri å levere lesbar kode for å få lesbar feilsøking.