SPDY. HTML5. Make the web fast

Size: px

Start display at page:

Download "SPDY. HTML5. Make the web fast"

Loreen Audra Matthews
6 years ago
Views:

1 SPDY. HTML5 Make the web fast Christian Horny Devcon

2 Usability Engineering DELAY USER REACTION ms Instant ms Feels sluggish ms Machine is working... 1 s+ Mental context switch 10 s I'll come back later... Jakob Nielsen

3 % How Fast Are Websites Around The World? Page Load Time Mean Median Dektop Mobile seconds Page Load Time Mobile Desktop Desktop Median: ~2.7s Mean: ~6.9s Mobile * Median: ~4.8s Mean: ~10.2s * optimistic seconds Google Analytics Blog (2014)

4 e.g.: mysite.com -> m.mysite.com

5 Requests and Transfer Size (browsing avg sites) Content Type Avg # of Requests Avg size HTML 9 60 kb Images kb Javascript kb CSS 6 64 kb Webfont 2 80 kb HTTP Archive - Trends (März, 2015)

6 The network bandwidth will save us? Right, right? Or maybe not...

9 Bandwidth In computer networking, bandwidth is a measurement of bit-rate of available or consumed data communication resources expressed in bits per second or multiples of it (bit/s, kbit/s, Mbit/s, Gbit/s, etc.). This is in contrast to the use of the term bandwidth in the field of signal processing to analog signal bandwidth measured in hertz. Latency Der Zeitraum zwischen einem verborgenen Ereignis und dem Eintreten einer sichtbaren Reaktion darauf RTT Die Round Trip Time bzw. Paketumlaufzeit gibt die Zeit an, die ein Datenpaket in einem Rechnernetz benötigt, um von der Quelle zum Ziel und wieder zurück zu reisen Quelle: wikipedia

10 Average RTT to Google in 2013 is... Worldwide: ~100ms US: ~50-60ms

11 Bandwidth doesn't matter (much) It's the latency, dammit!

12 PLT (ms) PLT (ms) PLT: latency vs. bandwidth Latency per Bandwith Page Load Time as RTT Decreases RTT Average household in US is running on a 5 Mbps+ connection. Ergo, average consumer in US would not see an improved PLT by upgrading their connection.

13 PLT (ms) Mobile, oh Mobile Page Load Time as RTT Decreases 3500 We stopped at 240 ms! Users of the Sprint 4G network can expect to experience average speeds of 3Mbps to 6Mbps download and up to 1.5Mbps upload with an average latency of 150ms. On the Sprint 3G network, users can expect to experience average speeds of 600Kbps - 1.4Mbps download and 350Kbps - 500Kbps upload with an average latency of 400ms. RTT

14 Latency is the new Performance Bottleneck

Improving bandwidth is easy. Still lots of unlit fiber 60% of new capacity through upgrades "Just lay more cable"... Improving latency is expensive... impossible?

15 Improving bandwidth is easy. Still lots of unlit fiber 60% of new capacity through upgrades "Just lay more cable"... Improving latency is expensive... impossible? Bounded by the speed of light We're already within a small constant factor of the maximum Lay shorter cables! $ / ms Hibernian (2011): New Transatlantic Cable Built to Shave 5 Milliseconds off Stock Trades

16 Why is latency the problem? Remember that HTTP thing... yeah...

17 HTTP doesn't have multiplexing! http request pipelinig client server client server open SYN open SYN SYN-ACK SYN-ACK ACK ACK time GET HTML time GET HTML close close

18 HOLB (Head of Line Blocking) pipelinig head of line blocking http multiplexing with spdy client server client server open open time time close close If first response takes more time, the following responses are received accordingly

19 Open multiple TCP connections!!! 6 connections per host on Desktop 6 connections per host on Mobile (recent builds) So what, what's the big deal? (Stand: 2015)

Open multiple TCP connections!!! New York Times: = http://www.nytimes.

20 Open multiple TCP connections!!! New York Times: = 10 different hosts 137 requests 3720 kb data

21 Segments window size TCP Congestion Control & Avoidance... TCP is designed to probe the network to figure out the available capacity TCP Slow Start - feature, not a bug Minimum Round Trips to deliver n Segments 250 Packet Loss (15 packages sent) kb kb kb kb Round trips time (RTT)

22 HTTP Archive says. Analyses for TOP 100 Websites (March 2015)

23 Segments HTTP Archive says kb, 82 requests, ~14kb per request! MOST HTTP TRAFFIC IS COMPOSED OF SMALL, BURSTY, TCP FLOWS Minimum Round Trips to deliver n Segments kb Where we want to be kb You are here Round trips 1-3 RTT's

24 Example: 428 ms to download 40 kb of data! That s 0,8 Mbit and it won t get faster, regardless the size of my pipe (100Mbit)

25 So, what's a developer to do? Fix HTTP 1.1! Use SPDY in the meantime...

26 Header Compression User-Agent: Language: Accept: 109 bytes 35 bytes 74 bytes typical header sizes of bytes overhead is common Minimum IPv4 + TCP header: 40 bytes Minimum IPv6 + TCP header: 60 bytes MTU = 1500 (Ethernet) MSS IPv4 = = 1460 bytes MSS Header = 700 bytes

27 SPDY in action client server Full request & response multiplexing Mechanism for request prioritization Many small files? No problem Higher TCP window size More efficient use of server resources TCP Fast-retransmit for faster recovery time Anti-patterns Domain sharding Now we need to unshard - doh!

28 SPDY in a Nutshell One TCP connection Request = Stream Streams are multiplexed Streams are prioritized Binary framing Length-prefixed Control frames Data frames Control Frame: C Version(15bits) Type(16bits) Flags (8) Length (24 bits) Data Data Frame: D Stream-ID (31bits) Flags (8) Length (24 bits) Data

29 SPDY Server Push Premise: server can push resources to client Concern: but I don't want the data! Stop it! Client can cancel SYN_STREAM if it doesn't the resource Resource goes into browsers cache (no client API) Newsflash: we are already using "server push" Today, we call it "inlining" Inlining works for unique resources, bloats pages otherwise Advanced use case: forward proxy (ala Amazon's Silk) Proxy has full knowledge of your cache, can intelligently push data to the client

30 Encrypt all the things!!! SPDY runs over TLS Philosophical reasons Political reasons Pragmatic + deployment reasons - Bing! Observation: intermediate proxies get in the way Some do it intentionally, many unintentionally Ex: Antivirus / Packet Inspection / QoS /... SDHC / WebSocket: No TLS works.. in 80-90% of cases 10% of the time things fail for no discernable reason In practice, any large WebService (WS) deployments run as WSS

But isn't TLS slow? CPU "On our production frontend machines, SSL/TLS accounts for less than 1% of the CPU load, less than 10KB of memory per connection and less than 2% of network overhead.

31 But isn't TLS slow? CPU "On our production frontend machines, SSL/TLS accounts for less than 1% of the CPU load, less than 10KB of memory per connection and less than 2% of network overhead." - Adam Langley (Google) Latency TLS Next Protocol Negotiation Protocol negotiation as part of TLS handshake TLS False Start reduce the number of RTTS for full handshake from two to one TLS Fast Start reduce the RTT to zero Session resume,...

32 Who supports SPDY? Chrome, since forever.. Chrome on Android + ios Firefox 13+ Server mod_spdy (Apache) nginx Jetty, Netty node-spdy... 3rd parties Twitter Wordpress Facebook* Akamai... All Google properties Search, GMail, Docs GAE + SSL users...

33 But wait, there is a gotcha! there is always a gotcha...

34 HTTP Head of Line Blocking -> TCP Head of Line Blocking client server TCP: in-order, reliable delivery... what if a packet is lost? ~1~2% packet loss rate CWND's get chopped Fast-retransmit helps, but.. SPDY stalls time High RTT links are a problem too Traffic shaping ISP's remove dynamic window scaling! Something to think about...

HTTP/2. HTML5. Make the web fast. Christian Horny

HTTP/2. HTML5. Make the web fast. Christian Horny HTTP/2. HTML5 Make the web fast Christian Horny HTTP/2 goals! Improve end-user perceived latency! Address the "head of line blocking"! Not require multiple connections! Retain the semantics of HTTP/1.1