Optimering av webbsajter: front-end
Det finns ruskigt mycket man kan göra för att förbättra prestanda och skalbarhet i en webbsajt/webbapplikation. De senaste dagarna har jag på jobbet suttit och tittat på hur vi kan få front-end-delen av en av våra webbapplikationer att ”gå snabbare” – med avseende på ”upplevd prestanda”, ungefär.
Idag hittade jag en utmärkt ”checklista” som utvecklare på Yahoo har tagit fram just i syfte att optimera front-end hos webbsajter. De kallar den ”Best Practices for Speeding Up Your Web Site” och jag rekommenderar den som läsning för alla som sysslar med webbutveckling på någon som helst seriös nivå.
Sedan länge använder jag Firefox-tillägget Firebug som ett verktyg när jag kodar webb. Lämpligt nog finns det ett plugin till Firebug som utvärderar godtycklig webbsida mot just de 14 riktlinjer som tas upp i nämnd artikel och föreslår vad man kan göra för att förbättra sin prestanda. Grymt bra! Pluginet heter YSlow.
De tips som jag tog till mig och implementerade i vår applikation var framför allt:
- Aktivera HTTP Compression i IIS (på serversidan alltså). Detta innebär att när en klient requestar en fil kommer servern komprimera den med GZIP eller deflate före överföringen om klienten stöder det. Detta minskar förstås storleken på det som verkligen skickas med väldigt mycket och kräver bara en gnutta extra CPU-tid på server (och klient). Instruktioner för hur det går till finns exempelvis här.
- Förbättra cachningsmöjligheterna genom att sätta en Expires-tidpunkt som ligger långt fram i tiden (typ ett år framåt) för statiskt innehåll (bilder, Javascript, CSS-filer).
- Minskat antalet HTTP-requests genom att lägga ihop bakgrundsbilder från knappar och liknande till en och samma bildfil och sedan använda CSS-propertyn background-position för att välja ut rätt område bilden. Principen är ingen nyhet, men den är praktisk. Den beskrivs i detta blogginlägg.
Resultatet? Storleken för överförda filer minskade typiskt med 40-45% då besökaren har tom cache och med 65-70% då cachen innehåller så många av sidans komponenter som möjligt. Rätt grymma grejer om man vill minska trafiken och öka den upplevda hastigheten faktiskt.