Björn Hansson

Snabbare sidladdning med mindre requests till webbservern

Static-servrar
Om du verkligen vill tokoptimera din webbsajt för att minimera laddningstider så är ett sätt att dra ner på antalet requests till webbservern. Varje bild som laddas öppnar en request mot webbservern, mindre requests = snabbare rendering av sidan. Det finns lite olika sätt att göra detta på, ett sätt är att leverera bilderna (och annat statiskt material såsom css, js etc) via en lättare webbserver slimad och optimerad just för detta. Ett bra exempel är lighttpd som är ganska lätt att sätta upp, har kört denna själv i över 1 år utan några som helst problem så jag kan intyga att den är stabil. Ett annat alternativ som blir allt populärare är Nginx. Är du riktigt häftig kan du använda dig av en tjänst som Cachefly som distribuerar datat i deras globala servernät och dina besökare blir såklart servade av en server som ligger närmast de själva.

CSS sprites
Ett annat sätt att minska antalet requests på är att med CSS hämta delar av en och samma bild, istället för att dela upp den i flera fysiska bildfiler som man normalt gör så klipper man ihop den till en enda. Förutom att det blir 1 enda requests så brukar man även kunna komprimera en enskild bild bättre. Tekniken kallas CSS Sprites och kan vara en bra idé om du använder väldigt många bildikoner i samma storleksmått.

Embedda bilder
Förutom att inlinea CSS och Javascript i HTML-koden så kan man Base64-encoda bilderna och på så sätt embedda de direkt i HTML-koden, utan att behöva öppna ny request för bildfilen. Du gör alltså en enda lång datasträng som representerar bilden och gör en URI i stil med:

<img src=”data:image/jpeg;base64,/9j/4AAQ….”>

• data = name of the scheme
  
• image/jpeg = content type
  
• base64 = the type of encoding used to encode the data
  
• ,/9j/4AAQ.. = the encoded data string

Det finns (surprise) en bugg som gör att det inte fungerar rätt av med IE och Vista, men det går att komma runt det, se länken ovan som visar ett fungerande Cross-browser exempel.