Leksaksbutik med imagesprites?

Igår drog vi igång ett väldigt stor projekt som involverar en nätbutik som säljer leksaker. Butiken ifråga har väldigt mycket trafik under en koncentrerad del av året då nästan 70% av försäljningen sker kring julhandeln. Detta resulterar ofta i stor belastning på servrarna.

Så vad kan man då göra för att begränsa belastningen? Sätten är många, men idag skall vi prata om en realtivt ny metod som bara har använts något år (på webben). Det rör sig om imagesprites och png-bilder. Som de flesta vet, eller som de flesta gränssnittare vet så stödjer inte Internet Explorer 6 PNG-formatet alls. Det finns smarta sätta att gå runt det problemet bl.a med hjälp av Twin Helix trevliga HTC-fil som ger stödet i IE6, alternativt att man väljer att ge IE6 en gif istället. Inget nytt.

Risken med sprites är att de kan bli rätt stora då man som jag, gärna använder en sprite uteslutande till alla element på sajten. Hur som helst, filernas storlek galopperar iväg men det är ändå ett bättre alternativ än att skicka 100 requests till servern än att skicka 1 (självklart finns det begränsningar, tänk till, används alla element i spriten på samtliga sidor? Om inte, gör en till sprite.). Dessutom är det inget som säger att den totala filstorleken skulle bli mindre för att du har många små filer, det är snarare tvärtom. Det går självklart att optimera filerna. Alternativen är många men jag har fastnat för den riktigt vassa Punypng som fick min filstorlek att minska med hela 37%! Istället för 47 kb gick den ner till 36 kb vilket resulterar i en laddningstid på mindre än en sekund på 512 kbit. Klart godkänt! Punypng använder också den senaste tekniken med ”Dirty Transparency” som förklaras mer i detalj i en ganska nyligen utgiven artikel på Smashin Magazine och som ger dig betydligt bättre optimering än tidigare.

Personligen använder jag den här tekniken i alla nya projekt och har nu gjort det under ca ett års tid. Resultatet är riktigt bra! Eftersom att Leksaksbutiken är det största e-handelsprojektet hitills har vi verkligen fått ta oss en funderare kring hur vi skall optimera filstorlekarna och requesten till sajten. Imagesprites är bara en liten del i arbetet, men av väldigt stor vikt! Fundera gärna själv, vad händer om du istället för att skicka 100 request till servern bara skickar 1?

Riktigt trevligt tycker vi!