Arbete med Google Page Speed Score

Idag har jag arbetat lite med Google Page Speed Score för vår shoppingsajt Shoppinggatan. Givetvis vill jag att sajten ska vara så snabb som möjligt, men som med allt i livet så handlar det ofta om kompromisser, där man prioriterar det som är viktigast.

Google Page Speed finns som ett instick till Firebug, och man får ett helhetsbetyg för sin sajt (0-100) och en lista över punkter som verktyget granskar. Om man uppfyller verktygets krav så syns det en liten grön "lampa" bredvid punkten, och om man inte gör det så blir lampan orange (om det är lite smådåligt) eller röd (om något är tokdåligt).

Och givetvis försöker man bearbeta de rödmarkerade punkterna först. Idag har jag exempelvis arbetat med cachningen av de bilder som hanteras av Amazons CDN. Genom att lägga till expirtion och cache-control kunde jag enkelt förvandla en röd punkt till en grön.

På många sidor märks inte en sån liten ändring, men på en sajt som Shoppinggatan, där man surfar mellan sidor med kläder, inredning och möbler, får man se hundratals småbilder. Då kan cachning av bilderna göra stor skillnad för användarens sajtupplevelse.

Dagens förmiddagsövning gav ett litet resultat: Sidan gick från 85 till 90 i "betyg" med Google Page Speed Score.

Varumärken på Shoppinggatan

På Dagens media kan man idag läsa att Acne, Odd Molly och Cheap Monday är de varumärken som dominerar på webben. Givetvis intressant läsning, och Google Insights visar på samma sak.

I vårt arbete på Shoppinggatan är det givetvis viktigt för oss att ha ett så brett utbud som möjligt inom just mode: Kläder är Shoppinggatans primära målgrupp, så klänningar, jeans, blusar och byxor från bland annat Odd Molly och Cheap Monday såg vi tidigt till att få in i vår sociala sökmotor.

En översyn visar dock att vi just nu faktiskt inte har några produkter från Acne. Ett stort fel med tanke på hur populära de är, och något som vi kommer att ta tag i inom kort.

På Shoppinggatan strävar vi alltid efter att ha ett brett och kvalitativt utbud inom just kläder, inredning och möbler, och vi har i dagsläget över 100,000 varor från Sveriges 150 främsta webbshoppar.

Utveckling i full fart

Just nu håller vi på att göra om utseendet på Shoppinggatan. Sveriges bästa sociala sökmotor inom mode & inredning ska bli snyggare, snabbare och mer social.

När vi valde webbhost för Shoppinggatan la vi stor vikt vid stabilitet, och valde Amazon EC2. Amazon har väldigt stabila tjänster, och nertiden har varit obefintlig.
Dock så är svarstiderna inte riktigt lika bra, och därför lägger vi mycket krut på att göra grafiken mycket mer snabbladdad. Bland annat använder vi oss numera av CSS-sprites, något som säkerligen kommer att minska på laddningstiderna ordentligt.

I juli kommer en uppdaterad, snygg version av Shoppinggatan att se dagens ljus, så kika in på sajten med jämna mellanrum för att se hur arbetet fortskrider.

Vårt arbete för vår målgrupp ger oss en långsiktig konkurrensfördel

Idag är det drygt ett och ett halvt år sedan vi på 49lights öppnade upp den första versionen av Shoppinggatan.se för allmänheten. Jenny, 49lights vd, hade en tydlig vision av vem hon främst ville attrahera med sajten; Unga, inrednings- och modeintresserade kvinnor mellan 20 och 35 år. Ett naturligt val, då Jenny själv befinner sig mitt i målgruppen. En tydlig målgrupp, som för oss hela tiden har fungerat som ett rättesnöre när det gäller allt från val av webbshoppar, produkter, bokrekommendationer, blogginlägg och reklam. Vi ville naturligtvis också vara attraktiva även mot en bredare målgrupp, sajten ska vara välkomnande och inkluderande för alla, men som sagt fungera extra bra mot vår primära målgrupp.

Jag vet inte hur många gånger vi har suttit runt bordet och bråkat om innehållet. Till synes attraktiva reklamerbjudanden och affiliateavtal har förkastats på grund av felaktig värdegrund (här kan man nog läsa att sajter har försökt sälja kläder med sexuella anspelningar och unga, lättklädda tjejer).

På samma sätt har vi stött och blött SEO-ansatser, där jag och Peter som webbanalytiker har lyft fram sökord som borde ge många besökare. ”Stoppa in fler varumärken i rubriken”, ”En lista över fiffiga sökord längst ner på sidan”, och säkert ytterligare 1000 förslag grundade i SEO.

Men Jenny har stått bergfast i sin syn på sajten. Det som inte har passat med det varumärke som vi tidigt slog fast har inte släppts in. Det som inte tillför besökaren något har heller ingen plats på sajten. Och utifrån de ramarna har vi arbetat med Shoppinggatans SEO.

Som utvecklare och medgrundare av sajten har jag givetvis många gånger känt stor frustration – snabba pengar och snabba ökningar är givetvis något som känns lockande. Just därför känns det numera väldigt skönt när man kikar på segmenterade besökarna i Google Analytics, då jag kan stämma av att just målgruppernas användning av sajten stämmer överens med vår målsättning.

För det gör den. Vi kan exempelvis se att av Shoppinggatans besökare är 75% kvinnor och lojaliteten bland 20-30 åriga tjejer är 181% högre än hos en genomsnittlig besökare. Vi vet alltså att vi har lyckats locka precis de besökare vi ville, och att det viktiga lojalitetsmåttet ser allra bäst ut för den åldersgrupp som ligger närmast vår målgrupp.

Samtidigt kan vi se att besökarantalet hela tiden ökar. Januari 2010 hade 394% fler besökare än januari 2009 och 14% fler än i december 2009, och vi ligger numera på dryga 50,000 unika besökare och 350,000 sidvisningar per månad. Vi är definitivt inte i mål ännu, men tiden talar för oss.

Jag tror att vårt sätt att förhålla oss till en målgrupp är rätt. Det har gett oss ett varumärke som är tydligare än våra konkurrenters, och det ger oss en fördel bland besökare i allmänhet och de i målgruppen i synnerhet.

Kvinnor 116% mer klickbenägna på leksaksannons

Inlägget är flyttat till 49buzz - en företagsblogg: Kvinnor 116% mer klickbenägna på leksaksannons.

Javascript MVC

När man jobbat mycket med Javascript så är det lätt hänt att man tappar lite av den kontroll man gärna vill ha i ett projekt. Så därför håller jag på att utveckla en MVC-modell för våra projekt, baserat på prototype.js. So far, efter knappt 600 rader kod, verkar det lovande, jag har försökt att efterlikna sättet Zend Frameworks API, då det onekligen är ett rätt genomtänkt API.

Ett snabbt exempel på hur det kan se ut:

// Script-delar:
...
// Modell för favoriter:
var FNLModel_Favorites = Class.create(FNLModel,{
   init:function($super, params){
      this.primary_key='user_product_id';
      $super(params);
   }
});   
...
// Javascriptdelen av view för favoriter
var FNLView_SingleSmallFavorite = Class.create(FNLView_Simple,{
   init:function(params){
      this.template = 'TEMPLATE_SINGLE_FAVORITE';
   }   
});
// Javascriptdel av en view för en favoritlista
var FNLView_SmallFavoriteList = Class.create(FNLView_Simple,{
   init:function(params){
      this.template = 'TEMPLATE_SMALL_FAVORITE_LIST';      
   },
   render:function($super,self){
      var str = '';
      for(var i=0;i<self.favorites.length && i<15;i++){
         self.favorite = self.favorites[i];
         str += self.render('SingleSmallFavorite');
      }
      self.favoriteContent = str;
      return $super(self);      
   }
});
...
// Controller för favoriter
var FNLController_FavoriteListLeft = Class.create(FNLController,{
   init:function(params){
      var self = this;      
      this.target = params.target;
      var callback = this.callback.bind(this);
// Lyssna efter uppdateringar av favoriter via ajax
      this.fnlTools.addEventListener({id:'favorites',event:FNLToolsEvents.ajaxResponse,callbackFunction:callback});
// Och se till att favoriterna uppdateras vid serveranrop.
      this.fnlTools.registerAjaxListener(this,FNL_CLUB_LISTENER_URL, 'favorites','user_product_id',-1);
      this.id=fnlTools.newUID;
   },
   callback:function(event){
      this.view.favorites = event.model.data;
      this.view.fnl_id = this.id;         
      str = this.view.render('SmallFavoriteList');         
      $(this.target).innerHTML = str;   
            
// Uppdatera serveranroparen så att den bara kollar efter nya favoriter
      this.fnlTools.updateAjaxListener(FNL_CLUB_LISTENER_URL, 'favorites',event.model.max());            
   }
});

...

// init-kod
fnlTools = new FNLToolsClass();
var productListUpdater = fnlTools.getController('ProductList',{target:'productList3'});


samt html-element som fungerar som templates:
<div id='TEMPLATE_SMALL_FAVORITE_LIST' style='display:none'>
#favoriteContent#
</div>
<div id='TEMPLATE_SINGLE_FAVORITE' style='display:none'>
<a target="_blank" href="#favorite.p_url#"><img width="44" title="#favorite.name#" src="http://stat2.shoppinggatan.se/public/images#favorite.thumb_local_url#" style="border: 2px solid rgb(201, 205, 208);"/></a>
</div>

Och vad gör då detta exempel? Jo, ett element med favoritprodukter skapas, och hålls dessutom uppdaterad om nya favoriter läggs till, endera i samma dokument, eller från en annan instans (för samma användare). Givetvis hanterar den dessutom hur många element som helst med samma innehåll, alla hålls uppdaterade i vilket fall. Det är också mycket lätt att hålla koll på alla events som sker på samma sida.

Om man tex skulle skriva ett litet chatrum med den nuvarande modellen så tror jag att det skulle handla om ca 30 minuters arbete, från start till mål. Givetvis inte aktuellt, då jag inte känner någon som chattar längre, men jag tycker ändå att det visar på kodens styrka. Javascripts svaghet med bara visst stöd för klasser syns i koden, men med Prototypes klasshantering så blir det lite enklare att koda.

En fundering som jag har är om det ska vara en instanserad controller per element, eller en instanserad kontroller per aktivitetstyp.

Om du är intresserad av att veta mer om det här, så är det bara att höra av dig.

Reinfeldt sågar Amazon EC2

Som en del i regeringens förberedelser för höstens IT-proposition har statsministern och samtliga statsråd utvärderat varsin webhost. För statsminister Fredrik Reinfeldt föll lotten på Amazon EC2.
”Jag blev glad när jag fick veta att jag skulle testa Amazon – som partiledare har Amazon länge varit en fantastisk källa för litteratur inom statsvetenskap, och molnet har det talats rätt mycket om i Rosenbads korridorer.”

Men glädjen var kortvarig: ”Amazon är en användarmässig katastrof. Dokumentationen är mycket bristfällig, och arbetet med att skapa en Amazon-instans som passar just regeringens behov tog på tok för lång tid. Jag antar att en riktig Linux-hacker skulle klara det väldigt bra, men för en glad amatör som jag själv har det varit en mardröm.”

Reinfeldts stora kärlek till Open Source och molnlösningar är annars en välkänd historia. ”Hemma kör vi inget annat än Ubuntu. Många kollegor säger att Linux inte kan mäta sig med Windows som skrivbordsoperativ, men med den senaste versionen av Gnome finns det inte längre några ursäkter – Linux borde vara det naturliga valet för alla datoranvändare.”

Inom regeringen går åsikterna dock isär. Sten Tolgfors sägs vara en inbiten Mac-entusiast medan Sven Otto Littorin vägrar köra något annat än Windows XP. Göran Hägglund är den udda fågeln med FreeBSD.
”FreeBSD passar KD utmärkt”, berättar Hägglund. ”Min datortekniker säger att den påminner väldigt mycket om partiet – värdekonservativ men ändå frihetsbejakande. Och liksom KD är operativsystemet något av en underdog.”