Ubrugt CSS

Silktide indlæser dine sider i en rigtig browser og måler, hvor meget af hvert stilark der faktisk bruges til at vise siden. Stilark med en stor mængde ubrugt styling rapporteres sammen med den potentielle besparelse.

Hvorfor det er vigtigt

Browsere kan ikke vise en side, før de har downloadet og behandlet dens , så hver regel, der ikke bruges, forsinker stadig det tidspunkt, hvor dit indhold vises. Ubrugt CSS ophobes naturligt: temaer og frameworks leverer typografier til alle funktioner, uanset om du bruger dem eller ej, og gamle typografier bliver sjældent slettet, når designet ændres. Resultatet er, at besøgende venter på styling, der aldrig tegner noget.

Sådan løser du det

Fjern typografier, du ikke længere bruger. Byggeværktøjer kan gøre dette automatisk ved at scanne dine skabeloner og kun beholde den CSS, de henviser til.
Opdel store stilark, så hver side kun indlæser de typografier, den har brug for, i stedet for én pakke, der indeholder styling for alle sider.
For de typografier, en side har brug for, skal du prioritere dem, der gengiver den første skærmvisning, og lade resten indlæse uden at blokere:

<!-- Indlæses uden at blokere den første gengivelse -->
<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 forsigtig med automatisk fjernelse: typografier, der kun bruges af , eller kun på andre sider, der deler stilarket, kan blive fjernet ved en fejl.

Sådan tester Silktide dette

Indlæs siden i en rigtig browser, og registrer, hvilke CSS-regler der anvendes, mens siden indlæses.
Mål for hvert stilark, hvor mange af dets bytes der aldrig blev brugt.
Rapportér hvert stilark med betydeligt spild, og vis dets aktuelle størrelse, den ubrugte procentdel og de bytes, du kan spare.

Fejlfinding

CSS'en bruges, bare ikke med det samme

Målingen dækker den indledende sideindlæsning. Typografier, der først anvendes senere – ved hover, i modaler, efter JavaScript viser indhold – tæller som ubrugte, selv om siden får brug for dem senere. Det er stadig nyttig information: disse typografier behøver ikke blokere den første gengivelse, så de er kandidater til at blive indlæst separat.

Stilarket deles på tværs af webstedet

Et delt stilark er for det meste "ubrugt" på en enkelt side. Det kan være et rimeligt kompromis, da filen efter den første sidevisning. Afvej omkostningen ved det første besøg mod bekvemmeligheden, før du opdeler det.