Your SlideShare is downloading. ×
Optimera din sidladdning - en djupdykning i prestanda på webben
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Optimera din sidladdning - en djupdykning i prestanda på webben

1,798
views

Published on

Jesper Petersson, Valtech …

Jesper Petersson, Valtech
Jesper, som jobbar med prestanda på webben, reder ut begreppen och går till botten med hur vi kan optimera vår prestanda.

Published in: Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,798
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
2
Comments
0
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. Optimera din sidladdning En djupdykning i prestanda på webben Jesper Petersson @PeterssonJesper
  • 2. Varför bry sig?
  • 3. Prestanda i siffror • 25% lämnar sidan om laddningstiden > 3s • 80% av de skulle inte komma tillbaka igen • 40% av de skulle berätta för andra om den dåliga upplevelsen http://www.strangeloopnetworks.com/web-performance-infographics/
  • 4. En studie om stress • 95% av våra beslut bygger på känslor • 4 olika hemsidor • Ombads hitta en produkt och checka ut • 500 ms fördröjning • Visste ej om att prestanda studerades
  • 5. En studie om stress • 95% av våra beslut bygger på känslor • 4 olika hemsidor
  • 6. Resultat • 12-25% mer frustrerade • No shit? http://www.slideshare.net/Radware/velocity-mobile-webstressperformanceux
  • 7. Agenda • Nätverk • Laddning av resurser • Framtiden
  • 8. Hur snabbt behöver det gå? Fördröjning Användarupplevelse 0-100 ms Omedelbar 100-300 ms Långsam, trög 300-1000 ms Datorn jobbar... 1000+ ms Börjar tänka på annat
  • 9. Hur snabbt går det? 40% 30% 20% 10% 0% 0-1 Mobil 1-3 3-7 Desktop 7-13 13-21 Sidladdning [s] http://analytics.blogspot.se/2012/04/global-site-speed-overview-how-fast-are.html 21-35 35-60 60+
  • 10. Det löser sig, right?
  • 11. Bandbredd 3200 Sidladdning [ms] 2400 1600 800 0 1 2 3 4 5 6 Bandbredd [Mbps] http://www.akamai.com/stateoftheinternet/ 7 8 9 10
  • 12. Responstid 4000 Sidladdning [ms] 3000 2000 1000 0 240 220 200 180 160 140 120 100 RTT [ms] http://www.akamai.com/stateoftheinternet/ 80 60 40 20 0
  • 13. Minimera laddningstid • Stockholm - New York • Förbättra bandbredden? • “Enkelt” - Gräv en kabel till • Förbättra responstiden? • Ljusets hastighet begränsar oss • ~21 ms • Ljusets hastighet i fiber ~ 0,6c
  • 14. Mobila nätverk • 802.11 a/b/g/n/ac/ad (Wifi) • W-CDMA, UMTS (3G) • HSPA, HSPA+, LTE (3.5G) • LTE advanced, HSPA+ rev 11 (4G) • ...
  • 15. Wifi • RAC - Random Access Channel • 1. Är det ledigt? • 2. Skicka data • 3.Vänta på ACK • Fungerar bra för ett mindre antal klienter • Inga garantier
  • 16. 3G, 3.5G, 4G • Annan designfilosofi • Nödsamtal, prioriterad data, batteritid • RRC (Radio Resource Controller)
  • 17. 3G, 3.5G, 4G • Annan designfilosofi • Nödsamtal, prioriterad data, batteritid • RRC (Radio Resource Controller) En förenklad bild av verkligheten
  • 18. SYN SYN+ACK GET /index.html HTTP/1.1 <html>...</html> Webbläsare! Webbserver
  • 19. TCP slow start • Hur mycket data ska vi skicka? • Nätverket kan vara överbelastat • Lösning: Congestion control
  • 20. TCP slow start 70 60 50 40 30 20 10 0
  • 21. TCP slow start • cwnd kontrolleras på servern • Ökning från 4 till 10 i 2.6.39 • Från ~5,8 kB till ~14,6 kB • Uppdatera kerneln på servern!
  • 22. Laddning av resurser • Ordningen spelar roll • CSS i <head> • Javascript precis innan </body> • Modernizr inline i <head>
  • 23. Laddning av resurser <!DOCTYPE html>! <html>! ! <head>! ! ! <link rel="stylesheet" href="style.css" type="text/css" />! ! ! <script src="modernizr.js"></script>! ! ! <script src="main.js"></script>! ! </head>! ! <body>! ! ! <img src="dog.jpg" />! ! </body>! </html>!
  • 24. Laddning av resurser <!DOCTYPE html>! <html>! ! <head>! ! ! <link rel="stylesheet" href="style.css" type="text/css" />! Ordningen spelar roll ! ! <script> window.Modernizr = …</script>! ! </head>! CSS i <head> ! <body>! ! ! <img src="dog.jpg" />! Javascript precis innan </body> ! ! <script src="main.js"></script>! Modernizr inline i <head> ! </body>! </html>! • • • •
  • 25. Quick fixes • Konkatenering av Javascript / CSS • Minifiering av Javascript / CSS / HTML • Spriting av bilder • base64-enkodning av bilder • gzip • (LZ77 + huffmankodning)
  • 26. Quick fixes • Konkatenering av Javascript / CSS • Minifiering av Javascript / CSS / HTML • Spriting av bilder <html></html>! • base64-enkodning av bilder A = html>! gzip • <A</A • (LZ77 + huffmankodning) !
  • 27. Hämtning av resurser • Cache-headers • Cookie-fria domäner • CDN • Max 6 parallella requests per domän • Domain sharding • Extra DNS-uppslag som straff
  • 28. Hämtning av resurser • Cache-headers • Cookie-fria domäner • CDN • Max 6 parallella requests per domän • Domain sharding • Extra DNS-uppslag som straff
  • 29. Att mäta prestanda • Tid till rendering bör prioriteras! • Mät i RTTs istället för sekunder
  • 30. Att mäta prestanda RTT TCP handshake 1 TLS/SSL handshake 2 Data S ln2 (1 + ) 14.6 S - Storlek i kB av datan som skall överföras
  • 31. Framtiden
  • 32. HTTP 2.0 • Använder en enda TCP-anslutning • Pusha ut resurser • Ingen konkatenering av CSS/JS • Inga mer sprites • Ingen domain-sharding
  • 33. HTTP 2.0 • IE11+ (~56%) * • Alla webbläsartillverkare gillar det! • Planeras vara klart november 2014 • Google, Facebook, Twitter, m.fl. använder det redan * http://caniuse.com/#feat=spdy
  • 34. Nya bildformat • I snitt 1 MB bilder per sida * • Nuvarande bildformat är från 90-talet • Nya bildformat • Webp och JPEG XR http://httparchive.org/interesting.php#bytesperpage
  • 35. Nya bildformat Webp JPEG XR Storlek relativt JPG ~30% mindre ~40% mindre Lossless (tänk png) Ja Ja Lossy (tänk jpg) Ja Ja Animationer Ja (wohoo!) Nej Progressiv dekodning Nej Ja Webbläsarstöd Chrome och Opera! (~40% *) IE (9+)! (~16% **) * http://caniuse.com/#feat=webp ** http://caniuse.com/#feat=jpegxr
  • 36. Nya bildformat • Webp + JPEG XR = Sant • Accept image/webp • ~56% tillsammans, tappar Firefox och mobile Safari • Abstrahera logik till CDN • Akamai stödjer redan detta
  • 37. Framtiden Nutiden