chicago tech day jan 2015: foundry - http2

Foundry - HTTP/2

Stephen Ludin

©2015 AKAMAI | FASTER FORWARDTM

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

Tim

e ?


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…

Never


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

Tim

e

Client Server

Tim

e

Saved

Time


HTTP/2 - Prioritization

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

important.

• Because of multiplexing the server can prioritize that objects

Tim

e


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

Tim

e


HTTP/2 - Extensible Frames

HEADER DATA SPECIAL DATA


Where are we?


h2 Timeline

2009 2011 2013

Google

announces

SPDY/2

SPDY

at

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

2015


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?


TLS


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

TBD

• 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