Björn Hansson Precis som i framtiden

28Jun/130

Nginx VS Apache performance

I ett större webbaserat onlinespel jag är delaktig i så bytte vi förra året ut Apache mot Nginx. Jag gjorde lite jämförelser med New Relics RUM-verktyg med riktig live-trafik. Appen ligger på Amazon AWS cloud och instanstypen som användes var c1.xlarge (7 GB ram).

Samtliga servrar som är namngivna wwwX kör Apache med PHP som modul. De som är namngivna nginx kör Nginx + PHP-FPM. Vid testtillfället användes senaste stabila versionerna (Augusti 2012). Endast dynamiska requests servades (i princip 100% gick alltså till backenden PHP), all statisk content servades genom ett externt CDN. Då Nginx är känt för att prestera bäst med just statiskt content så hade förmodligen skillnaderna blivit klart större vid ett sådant scenario.

Skärmdumparna får tala för sig själv men slutsatsen man kan dra är ju att Nginx presterar klart bättre vid hög load, loadbalancern ger mer trafik till Nginx-burken och den svarar ändå snabbare, se bild 4 där detta syns tydligt.

app_after_10_hours

Picture 1 of 10

1Dec/090

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.

Update: Det har rapporterats om minnesläckor i lighttpd som trots flera år passerat inte har fixats. Dock inget jag märkt av själv eller haft problem med.

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.