Så snabbar du upp din sajts laddningstid

Jag tror att man i de flesta större webbprojekt är mån om att sajten man bygger ska ladda snabbt.

Men då tror jag man spenderar det mesta av sitt krut på att få sina servrar att svara snabbt.

Och det är förstås bra. Men faktum är att servrarnas arbete bara står för 10–20% av den tid det tar för en webbsida att ladda.

Det betyder att 80–90% av tiden spenderas i webbläsaren. Och jag tror att alltför många webbprojekt missar att optimera här.

Bevisa gärna att jag har fel; men ju fler sajter jag tittar närmare på, stora som små, desto starkare min övertygelse att det är så.

Innan jag fortsätter vill jag betona att jag själv såg på det såhär tills för något år sedan. Jag visste att svarstider är viktiga. Och jag visste att bilder inte ska vara för stora – liksom de andra filer en webbsida består av. Jag visste också att det är bra att slå ihop många små bilder till en stor och låta webbläsaren ”klippa” ut småbilderna (s k ”css-sprites”). Men utöver det har jag gjort mig skyldig till massor av brott mot snabbladdningens regler.

Men hur ska man göra om man byggt en sajt vars servrar är blixtsnabba men där den laddas långsamt i webbläsaren?

Jag har några tips. Det jag själv tycker är bäst är vår tjänst Trimlabb: vi gör en gratis provtrimning av er sajt – och du behöver inte göra något mer än att säga till. När vi är klara berättar vi hur mycket vi kunde korta era laddningstider. Därefter kan du beställa en manual av oss där vi beskriver steg för steg vad ni behöver göra för att snabba upp er sajt. Läs mer och anmäl er sajt på Trimlabb-sajten.

Vill du hellre göra det själv har jag några tips att börja med:

• Se till att du har aktiverat komprimering i din webbserver. Förvånansvärt många missar detta. Om du slår på Gzip kommer det som skickas från webbservern packas ihop så det skickas snabbare.
• Aktivera ”cachning” i webbservern. Det hör det möjligt för webbläsaren att spara bilder och filer som förekommer på fler sidor. Då behöver de inte hämtas på nytt när man klickar sig vidare på sajten, vilket ger snabbare sidladdning.
• Lär dig hur css-sprites fungerar. Och slå ihop alla småbilder till en eller två stora. Detta gäller sådana bilder som hör till själva sajten snarare än innehållet; dvs kantbilder, hörn, bakgrunder osv. Sedan ser du till att den cachas riktigt länge.
• Slå ihop alla css- och Javascript-filer. Du vill helst bara ha en av varje. Kom ihåg att det är väldigt tidskrävande för webbläsaren att ladda filer från webbservern. Väldigt ofta ser man en räcka pyttesmå css- eller Javascript-filer laddas i följd, vilket tar oerhört mycket längre tid än om de slås ihop till en.
• Flytta css-filen överst på sidan. Det som händer om du laddar css sent är att många webbläsare pausar sidladdningen tills filen laddats klart. I värsta fall måste sidan dessutom ”ritas om” vilket ytterligare slöar ned.
• Flytta Javascript-filen så långt ned på sidan som möjligt. De flesta sajter har sitt i html-filens topp. Detta är särskilt illa nu när Javascript används mer och mer. Det som händer är att webbläsaren stoppar sidladdningen helt tills Javascript-filen laddats klart och all kod tolkats och körts. Du vill åtminstone vänta med att ladda Javascript tills allt ovanför ”skrollgränsen” laddats.

De här tipsen och några till finns i Steve Souders utmärkta bok High performance web sites (Bokus, Adlibris); på Souders sajt finns en sammanfattning Och du kan använda verktyget Yslow för att mäta hur väl du följer dem.

Ställ gärna frågor om webbprestanda till oss. Antingen som en kommentar till detta inlägg eller i ett mejl – eller ställ frågan på Twitter.

Och varför inte låta oss ta ned din sajt i vår testbänk för en trimning? Det kostar inget förrän du fått reda på hur mycket vi kan snabba upp den. Bara anmäl dig på Trimlabb-sajten.

Foto av Jeff Attaway under Creative Commons-licens.

Comments

[Anders]

Det är rätt i tiden att börja tala om prestanda nu. Härligt med ett svenskt initiativ, jag hejar på er.

[Plindberg]

Tack!

[Jonatan Larsson]

Bra sammanfattning! Som alternativ till css-sprites kan man även föreslå base64-enkodade bilder.

[Peter]

Jonatan: Tack! Meebo har en rätt bra genomgång av för/emot de olika fallen med sprites, base64-kodade bilder som data-URL:ar och som MIME-part om man servar HTML som multipart: http://blog.meebo.com/?p=2320. Känns dock som det är smidigare att handskas med dem som sprites såvida inte man bäddar in dem automatiskt i backend.

[per å]

Har ni gjort verktyg för det här eller gör ni testerna manuellt?

[Peter]

Per: Till analys använder vi bland annat nämnda Yslow, samt Google Page Speed, nätverksvyn i Firebug och några till. När vi trimmar använder vi lite olika verktyg, t ex för att bygga CSS-sprites (SpriteMe, CSS Sprite Generator), minifiera CSS och Javascript (YUI Compressor) m m.

Men även om det finns bra verktyg går det inte riktigt att automatisera det här. Man får analysera, göra optimeringar, analysera igen, göra fler optimeringar osv. Och även om man fått ett enskilt moment snabbare kan det få sidladdningen som helhet att bli slöare.

[Anders]

Alldeles sant. Det är inte bara den mätbara laddtiden utan också den upplevda laddtiden som måste räknas in, även om det är mer av en filosofisk diskussion som alltid ska föras så specifikt som möjligt.

En sajt som enligt mätning har god prestanda kan upplevas som långsam av en slutanvändare om laddtiden som helhet är dåligt balanserad.