2 …. HTML5 - Coufal2017).pdf · 14 Mobile, oh Mobile... Users of the Sprint 4G network can expect...

transcript

HTTP/2 …. HTML5Make 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

Usability Engineering

Jakob Nielsen

DELAY USER REACTION

0 - 100 ms Instant

100 – 300 ms Feels sluggish

300 - 1000 ms Machine is working...

1 s+ Mental context switch

10 s I'll come back later...

How Fast Are Websites Around The World?

DesktopMedian: ~2.7sMean: ~6.9s

Mobile *Median: ~4.8sMean: ~10.2s

* optimistic

0 2 4 6 8 10 12

Mobile

Dektop

seconds

Page Load TimeMean Median

http://www.businessinsider.com

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

Requests and Transfer Size (browsing avg. 490.000 sites)

Content Type Avg # of Requests Avg size

HTML 9 60 kB

Images 56 1200 kB

Javascript 18 307 kB

CSS 6 64 kB

Webfont 2 80 kB

HTTP Archive - Trends (März, 2015)

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

LatencyDer Zeitraum zwischen einem verborgenen Ereignis und dem Eintreten einer sichtbaren Reaktion darauf

RTTDie Round Trip Time bzw. Paketumlaufzeit gibt die Zeit an, die ein Datenpaket in einem Rechnernetz benötigt, um von der Quelle zum Zielund wieder zurück zu reisenQuelle: wikipedia

BandwidthIn 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.

Average RTT to Google in 2016 is...

• Worldwide: ~100ms• US: ~50-60ms

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

PLT: latency vs. bandwidth

Average household in US is running on a 20 Mbps+ connection.

Ergo, average consumer in US would not see an improved PLT by upgrading their connection.

Latency per Bandwith

Page Load Time as RTT Decreases

Mobile, oh Mobile...

Users of the Sprint 4G network can expect to experience average speeds of 3Mbps to 6Mbpsdownload and up to 1.5Mbps upload with an average latency of 150ms. On the Sprint 3Gnetwork, users can expect to experience average speeds of 600Kbps - 1.4Mbps download and350Kbps - 500Kbps upload with an average latency of 400ms.

Page Load Time as RTT Decreases

We stopped at 240 ms!

Latency is the new Performance Bottleneck

Improving bandwidth is easy ….

Improving latency is expensive... impossible?

• Still lots of unlit fiber• 60% of new capacity through upgrades• "Just lay more cable" ...

• Bounded by the speed of light• We're already within a small constant factor of the maximum• Lay shorter cables!

$ 80.000.000 / ms

Hibernian (2011):New Transatlantic Cable Built to Shave 5 Milliseconds off Stock Trades

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

HTTP doesn't have multiplexing!

http request pipelinig

client server

SYN-ACK

GET HTML

SYN-ACK

GET HTML

HOLB (Head of Line Blocking)

pipelinig http multiplexinghead of line blocking with http/2

client server

If first response takes more time, the following responses are received accordingly

Open multiple TCP connections!!!

http://www.browserscope.org/?category=network (Stand: 2017)

8 connections per host on Desktop6 connections per host on Mobile (recent builds)

So what, what's the big deal?

Open multiple TCP connections!!!

http://www.browserscope.org/?category=network

New York Times: http://www.nytimes.com/ = 10 different hosts137 requests3720 kB data

TCP Congestion Control & Avoidance...

TCP is designed to probe the network to figure out the available capacityTCP Slow Start - feature, not a bug

1 2 3 4 5 6 7 8 9 10 11

Round trips

Minimum Round Trips to deliver n Segments

143 kB

214 kB

285 kB

0123456789

10111213

0 1 2 3 4 5 6

time (RTT)

Packet Loss (15 packages sent)

HTTP Archive says….

http://httparchive.org/

Analyses for TOP 100 Websites (April 2017)

HTTP Archive says….

1098 kb, 82 requests, ~14kb per request!MOST HTTP TRAFFIC IS COMPOSED OF SMALL, BURSTY, TCP FLOWS

1 2 3 4 5 6 7 8 9 10 11

Round trips

Minimum Round Trips to deliver n Segments

285 kB

3 6 12You are here

1-3 RTT's

Where wewant to be

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)

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

Header Compression …

User-Agent: 109 bytesLanguage: 35 bytesAccept: 74 bytes

typical header sizes of 700-800 bytes overhead is common

Minimum IPv4 + TCP header: 40 bytesMinimum IPv6 + TCP header: 60 bytes

MTU = 1500 (Ethernet)

MSS IPv4 = 1500 – 40 = 1460 bytes

MSS – Header = 700 bytes

HTTP/2 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

Anti-patterns● Domain sharding

Now we need to unshard - doh!

HTTP/2 in a Nutshell

● One TCP connection

● Request = Stream

● Streams are multiplexed

● Streams are prioritized

● Binary framing

● Length-prefixed

● Control frames

● Data frames

Data Frame:+----------------------------------+|D| Stream-ID (31bits) |+----------------------------------+| Flags (8) | Length (24 bits) |+----------------------------------+| Data |+----------------------------------+

HTTP/2 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

Encrypt all the things!!!

HTTP/2 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 forless than 1% of the CPU load, less than 10KB of memory perconnection 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, ...

Who supports HTTP/2?

Server• Apache• nginx• tomcat• node• ...

3rd parties• Twitter• Wordpress• Facebook*• Akamai• ...

All Google properties• Search, GMail, Docs• GAE + SSL users• ...

● Chrome, since forever..○ Chrome on Android + iOS

● Firefox 13+

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

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..• HTTP/2 stalls

High RTT links are a problem too• Traffic shaping• ISP's remove dynamic window scaling!

[linux: tracebox]

Something to think about...

36http://news.netcraft.com

Try -> http://www.httpvshttps.com/

2 …. HTML5 - Coufal2017).pdf · 14 Mobile, oh Mobile... Users of the Sprint 4G network can expect...

Documents