Optimer din hjemmeside ved at komprimere Javascript og CSS
Næsten hver moderne hjemmeside består af en serverdel, som udfør dataudveksling, beregning osv., og en relativt let klientdel, som danner den endelige præsentation i browseren. Selvom serverdelen ofte står for de tunge operationer, er det ikke altid flaskehalsen på vej mod en god svartid.
Renderingstid er den tid det tager for en browser at fortolke og vise brugeren indholdet på hjemmesiden. Denne skal selvfølgelig være så lav som muligt, da det kan være en stor faktor når der måles på hastigheden. Jo højere renderingstid, jo længere tager det før browseren viser selve indholdet. Grunden til at nogle sider loader hurtigere end andre er blandt andet et stort antal af javascript og CSS filer, som er koblede til siden. Det er principelt bedre at have en stor javascript fil end flere små, fordi der skal nemlig lige så mange rundture til serveren, som der er javascript filer vedhæftet. Og hver rundtur koster tid især hvis internet forbindelse ikke er i toppen.
Det er en god idé at ungå inline javascript og CSS kode. Da det gør, at der kommer en hel del mere kode i html dokumentet end hvis disse lå i seperate filer. Yderligere hvis denne kode kommer i separate filer, er der også mulighed for at de forskellige browsere gemmer en kopi i cachen, hvilket vil sige at næste gang brugeren så kommer forbi, behøver de ikke hente de filer igen.
Der findes en række værktøjer for at komprimere javascript og CSS filer. Måden er blandt andet at fjerne unødig whitespace, linjeskift og kommentarer i programmeringskoden både i javscript og css. Filerne fylder mindre og kan derfor mindske rendeingstid. Minificering (eller komprimering) medfører typisk en sideeffekt i form af, at filerne mister læsbarhed. Det kan være et problem, hvis man gerne vil kunne analysere klientkoden i browseren. Der findes en løsning på dette problem, der skal anvendes 'source map' filer, som kun bliver hentet hvis man åbner konsol eller et andet udviklingsværktøj i ens browser. 'Source map' filer gør, at en minificeret javascript bliver vist i sin komplete udgave og udvikleren kan foretage en fejlsøgning. Mange javascript biblioteker (eg. jQuery, angularJS) er tilgængelig for afhentning både i en komplete udgave og minificeret.
Mest kende værktøjer for komprimering er GRUNT og GULP. Det sidste har min personlige præference, da man bruger javascript syntakse for at definere kommandoer. Mens i GRUNT, bliver opgaverne defineret ved brug af XML filer. Den eneste krav, der skal være opfyldt for GULP til at køre er at nodeJS framework skal være installeret på serveren. Man definerer kommandoer, der skal køres i en kofigurations fil, efterfølgende kan GULP eksekveres ved at kalde flg. i kommando linje:
> gulp build
Værktøjet kan derfor sættes op til at køre på en build server, når projektet bliver bygget og lagt ind i source control.
