Komprimere CSS og JavaScript
Jeg har ved et par anledninger skrevet om hvordan du kan dra opp ytelsen i nettsidene dine, ved å for eksempel introdusere mellomlagring (cache) på databasen din eller i applikasjonen.
I dag tenkte jeg å dekke litt om «minifisering» av JavaScript og CSS-kode.
Først av alt: hva er det for noe, og hva betyr det for meg?
Når du skriver CSS- og JavaScript-kode (og alle andre typer..) så pleier mange å skrive på en slik måte at det er mest mulig lesbart og forståelig. Dette kan være aktivt bruk av whitespace, TAB, newlines, variabel- og funksjonsnavn blant annet.
Resultatet er da at koden blir lang, noe som er unødvendig: en maskin bryr seg ikke om hvor fint koden er skrevet når den skal tolke koden. Et menneske bryr seg, derimot.
Og som vi alle vet: dess flere bytes, dess lengre lastetid. Og på Internett har dette en stor betydning, spesielt for brukere med lav Internetthastighet (ikke alle har fått gleden av fiber ennå).
Det er derfor et godt tips å gjøre koden så liten som overhodet mulig, ved å fjerne whitespace og gjøre funksjonsnavn og variabelnavn kortere. Denne prosessen kalles gjerne «komprimering» eller «minifisering» (eng. minify).
Om du har lastet ned for eksempel en jQuery-plugin før, har du ofte fått to filer presentert: en «vanlig» fil, og en som slutter med «.min».
Her er to eksempler på dette:
jquery.js
jquery.min.js
Forskjellen her er at jquery.min.js er en miniversjon av jquery.js, og er dermed mindre i filstørrelse.
jquery.min.js er egnet til produksjonsbruk, mens jquery.js er egnet til videre utvikling. Det vil si at dersom du skal gjøre endringer i koden din, må du gjøre dette i kildefilen for så og lage en komprimert versjon av den etterpå.
Forskjell mellom vanlig og komprimert JavaScript
Hvilke program er tilgjengelige?
Det finnes mange gode verktøy for å minifisere CSS- og JavaScript-filer, hvor de mest brukte er Yahoo! Compressor og Google Closure. Dette er to Java-filer som du må kjøre lokalt på PC-en via kommandolinjen. Kanskje ikke det beste alternativet for alle, som er årsaken til at det finnes mange gode nettbaserte verktøy også.
Egenutviklet program
Jeg har utviklet et program for Windows basert på Yahoo! Compressor, som gjør at du slipper å benytte kommandolinjen for å minifisere filer.
Programmet er skrevet i C#, og fungerer derfor kun på Windows (som jeg vet om). Det er likevel et nyttig verktøy som er lett å bruke!
YUI CSS- og JavaScript Compressor (0 nedlastninger)