1. Klientsideoptimering
(Eller webbprestandaoptimering.)

2. Vilka är vi och
vad gör vi här?
Svante Adermark & Peter Lindberg,
Fleecelabs.
Mktwebb: 47 tidningar och problem med
webbprestanda.
Trimlabb: ett åtgärdspaket för snabb webb.

3. 3 saker vi vill ha sagt idag.
1. Att webbprestanda handlar om vikt, antal
och tajming.
2. Att det finns sex lågt hängande
webbprestandafrukter som många missar.
3. Att det är lätt att komma igång med
webbprestanda.

4. Vad menas med
webbprestanda?

5. Vad menas med
webbprestanda?
Allt som sker från det att HTML-dokumentet
lämnar servern.
Det andra är ”vanlig” serverprestanda.
Jämförelsevis är det ett moget ämne.
Och vi är bra på det.

6. Aftonbladet 0,5 s
Expressen 0,7 s
DN 0,7 s
SVT 0,6 s
SvD 0,8 s
TV4 0,8 s
SR 0,4 s
GP 0,7 s
Sydsvenskan 0,8 s
Kanal 5 0,8 s

7. Aftonbladet 0,5 s 13,6 s
Expressen 0,7 s 11,0 s
DN 0,7 s 12,0 s
SVT 0,6 s 6,7 s
SvD 0,8 s 10,2 s
TV4 0,8 s 13,7 s
SR 0,4 s 5,5 s
GP 0,7 s 9,4 s
Sydsvenskan 0,8 s 8,7 s
Kanal 5 0,8 s 6,9 s

8. Aftonbladet 4 % 96 %
Expressen 6 % 94 %
DN 6 % 94 %
SVT 9 % 91 %
SvD 8 % 92 %
TV4 6 % 94 %
SR 8 % 92 %
GP 8 % 92 %
Sydsvenskan 9 % 91 %
Kanal 5 12 % 88 %

9. Vad menas med
webbprestanda?
Vi har mycket att lära oss om
webbprestanda.
Och vi har mycket att jobba med.
92 % av laddtiden!

10. Webbprestanda
handlar om
vikt, antal och tajming.

11. 1. Vikt.
Kanske det första man tänker på.
Mer data tar längre tid att ladda ned.
Och det ser ut att stämma…

12. SR 5.5 s 1.1 MB

13. SR 5.5 s 1.1 MB
SvD 10.2 s 2.0 MB

14. SR 5.5 s 1.1 MB
SvD 10.2 s 2.0 MB
AB 13.6 s 2.2 MB

15. SR 5.5 s 1.1 MB
SvD 10.2 s 2.0 MB
AB 13.6 s 2.2 MB
TV4 13.7 s 2.8 MB

16. 1. Vikt.
Kanske det första man tänker på.
Mer data tar längre tid att ladda ned.
Och det ser ut att stämma…
…till viss del.

17. 2. Antal.
Dvs antal objekt på sidan – bilder, css-filer,
javascript m m.
Dyrt för webbläsaren att koppla upp.
Begränsat antal requester parallellt.
Så det kan ha ännu större effekt på laddtiden.
Och det ser ut att stämma…

18. SvD 10.2 s 2.0 MB
AB 13.6 s 2.2 MB

19. SvD 10.2 s 2.0 MB 188 st
AB 13.6 s 2.2 MB 311 st

20. SvD 10.2 s 2.0 MB 188 st
AB 13.6 s 2.2 MB 311 st

21. SvD 10.2 s 2.0 MB 188 st
AB 13.6 s 2.2 MB 311 st
Expr 11.0 s 2.4 MB 276 st

22. SvD 10.2 s 2.0 MB 188 st
AB 13.6 s 2.2 MB 311 st
Expr 11.0 s 2.4 MB 276 st
Syd 8.7 s 1.4 MB 284 st

23. SvD 10.2 s 2.0 MB 188 st
AB 13.6 s 2.2 MB 311 st
Expr 11.0 s 2.4 MB 276 st
Syd 8.7 s 1.4 MB 284 st
GP 9.4 s 1.7 MB 171 st

24. 2. Antal.
Dvs antal objekt på sidan – bilder, css-filer,
javascript m m.
Dyrt för webbläsaren att koppla upp.
Begränsat antal requester parallellt.
Så det kan ha ännu större effekt på laddtiden.
Och det ser ut att stämma…
…till viss del.

25. 3. Tajming.
Men kanske viktigast är att man ser till att
webbläsaren gör rätt sak vid rätt tillfälle.
Ofta är det dålig tajming som gör sajter slöa.
Dålig tajming: css vid fel tillfälle; javascript vid
fel tillfälle; iframes (alltid dålig tajming).

26. Dåligt tajmad javascript.
Blockerar sidladdning helt medan javascript
exekveras.
I äldre webbläsare redan vid laddning.
Anledningen är att att webbläsaren inte kan
veta vad som händer i scriptet; DOM-trädet
kan förändras precis hur som helst.

28. 0,8 s
0,4 s

29. Dåligt tajmad css.
I bästa fall visas innehåll ostilat tills css har
laddats.
I värsta fall visas ingenting.
I båda fallen tar det längre tid att ladda sidan
– eller upplevs åtminstone så av besökaren.
Anledningen är att webbläsaren försöker
undvika att rita om sidan.

30. Det är sällan bra tajming när
det gäller iframes.
Dyrt för webbläsaren.
Fördröjer onload-eventet.
Massor av märkliga blockeringsfenomen om
taggen innan är javascript eller css.

32. 0,8 s
0,9 s
2,9 s

33. Vikt, antal och tajming.
Webbprestanda handlar alltså om att minska
sajters vikt.
Och antal objekt på varje sida.
Samt att tajma dem väl.
Då kortar man i regel laddtiden.
Men framförallt ökar man den upplevda
prestandan.

34. Upplevd webbprestanda,
inte bara laddtid.
Vi har pratat om laddtider.
Men de visar inte hela sanningen.
Två sajter kan ladda på lika lång tid, men om
den ena är vältajmad upplevs den som
mycket snabbare.
Det finns verktyg för att mäta detta.
(Vi kommer till dem strax.)

35. 6 lågt hängande
webbprestanda-
frukter.

36. 6 lågt hängande
webbprestandafrukter.
Ja, webbprestanda kan bli komplext.
Och vissa webbprestandaproblem kan vara
krävande att åtgärda.
Men det finns flera enkla och effektiva
åtgärder.
Och alla verkar inte känna till dem.

37. Aktivera gzip i webbservern.
Innebär att webbservern komprimerar html,
css och javascript.
Därmed minskar vikten.
3 av de 10 största mediesajterna har inte
aktiverat gzip.
För SVT skulle laddtiden kortas med 1,2
sekunder (av 8,0 sek).

38. Låt webbläsaren cacha länge.
Att det är bra att cacha i webbläsaren är
inget kontroversiellt påstående.
Ändå saknar 1 av de 10 största medie-
sajterna cachedirektiv; 5 av dem cachar
kortare än ett dygn; 3 st kortare än 30 min.
Det finns ingen anledning att inte cacha långt
in i framtiden när man väl gör det.
För en stor svensk e-handelssajt kortade vi
laddtiden från 0,8 till 0,4 sekunder.

39. Minifiera css och javascript.
Innebär att man komprimerar filerna genom
att eliminera whitespace, ersätta med mer
kompakt kod osv.
Därmed minskar vikten.
3 av de 10 största mediesajterna skulle vinna
på att minifiera.
För SVT skulle laddtiden kortas med 0,4
sekunder (av 8,0 sek).

40. Optimera bilder.
Innebär att man kodar om bilder mer
effektivt – utan försämring av kvalitet.
Därmed minskar vikten.
5 av de 10 största mediesajterna har vinster
att göra – i snitt 151 KB eller 8,8 % av totala
sidvikten.
För SVT skulle laddtiden kortas med 1,0
sekund (av 8,0 sek).

41. Ladda css tidigt.
Detta har alltså med tajming att göra.
Som sagt kan sen css antingen blockera
visning eller orsaka omritning av sidan.
Annars får man sämre upplevd prestanda
och möjligen långsammare laddning.
Därför vill man lägga all css överst i head.
9 de 10 största mediesajterna gör rätt, men
4 st har inbäddad css sent i laddningen.

42. Ladda javascript sent.
Javascript blockerar alltså sidladdning. Så
det är också en fråga om tajming.
Helst vill man ladda absolut sist. Men även en
liten senareläggning kan ha betydande effekt.
Samtliga av de 10 största mediesajterna har
javascript som kan flyttas ned.
För Expressen skulle laddtiden kortas med
0,2 sekunder (vid nedflyttning av 5 javascript
till botten, samt 3 till början av body).

43. 6 lågt hängande
webbprestandafrukter.
Aktivera gzip i webbservern.
Låt webbläsaren cacha länge.
Minifiera css och javascript.
Optimera bilder.
Ladda css tidigt.
Ladda javascript sent.

44. Kom igång med
webbprestanda!

45. Kom igång med
webbprestanda!
Nu vet ni förhoppningsvis lite om hur
webbprestanda fungerar och vilka några av
de enklare åtgärderna är.
Och vi hoppas vi har övertygat er om att det
finns stora vinster att göra.
Men hur kommer man igång?

46. Kom igång med
webbprestanda!
Skaffa verktyg.
Börja mäta.
Läs på.
Gör det till en vana.

47. Verktyg:
YSlow & Page Speed.
Firefox-tillägg från Yahoo och Google.
Båda räknar ut ett betyg för en webbsida
som blir högre ju bättre sidan följer best
practices för webbprestanda.
Bra eftersom alternativet vore långa
mätserier och mediantid.
Betyget korrelerar dessutom väl med
upplevd prestanda.

48. Verktyg:
fliken ”Net” i Firebug
Krävs för att upptäcka dålig tajming.
Vattenfallsdiagram som visar alla requester
längs en tidslinje.
Håll utkik efter luckor.
Och ögonblick då kurvan planar ut.

50. Börja mäta och gör det
till en vana.
Börja använda verktygen och lär dig förstå
din sajts karaktär.
Gör det till en del av utvecklingsprocessen.
Dels för att mäta förbättringsåtgärder.
Dels som regressionstest.

51. Läs på.
Läs Steve Souders ”High performance web
sites” och ”Even faster web sites”.
Se hans föreläsningar (sök på hans namn på
YouTube).
Läs hans blogg på stevesouders.com och följ
honom på Twitter (@souders).

52. Sammanfattning

53. Sammanfattning
Webbprestanda handlar om att hålla nere
vikten och antalet objekt, samt om att få till
en grym tajming.
Börja plocka den lågt hängande frukten.
Gör det till en vana att hålla koll med YSlow,
Page Speed och fliken ”Net” i Firebug.

54. Frågor?

55. Inte lika lågt
hängande webb-
prestandafrukt
(bonusmaterial).

56. Inte lika lågt hängande
webbprestandafrukt.
Det finns massor av möjliga åtgärder bortom
dessa enklare.
De kräver lite mer arbete.
Och lite mer analys.

57. Slå ihop css och javascript.
Antal objekt är som sagt kritiskt.
Därför är det slösaktigt att ha fler än en
javascript- och css-fil.
Samtliga av de 10 största mediesajterna har
filer de skulle kunna slå ihop (i snitt 2 eller fler
css; 4 eller fler javascript).
Varför inte lågt hängande frukt? Kräver mer
analys för att vara säker på effekten.

58. Slå ihop bilder som css-
sprites.
Många mindre bilder klistras ihop till en eller
ett fåtal stora. Med hjälp av css klipper man
sedan ut den bild man önskar.
Detta minskar antalet objekt.
Vanligt förekommande men då oftast ett
mindre antal bilder som hör ihop. Poängen är
att kraftigt minska antal requester.
Kräver en del arbete och analys av effekt.

59. Dela upp javascript och tajma
laddningen.
Målet är att ladda all javascript så sent som
möjligt.
Men ibland behövs kod i ett tidigare skede.
Då kan det vara värt att bryta ur dessa delar
och ladda resten sent.
Kräver en del analys.

60. Plocka russinen ur javascript-
biblioteket.
Ofta används bara delar av de javascript-
bibliotek som laddas.
Genom att extrahera bara det som används
kan man minska vikten.
Dessutom behöver webbläsaren inte tolka
lika mycket javascriptkod, vilket kan ha effekt
på laddtiden.

61. Parallellisera requester.
De flesta moderna webbläsare har som mest
sex requester samtidigt mot en viss server.
I IE7 och tidigare är det två samtidiga.
Detta begränsar hur snabbt ett större antal
objekt kan laddas.
Med ett par CNAME kan man få webbläsare
att ladda fler objekt på kortare tid.
Kräver analys.

62. Begränsa antalet
domännamn.
Det är dyrt att göra DNS-uppslag.
Ju fler domännamn som behöver slås upp
desto större effekt på laddtiden.
För de 10 största mediesajterna är
genomsnittet 16 domännamn.

63. Ajaxifiera.
Innebär att man med hjälp av javascript och
asynkron laddning minskar mängden data
som laddas.
Antingen genom att man skjuter upp
laddning av innehåll tills sidskelettet laddats
eller senare.
Eller att man laddar om delar av sidan vid
klick snarare än att ladda en helt ny sida.

64. Var försiktig med widgets.
Det är populärt med widgets – från små som
visar din Twitter-status till större som ger dig
en komplett kommentarsfunktion.
Men vet du vilken effekt de har på din
laddtid?
Se till att mäta laddtid före och efter.
Se åtminstone till att de laddas asynkront
efter onload-eventet.

65. Var försiktig med iframes.
De kan vara riktigt stygga mot laddtiden.
Vissa annonser använder iframes som
skapas av javascript, i vilka andra javascript
skapar ytterligare iframes.
Håll koll med fliken ”Net” i Firebug.

66. Tack för oss!

67. Tack för oss!
Svante Adermark · svante@fleecelabs.se
Peter Lindberg · peter@fleecelabs.se
fleecelabs.se/trimlabb/
Läs mer om webbprestanda på vår blogg:
fibban.fleecelabs.se/snabbladdad-webb/