Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimera din sidladdning - en djupdykning i prestanda på webben

2,247 views

Published on

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
  • Be the first to comment

  • Be the first to like this

Optimera din sidladdning - en djupdykning i prestanda på webben

  1. 1. Optimera din sidladdning En djupdykning i prestanda på webben Jesper Petersson @PeterssonJesper
  2. 2. Varför bry sig?
  3. 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. 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. 5. En studie om stress • 95% av våra beslut bygger på känslor • 4 olika hemsidor
  6. 6. Resultat • 12-25% mer frustrerade • No shit? http://www.slideshare.net/Radware/velocity-mobile-webstressperformanceux
  7. 7. Agenda • Nätverk • Laddning av resurser • Framtiden
  8. 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. 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. 10. Det löser sig, right?
  11. 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. 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. 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. 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. 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. 16. 3G, 3.5G, 4G • Annan designfilosofi • Nödsamtal, prioriterad data, batteritid • RRC (Radio Resource Controller)
  17. 17. 3G, 3.5G, 4G • Annan designfilosofi • Nödsamtal, prioriterad data, batteritid • RRC (Radio Resource Controller) En förenklad bild av verkligheten
  18. 18. SYN SYN+ACK GET /index.html HTTP/1.1 <html>...</html> Webbläsare! Webbserver
  19. 19. TCP slow start • Hur mycket data ska vi skicka? • Nätverket kan vara överbelastat • Lösning: Congestion control
  20. 20. TCP slow start 70 60 50 40 30 20 10 0
  21. 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. 22. Laddning av resurser • Ordningen spelar roll • CSS i <head> • Javascript precis innan </body> • Modernizr inline i <head>
  23. 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. 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. 25. Quick fixes • Konkatenering av Javascript / CSS • Minifiering av Javascript / CSS / HTML • Spriting av bilder • base64-enkodning av bilder • gzip • (LZ77 + huffmankodning)
  26. 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. 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. 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. 29. Att mäta prestanda • Tid till rendering bör prioriteras! • Mät i RTTs istället för sekunder
  30. 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. 31. Framtiden
  32. 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. 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. 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. 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. 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. 37. Framtiden Nutiden

×