optimera din sidladdning - en djupdykning i prestanda på webben
DESCRIPTION
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.TRANSCRIPT
Optimera din sidladdningEn djupdykning i prestanda på webben
@PeterssonJesperJesper Petersson
Varför bry sig?
• 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/
Prestanda i siffror
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
En studie om stress
• 95% av våra beslut bygger på känslor
• 4 olika hemsidor
Resultat
• 12-25% mer frustrerade
• No shit?
http://www.slideshare.net/Radware/velocity-mobile-webstressperformanceux
Agenda
• Nätverk
• Laddning av resurser
• Framtiden
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
Hur snabbt går det?
0%
10%
20%
30%
40%
Sidladdning [s]
0-1 1-3 3-7 7-13 13-21 21-35 35-60 60+
Mobil Desktop
http://analytics.blogspot.se/2012/04/global-site-speed-overview-how-fast-are.html
Det löser sig, right?
Sidl
addn
ing
[ms]
0
800
1600
2400
3200
Bandbredd [Mbps]
1 2 3 4 5 6 7 8 9 10
http://www.akamai.com/stateoftheinternet/
Bandbredd
Sidl
addn
ing
[ms]
0
1000
2000
3000
4000
RTT [ms]
240 220 200 180 160 140 120 100 80 60 40 20 0
http://www.akamai.com/stateoftheinternet/
Responstid
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
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)
• ...
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
3G, 3.5G, 4G
• Annan designfilosofi
• Nödsamtal, prioriterad data, batteritid
• RRC (Radio Resource Controller)
3G, 3.5G, 4G
• Annan designfilosofi
• Nödsamtal, prioriterad data, batteritid
• RRC (Radio Resource Controller)
En förenklad bild av verkligheten
GET /index.html HTTP/1.1
Webbläsare! Webbserver
<html>...</html>
SYN
SYN+ACK
TCP slow start
• Hur mycket data ska vi skicka?
• Nätverket kan vara överbelastat
• Lösning: Congestion control
TCP slow start
0
10
20
30
40
50
60
70
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!
Laddning av resurser
• Ordningen spelar roll
• CSS i <head>
• Javascript precis innan </body>
• Modernizr inline i <head>
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>!
Laddning av resurser
• Ordningen spelar roll
• CSS i <head>
• Javascript precis innan </body>
• Modernizr inline i <head>
<!DOCTYPE html>!<html>!! <head>!! ! <link rel="stylesheet" href="style.css" type="text/css" />!! ! <script> window.Modernizr = …</script>!! </head>!! <body>!! ! <img src="dog.jpg" />!! ! <script src="main.js"></script>!! </body>!</html>!
Quick fixes
• Konkatenering av Javascript / CSS
• Minifiering av Javascript / CSS / HTML
• Spriting av bilder
• base64-enkodning av bilder
• gzip
• (LZ77 + huffmankodning)
Quick fixes
• Konkatenering av Javascript / CSS
• Minifiering av Javascript / CSS / HTML
• Spriting av bilder
• base64-enkodning av bilder
• gzip
• (LZ77 + huffmankodning)
<html></html>!!
A = html>!<A</A
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
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
Att mäta prestanda
• Tid till rendering bör prioriteras!
• Mät i RTTs istället för sekunder
Att mäta prestanda
RTT
TCP handshake 1
TLS/SSL handshake 2
Data ln2(1 +S
14.6)
S - Storlek i kB av datan som skall överföras
Framtiden
HTTP 2.0
• Använder en enda TCP-anslutning
• Pusha ut resurser
• Ingen konkatenering av CSS/JS
• Inga mer sprites
• Ingen domain-sharding
• 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
HTTP 2.0
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
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ödChrome och Opera!
(~40% *)IE (9+)!
(~16% **)
* http://caniuse.com/#feat=webp
** http://caniuse.com/#feat=jpegxr
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
Nya bildformat
FramtidenNutiden