Du kender det sikkert godt. GooglePageSpeed råber ad dig, når du kører en lighthouse-test på dit website. Den fortæller dig, at du kan spare X antal bytes, hvis bare du fjernede det CSS som ikke bruges på siden.
Vejen til et lettere stylesheet
Hvad gør du? Du foretager straks en manuel oprydning af dit stylesheet og fjerner ubrugte styles? Eller du gør ligesom mange andre udviklere – du får det ikke gjort – ikke lige med det samme i hvert fald.
Det betyder, at størrelsen på dit stylesheet øges efterhånden, som der kommer nye features til, gamle fjernes og eksisterende ændres. Det kan i sidste ende betyde, at dit site loader langsommere, og det kan påvirke din page ranking og forårsage, at brugere måske bliver utålmodige og forlader dit site til fordel for et konkurrerende site.
Det problem er der heldigvis nogen, der har sat sig for at løse, så DU aldrig skal tænke på det igen. Løsningen hedder PurgeCSS.
Hvordan fungerer PurgeCSS?
Kort fortalt er det et værktøj, der kan fjerne ubrugte CSS-klasser fra dit stylesheet.
Du fortæller ganske enkelt værktøjet hvilke filer, der findes CSS-klasser i. Det kan være alt fra HTML til JavaScript filer – men i virkeligheden alle tænkelige filtyper, der kunne være relevante.
PurgeCSS går alle filerne igennem og hiver class-navne fra filerne ud via en Regular expression. Derefter sammenligner den de class-navne, den har hentet ud af filerne med dem, der er i dit stylesheet. Som det sidste fjerner PurgeCSS alle de klasser fra stylesheetet, som den ikke fandt i de filer den løb igennem.
Reducerer størrelsen på dit stylesheet markant
Hos Vertica har vi taget CSS utility frameworket TailwindCSS kraftigt i brug på vores nye løsninger. Frameworket genererer en masse css-klasser og en del, man sandsynligvis aldrig kommer til at bruge.
For at vi som udviklere ikke manuelt skal definere, hvad TailwindCSS skal generere, bruger vi PurgeCSS til at fjerne alt det, vi ikke bruger. Der betyder ofte en reduktion i størrelsen på vores stylesheets på op til 80%.
Hvordan bruger du det?
Ofte vil du køre værktøjet som en del af din byggeproces. Sådan at du kun bruger værktøjet, når du bygger til “Production”.
Gør du det sådan, vil du eksempelvis kunne sætte det op som et PostCSS plugin. Det er også muligt at køre fra kommando-linjen eller køre det programmatisk i eksempelvis nodeJS, hvis du skulle have behov for det.
Opsætning af PurgeCSS sammen med VueJS
Hvis du ligesom os bruger VueJS som jeres frontend framwork, er der lige nogle ting, du skal være opmærksom på, når du sætter PurgeCSS op. Får du det ikke sat korrekt op, risikerer du nemlig, at PurgeCSS ikke kan se de css-klasser, du definerer i dine Vue-filer, og de vil dermed blive fjernet.
Så hvis du vil undgå at hive dig selv alt for meget i håret, kan du med fordel læse den her udførlige guide.
Vil du vide mere om PurgeCSS?
Er du blevet nysgerrig på PurgeCSS? Så synes jeg du skal hoppe forbi websitet, hvor der er yderligere dokumentation, guides omkring opsætning og meget mere.
Derudover er du selvfølgelig også meget velkommen til at række ud til mig på tmh@vertica.dk.