10 juni, 2010 • Anders

Performance boost i Bliss

Med senaste versionen av Bliss möjliggörs en hel del nya sätt att optimera hastigheten på webbsidan. Vi har provkört Bobolos startsida i Google Page Speed och Yahoos YSlow före och efter senaste versionen av Bliss (1.4.4) och här är resultaten i deras hastighetsrankning där 100 är den (teoretiska) maxoptimeringen. I Google Page Speed noterades en hastighetsökning på 38% och i YSlow 12%. Värt att notera att detta endast är teoretiska siffror, och endast för vår egen sajt www.bobolo.se.

Performance boost

Men en webbsidas hastighet är något som blir viktigare och viktigare. Det har även blivit något Google väger in i sin indexering, om än kanske inte helt avgörande. Men en snabbare sida hamnar högre upp än en exakt likadan sida som är långsammare hade gjort.

Vad har vi gjort då?

Det finns ett antal steg man kan gå igenom för att öka sin webbsidas hastighet. Allt är kanske inte helt möjligt beroende på webbsidans arkitektur, men det här är vad vi gjorde med vår egen:

  • Komprimerade all HTML, javascript och CSS med GZIP
  • Minimera (minify) alla javascript
  • Lade till längre cachning av javascript, CSS och bilder
  • Tog bort externa typsnitt

Vad man alltid skall tänka på

Det finns alltid saker man kan tänka på själv för att öka på webbsidans hastighet.

  • Minska bilders storlek, dvs att aldrig ladda upp större bilder än nödvändigt, att optimera dem innan man laddar upp dem, t.ex med Smush.it och använda så få bilder som möjligt. Ju fler filer egentligen som anropas, desto långsammare blir sidan.
  • Genom att själv köra YSlow och Page Speed, som båda är plugin till Firebug i Firefox, kan man direkt se sidans hastighet och få tips på vad man kan göra för att förbättra den.

Och sen då? Mera mera!

Ja, det går ju faktiskt att jobba vidare med det här ännu mer. Vad som vi själva har kvar på listan är att optimera ännu lite mer. Och detta är något som vi ständigt gör.

  • Konsolidera JS och CSS-filer, ju färre filer, desto färre anrop till webbservern och därmed högre hastighet.
  • Konsolidera bilder, med hjälp av den populära "sprite"-tekniken kan delar av en och samma bild användas på flera ställen. På så sätt minskar vi antalet anrop till server, precis som ovan.
  • Flytta javascript längst ner på sidan
  • Minimera CSS och JS-filer ännu lite till. Detta ger i sig ingen högre hastighetsrankning, men själva datan som skickas till besökarens webbläsare blir ju mindre och det ger ju en hastighetsökning i sig.

När vi lyckats med de tre punkterna ovan har vi nog optimerat så långt vi kan i vårt egna CMS Bliss, det sista steget är att använda ett så kallat Content Delivery Network (CDN) för att kunna servera filer från en server närmare besökaren.