chicago tech day jan 2015: foundry - http2

Foundry - HTTP/2

Stephen Ludin

Foundry’s Mission

“The Web Experience Foundry will be dedicated to researching and

prototyping projects and technologies that the Web Experience business

unit feels are potentially important for the future of its product lines. The

primary goals will be:

• Gain a solid understanding of new technology and how it could (or could not) be used in

Web Experience products (Discovery).

• Prototype new technologies and create proof of concepts to validate or invalidate a

technologies potential utility.

• Research new concepts and look for ways they can improve our existing product lines.”

“Take risks, and fail fast”

The Web Experience Foundry Team

Why Change HTTP?

The Web has Changed

More page weight and interactivity

Understanding that

Performance == $$$

MobileAKA: A crappy device on a crappy network

What do we do today?

Spriting

Inlining

#globalheader { background:#707070;

background:

-o-linear-gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 97%, rgba(0, 0, 0, .45) 100%),

-o-linear-gradient(left, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) .2%, rgba(0, 0, 0, 0) 99.8%, rgba(0, 0, 0, .2) 100%),

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9QAAAAkCAMAAABfcIIyAAAAGXRFWHRTc...

-o-linear-gradient(bottom, #666 0, #5e5e5e 50%, #707070 51%, #808080 100%)

background:

-moz-linear-gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 97%, rgba(0, 0, 0, .45) 100%),

-moz-linear-gradient(left, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) .2%, rgba(0, 0, 0, 0) 99.8%, rgba(0, 0, 0, .2) 100%),

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9QAAAAkCAMAAABfcIIyAAAAGXRFWHRTb...

-moz-linear-gradient(bottom, #666 0, #5e5e5e 50%, #707070 51%, #808080 100%)

background:

-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, .2)), color-stop(0.05, rgba(0, 0, 0, 0)), color-stop(0.97...

-webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, .2)), color-stop(0.002, rgba(0, 0, 0, 0)), color-stop(0.998,...

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9QAAAAkCAMAAABfcIIyAAAAGXRFWHRTb2...

-webkit-gradient(linear, 0 100%, 0 0, from(#666), color-stop(0.5, #5e5e5e), color-stop(0.51, #707070), to(#808080))

Sharding

Concatenation

In other words… Hacks

So Why is HTTP/1 so expensive?

Insufficient use of TCP

Head of Line Blocking

Client Server

TCP Slow Start

Uses of Multiple Connections

Headers are Verbose

GET / HTTP/1.1

Host: www.etsy.com

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.14

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

DNT: 1

Accept-Language: en-us

Accept-Encoding: gzip, deflate

Cookie: uaid=uaid%3DVdhk5W6sexG-_Y7ZBeQFa3cq7yMQ%26_now%3D1325204464%26_slt%3Ds_LCLVpU

Connection: keep-alive

525 Bytes

Headers are Verbose

GET /assets/dist/js/etsy.recent-searches.20121001205006.js HTTP/1.1

Host: www.etsy.com

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.14 (KHTML, like

Gecko) Version/6.0.1 Safari/536.26.14

Accept: */*

DNT: 1

Referer: http://www.etsy.com/

Cookie: autosuggest_split=1;etala=111461200.1476767743.1349274889.1349274889.1349274889.1.0;

226 New Bytes; 690 Total

Headers are Verbose

GET /assets/dist/js/jquery.appear.20121001205006.js HTTP/1.1

Host: www.etsy.com

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.14 (KHTML

Accept: */*

DNT: 1

Headers are Verbose

GET /assets/dist/js/bootstrap/username-suggester.20121001205006.js HTTP/1.1

Host: www.etsy.com

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.14 (KHTML

Accept: */*

DNT: 1

Headers are Verbose

Four Requests

• 2596 Bytes Total

• ~3 Packets in most places

• 1797 Redundant bytes ( 70% )

Depressed yet?

HTTP/2

In the beginning…

HTTP/2

It is expected that HTTP/2 will:

• Substantially and measurably improve end-user perceived latency in most cases, over

HTTP/1.1 using TCP.

• Address the "head of line blocking" problem in HTTP.

• Not require multiple connections to a server to enable parallelism, thus improving its use

of TCP, especially regarding congestion control.

• Retain the semantics of HTTP/1.1, including (but not limited to) HTTP methods, status

codes, URIs, and where appropriate, header fields.

HTTP/2

Put more simply:

• Multiplexing

• Header compression

• Push

• Prioritization

HTTP/2 - Multiplexing

Client Server

HTTP/2 - Prioritization

Allow the user-agent to say what it thinks is most

important.

• Because of multiplexing the server can prioritize that objects

HTTP/2 - Compression

Adds header compression:

• Average header size ~512 bytes now

• Over ~50 objects on a page that is 25K just in requests

• Compression can being that down to a tenth of that

• Result: all requests sent in a single round trip

HTTP/2 - Server Push

Generally, the server knows what a user-agent is

going to need before it is asked for.

Example: Prefetching

Client Server

HTTP/2 - Extensible Frames

HEADER DATA SPECIAL DATA

Where are we?

h2 Timeline

2009 2011 2013

Google

announces

SPDY/2

IETF80

Firefox ships SPDY

Call for HTTP/2

proposals

HTTPbis

rechartered for

HTTP/2

Akamai

announces

SPDY support

h2 Timeline

2013 2014

Draft-00 Draft-04

Draft-06

Draft-09 Draft-12 Draft-14 Draft-16

Over 20 Implementations

Including 3 from Akamai

So What does it mean for me?

Faster

10-25%*

Simpler

Inlining Spriting Concatenation Sharding

New Connection HandlingWhat does failover, load balancing, and timeout mean?

Debugging

Getting from h1 to h2

HTTP/1 is Entrenched

• Wide use

• Large variety of implementations

• Intermediaries

Upgrade Paths

• HTTPS URLs – ALPN

• HTTP URLs – Upgrade ‘dance’, and ‘hints’

• Opportunistic Security

But for you:

HTTP/2 – The Goal

We will have HTTP/2 on the network in the fall.

HTTP/2 – The Goal

We will have HTTP/2 on the network in January.

HTTP/2 – The Goal

We will have HTTP/2 on the network in March.

HTTP/2 – The Goal

We will have HTTP/2 on the network in March.

Ready for Experimentation Today

Very rough timeline

BETA CHANNEL

LAUNCH

GENERAL

AVAILABILITY

HTTP/2-ENABLED

FEATURES

Opt-in

• Edge to client only

• Secure network only

• Web Performance products

Opt-out

• Edge to client only

• Likely additional networks

• Likely additional product lines

• Candidate examples:

- Predictive Server Push

- Smart Stream Priorities

- HTTP/2 to origin

Expected Chrome,

Firefox, and IE support

2H2014 2H2015 1H2016

The Beta Channel

An opt-in program to provide our boundary-pushing customers with

access to our newest technologies, before general availability

• Get notified of all beta releases

• New features automatically available in Luna Control Portal

• Current features: SPDY and Predictive Prefetching

• Contact your account team to sign the T&Cs and subscribe

chicago tech day jan 2015: foundry - http2

Technology

attacking http2 implementations (1)

http2 v1.10

draft ietf httpbis http2 16

ietf95 http2

http2 explained

aplikasi web dan http2

java ee 8: what servlet 4 and http2 mean

http2 right now

http2 protocol changes

http2 : ce qui va changer par julien landuré

re-thinking performance tuning with http2

http2 on go1.6rc2

http2 and grpc

daniel.haxx.se/http2/http2-v1.9.pdf - daniel stenberg ·...

data sheet -...

2実装を攻撃 - pacsec › psj15 ›...

hargreaves foundry hargreaves foundry drainage

http2 e java9 (francisco melo e gustavo oliveira)

editorial cartoons from http2

http2 最速実装〜入門編〜