onsdag 13 februari 2008

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.

3 kommentarer:

  1. Jag har använt mig av precis samma checklista i ett jobbprojekt för inte så länge sedan. Det jag framförallt riktade in mig på var att minska antalet HTTP anrop genom att minska antalet externa script och CSS filer. Jag använde Yahoo's YCompressor som komprimerar javascript och CSS. Den är behändigt nog skriven i java - och eftersom jag lever i java-världen kan jag inkludera den i byggsteget och då först slå ihop alla javascript filer till en och därefter minifiera resultatet.

    HTTP compression är något jag verkligen vill aktivera för att se om det gör någon skillnad. Grejen är att mitt projekt går på trådlöst nät där klienterna egentligen aldrig hinner utnyttja cachen eftersom de startas om ganska ofta (och då töms cache). Men att spara 40% låter lockande...

    SvaraRadera
  2. Riktigt tuffa saker. GZIP-grejen är enkel men riktigt effektiv kan jag tänka mig.

    SvaraRadera
  3. Tack för tipset, riktigt bra checklista.

    SvaraRadera