Ubrukt CSS

Silktide laster inn sidene dine i en ekte nettleser og måler hvor mye av hvert stilark som faktisk brukes til å vise siden. Stilark med mye ubrukt stillegging rapporteres, sammen med den potensielle besparelsen.

Hvorfor dette er viktig

Nettlesere kan ikke vise en side før de har lastet ned og behandlet , så hver regel som ikke brukes, forsinker fortsatt øyeblikket da innholdet ditt vises. Ubrukt CSS bygger seg naturlig opp: Temaer og rammeverk leverer stiler for alle funksjoner, enten du bruker dem eller ikke, og gamle stiler blir sjelden slettet når design endres. Resultatet er at besøkende venter på stillegging som aldri tegner noe.

Slik løser du det

Fjern stiler du ikke lenger bruker. Byggeverktøy kan gjøre dette automatisk ved å skanne malene dine og beholde bare CSS-en de refererer til.
Del opp store stilark slik at hver side bare laster inn stilene den trenger, i stedet for én pakke som inneholder stilleggingen for alle sider.
For stilene en side trenger, prioriter dem som gjengir det første skjermbildet, og la resten lastes inn uten å blokkere:

<!-- Lastes inn uten å blokkere den første gjengivelsen -->
<link rel="preload" href="rest.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>

Vær forsiktig med automatisk fjerning: stiler som bare brukes av , eller bare på andre sider som deler stilarket, kan bli fjernet ved en feil.

Slik tester Silktide dette

Last inn siden i en ekte nettleser og registrer hvilke CSS-regler som brukes mens siden lastes inn.
Mål hvor mange av bytene i hvert stilark som aldri ble brukt.
Rapporter hvert stilark med betydelig sløsing, og vis den nåværende størrelsen, prosentandelen som er ubrukt, og hvor mange byte du kan spare.

Feilsøking

CSS-en brukes, bare ikke med én gang

Målingen dekker den innledende sidelastingen. Stiler som bare gjelder senere – ved hover, i modaler eller etter at JavaScript viser innhold – telles som ubrukt selv om siden trenger dem etter hvert. Det er likevel nyttig informasjon: Disse stilene trenger ikke å blokkere den første gjengivelsen, så de kan lastes inn separat.

Stilarket deles på tvers av nettstedet

Et delt stilark er for det meste «ubrukt» på enhver enkelt side. Det kan være et rimelig kompromiss, siden filen blir etter første sidevisning. Vurder kostnaden ved det første besøket opp mot bekvemmeligheten før du deler det opp.