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