Your SlideShare is downloading. ×
0
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
OPTIMERA STHLM! Fleecelabs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

OPTIMERA STHLM! Fleecelabs

1,260

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Apropå att minifiera CSS och javascript så går det bra att minifiera dem online på http://www.minifiera.nu/

    Om man nu inte vill ladda ned en minifierare till sin egen dator vill säga :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,260
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide



































































  • Transcript

    • 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.
    • 27. 0,8 s 0,4 s
    • 28. 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.
    • 29. 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.
    • 30. 0,8 s 0,9 s 2,9 s
    • 31. 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.
    • 32. 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.)
    • 33. 6 lågt hängande webbprestanda- frukter.
    • 34. 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.
    • 35. 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).
    • 36. 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.
    • 37. 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).
    • 38. 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).
    • 39. 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.
    • 40. 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).
    • 41. 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.
    • 42. Kom igång med webbprestanda!
    • 43. 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?
    • 44. Kom igång med webbprestanda! Skaffa verktyg. Börja mäta. Läs på. Gör det till en vana.
    • 45. 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.
    • 46. 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.
    • 47. 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.
    • 48. 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).
    • 49. Sammanfattning
    • 50. 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.
    • 51. Frågor?
    • 52. Inte lika lågt hängande webb- prestandafrukt (bonusmaterial).
    • 53. 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.
    • 54. 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.
    • 55. 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.
    • 56. 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.
    • 57. 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.
    • 58. 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.
    • 59. 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.
    • 60. 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.
    • 61. 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.
    • 62. 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.
    • 63. Tack för oss!
    • 64. 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/

    ×