CSS-minifiering

Silktide kontrollerar om de stilmallar som sidan laddar ner har minifierats – alltså skrivits om för att ta bort mellanrum, kommentarer och upprepningar som bara är relevanta för personer som läser koden. Ominifierade stilmallar är större än de behöver vara, vilket gör att sidan visas långsammare.

ändrar inget av hur sidan ser ut. Till exempel:

\/* Före minifiering: lättläst, men omständlig *\/
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

\/* Efteråt: identiskt resultat, en bråkdel av storleken *\/
h1,h2{background-color:#000}

Varför detta är viktigt

Stilmallar blockerar vanligtvis renderingen: webbläsaren laddar ner sidans innan något visas, så varje onödig byte i en stilmall förlänger direkt den tomma tiden innan sidan visas. Minifiering minskar regelbundet stilmallarnas storlek avsevärt, och besparingen upprepas för varje besökare vid varje sidvisning som inte hämtas från cache.

Eftersom minifiering sker automatiskt och inte ändrar något beteende är ominifierade stilmallar i produktion nästan alltid ett förbiseende: ett byggsteg som hoppats över eller utvecklingsfiler som råkat distribueras.

Så åtgärdar du det

Aktivera CSS-minifiering i webbplatsens byggprocess. Alla moderna byggverktyg innehåller en minifierare, som vanligtvis är aktiverad som standard i produktionsbyggen.
Om webbplatsen saknar en byggprocess kan du kontrollera : de flesta har en inställning eller ett tillägg som minifierar stilmallar automatiskt.
Som sista utväg kan du köra filerna genom en fristående minifierare innan du laddar upp dem. Behåll de lättlästa originalen – det är dem du redigerar, och du publicerar det minifierade resultatet.
Om en rapporterad stilmall tillhör en tredje part kan du kontrollera om de erbjuder en minifierad version, vilket de flesta gör.

Så testar Silktide detta

Ladda sidan i en riktig webbläsare med den enhetstyp, anslutningshastighet och testplats som har konfigurerats för dina hastighetstester.
Granska varje stilmall som sidan laddar ner och uppskatta hur mycket mindre den skulle bli om den minifierades.
Rapportera varje fil med en betydande möjlig besparing och bedöm sidan utifrån totalsumman: omkring 50 KB i möjliga besparingar ger en sämre bedömning, och 250 KB eller mer bedöms som dåligt.

Felsökning

Filen ser redan minifierad ut

Minifierare skiljer sig åt i hur aggressiva de är, så en lätt komprimerad stilmall kan fortfarande innehålla betydande besparingar. Kontrollrapporten visar hur mycket mindre filen skulle kunna bli; om du kör den genom en aktuell minifierare fångas skillnaden vanligtvis upp.

Vi behöver lättlästa stilmallar för felsökning

Behåll lättlästa källfiler i projektet och felsök med källkartor. De gör att webbläsarens utvecklarverktyg kan visa de ursprungliga stilarna medan besökarna får den minifierade versionen. Du behöver aldrig leverera lättläst kod för att få lättläst felsökning.