Optimering af loadtider er for mange en ukendt disciplin, og det er også primært store websites, der indtil nu har brugt ressourcer på det. For websites med meget trafik er der nemlig god økonomi i at optimere loadtiden.
Der er to forskellige metoder til optimering af loadtider. Man kan optimere backend herunder databasen således, at svartiden før webserveren sender siden til brugerens browser minimeres. Omstrukturering af databasen kan dog koste meget tid og penge. Desuden tager backend processen kun 20% af svartiden og de sidste 80% går med at loade elementerne i browseren. Den billigste og hurtigste metode er at optimere det indhold, der sendes til brugen således, at loadtiden reduceres.
Optimering af loadtiden i browseren er noget som alle websites store som små kan drage nytte af, og man kommer faktisk langt med en dags arbejde.
Minimer antallet af HTTP requests
En side er som bekendt bygget op af noget HTML, der typisk kalder en masse eksterne filer som f.eks. grafik og style sheets. Det gælder kort sagt om at reduceere antallet af disse HTTP requests.
En browser kan kun behandle to forespørgsler fra samme host af gangen, og hvis der er tale om et JavaScript reduceres det til en forespørgsel uanset antallet af hosts. Det vil sige at man for en lang trappe af downloads som vist nedenfor.
Optimeringen ligger i, at det er langt hurtigere at downloade en stor fil end mange små. Man skal altså vurdere om det virkelig er nødvendigt at klippe et billede og i 10 mindre stykker for at få det til at passe ind i skabelonen eller om skabelonen kan forbedres. Skal der være 5 eksterne style sheets eller kan de samles i 1 fil? Kan JavaScripts samles i 1 fil.
Faktisk kan billeder med fordel lægges på en anden host som f.eks. http://img.mitsite.dk/. Det vil nemlig resultere i to parelelle trapper.
Det er klart at denne udskillelse resulterer i en voldsom forbedring af loadtiden.
Brug cachen i browseren
Har du meget statisk indhold bør du bruge en ”Expires” header. Der er ingen grund til at downloade en side igen og igen, hvis den alligevel aldrig ændrer sig.
Mange website har bruger en masse store eksterne JavaScript. De kan med fordel samles i 1 fil fil og den kan med fordel caches, hvis man versionerer filnavnet som feks. ”script_v2.1.js”. Typisk kan de grafiske desigelementer elementer også caches.
Brug cachen den kan virkelig minimere loadtiden. For meget store websites er der også penge at spare da båndbredde koster penge.
Komprimer filerne med Gzip
Når indholdet fylder mindre tager det også mindre tid at downloade.
Brugere af WordPress kan nemt aktivere Gzip komprimering fra administrationen. På apache kan dog komprimere alt indhold med modulet mod_deflate. Gzip kan typisk skære 70% af filstørelsen og dermed loadtiden.
JavaScipt og CSS skal ligge i eksterne filer
Når JavaScipt og CSS ligger i eksterne filer minimerer det ganske enkelt størrelsen af HTML filen.
Stylesheets skal ligge i toppen
Når stylesheetet ligger i toppen begynder browseren at bygge siden så snart stylesheetet er loaded. Ligger det i bunden er siden blank indtil stylesheetet og alle foregående elementer er downloadet.
Eksterne JavaScipts skal ligge i bunden
Såfremt det er muligt skal eksterne JavaScript ligge i bunden da de blokkerer alle andre downloads.
Undgå redirects
Mange angiver URL’en i links som følger: https://ecatalyst.dk
Ovenstående resulterer i et redirect til: https://ecatalyst.dk/
Dette redirect tager unødvendigt meget tid. Prøv selv i din browser.
Ingen undskyldning for ikke at optimere loadtiderne
Det er super nemt at optimere loadtiden og noget som alle kan gøre, men lad vær med at bruge Digital Frontier som eksempel for vi har nemlig ikke opotimeret sitet.
Hvis du har fået blod på tanden vil jeg anbefale dig at downloade YSlow, som er Firefox plugin, der er udviklet af Yahoo. Yahoo sparer mange penge ved at optimere loadtiderne og YSlov er et rigtig godt værktøj.
Ovenstående er absolut ikke en udtømmende liste. Der er mange tricks i forhold til optimering af loadtider, men jeg har været omkring de mest oplagte.
Kristian Polack skriver
Rigtig interessant indlæg, Torben. Hurtige loadtider på sider er en subtil, men vigtig faktor i brugertilfredshed. Og et rigtig fedt tool, du linker til.
Jeg har dog lige et spørgsmål til det med at “undgå redirects”: Det er den her lille lumske slash /, du mener, ikke? Hvorfor er den der i det hele taget? Og hvad med fx www contra uden? Giver det også længere load og i hvilke tilfælde?
Søren Sprogø skriver
Nu er Google Adwords jo også begyndt at regne din landing pages load tid med ind i quality score, så hastighedoptimering bør ikke længere kun være noget “de store” foretager sig!
Torben Lundgaard skriver
Skråstregen / adskiller mapper fra filer.
/ – angiver bare at man er i rodmappen af sitet
Du vil også opleve at mappe bliver redirected til /mappe/
I princippet kunne browseren selv foretage omskrivning, men i HTTP protokollen har man altså valgt at det kræver et redirect.
Om du bruger www eller ej betyder ikke noget med mindre du tvinger browseren til at redirecte.
Niels Gamborg skriver
Super artikel, Torben. Mange gode konkrete tips at arbejde videre med.
Har lige et enkelt n00b spørgsmål til Gzip. Risikerer man ikke at tiden det tager for brugeren at pakke filerne ud æder gevinsten ved den hurtigere download?
Martin skriver
Kendte ikke til YSlow, rigtig god udvidelse, kunne da hive 8 a’er hjem på mit site men må nøjes med et samlet D, min webhost bruger ikke mod_expires eller mod_deflate så har fx lidt svært ved at sætte en expire date på billeder
Torben Lundgaard skriver
Hej Niels
Gzip tager næsten igen tid og slet ikke i forhold til hvad det tager at downloade en fil. Hvis dit site ligger på en shared server med et CPU load på 99% er der selvfølgelig ikke noget at vinde. På en enhver fornuftig konfigureret server er det en win-win situation.