http2 is here!

https://www.flickr.com/photos/tim_ellis/6882599706

HTTP/2 is here!

@AndyDavies #LDNWebPerf, July 2015

HTTP 1.x - Higher latency = slower load timesPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

Mike Belshe - “More Bandwidth Doesn’t Matter (much)”

http://www.flickr.com/photos/7671591@N08/1469828976

TCP was designed for long flows… typical web page has many short ones

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Cache-Control:no-cache Cookie:NTABS=B5; BBC-UID=75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab5958880Mozilla%2f5%2e0%20%28Macintosh%3b%20Intel%20Mac%20OS%20X%2010%5f9%5f1%29%20AppleWebKit%2f537%2e36%20%28KHTML%2c%20like%20Gecko%29%20Chrome%2f31%2e0%2e1650%2e63%20Safari%2f537%2e36; ckns_policy=111; BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40; s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3; ckpf_ww_mobile_js=on; ckpf_mandolin=%22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end%22%3A%221392834182609%22%7D; _chartbeat2=ol0j0uq4hkq6pumu.1389101635322.1392285654268.0111111111111111; _chartbeat_uuniq=1; ecos.dt=1392285758216 Host:www.bbc.co.uk Pragma:no-cache User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36

Headers sent with every request

Contain lots of repeated data!and!

can’t be compressed

We’ve been hacking around limitations of HTTP/1.1

https://www.flickr.com/photos/rocketnumber9/13695281

Browsers support more parallel connections

Old browsers - 2 parallel connections

Today’s browsers - 4 plus connections

We split resources across domains

www.bbc.co.uk!static.bbci.co.uk!news.bbcimg.co.uk!node1.bbcimg.co.uk

We follow recipes e.g. Reduce Requests

http://www.flickr.com/photos/mrsmagic/2247364228

We inline critical resources<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' type='text/css'> <link rel="alternate" href="http://blog.yoav.ws/index.xml" type="application/rss+xml" title="Yoav's blog thing" /> <style> body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; color: rgb(72, 70, 68); } img { max-width: 100%; } .li-page-header { color: rgb(255, 255, 255); padding: 16px 0px; background-color: #8a1e1b; } .container { position: relative; width: 90vw; max-width: 760px; margin: 0px auto; padding: 0px; } .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .container .columns, .container .column { margin: 0px; } .container .sixteen.columns { width: 100%; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container

Sometimes with DataURIs

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)

=

Larger downloads (needs gzip)!Overrides browser priorities

Create CSS and JavaScript bundles

++++= =


++++= =More to download

and parse


++++= =More to download

and parse x+!!

Whole bundle is invalidated if a

single file changes

and mush images together as sprites


To get just one sprite …


Browser must download and decode the whole image

To get just one sprite …

There’s a tension between development and delivery

https://www.flickr.com/photos/domiriel/7376397968

Build tools and optimisation services help plug gaps

and won’t be going away…

But couldn’t we use the network more efficiently?https://www.flickr.com/photos/belsymington/4102783610

HTTP/2(Evolved from Google’s SPDY)

Impressive Eh!

Impressive Eh!

But is it a real world test?

Single multiplexed connection to host

HTTP/1.1

HTTP/2

Frames are multiplexed (not just whole resources)

Stream 1 DATA

Stream 2 HEADERS

Stream 2 DATA

Stream 1 DATA …

Stream 4 DATA

Client Server

HTTP/1.1 - browser sets priorities

HTTP/2 - browser hints priorities server can override

Prioritisation uses Weights and Dependencies

https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/

Weight: 200 id: 2

Weight: 100 id: 4

Weight: 1 id: 6

Weight: 100 id: 12

Weight: 100 id: 8

Weight: 100 id: 10

Adds header compression too

Does it make any difference?

Host: Ireland, Test Agent: Singapore, Cable

Does it make any difference?

Host: Ireland, Test Agent: Singapore, Cable

YMMV

What about when server and client are close?

Host: Ireland, Test Agent: Ireland, Cable

and evenly matched when server and client are close

Host: Ireland, Test Agent: Ireland, Cable

Browser support is relatively good

40 Edge 9 b39 30

a

a. Opera Mini doesn’t support HTTP/2 b. Server-Push not supported in beta

Server Support

https://github.com/http2/http2-spec/wiki/Implementations

Server implementations are getting there

But choose your server carefully…

Does it respect stream and connection flow?!

Does it support dependencies and weights?!

Does it support server-push?!

!

How does it help optimisation?

Can check server conformance with h2spec

https://github.com/summerwind/h2spec

Server Support

https://github.com/bradfitz/http2/tree/master/h2i

Are you missing telnet for debugging?

No content until DNS, TCP and TLS negotiation complete

Efficient TLS is Important

Efficient TLS is Important

istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic

New optimisations

https://www.flickr.com/photos/inucara/14981917985

Browser Server

Server!builds!page

GET index.html

<html><head>…

Network!Idle

Request other page resources

Server push

Browser Server

Server!builds!page

GET index.html

<html><head>…


Push critical resource e.g. CSS

Server push

Browser Server

Server!builds!page

GET index.html

<html><head>…


Push critical resource e.g. CSS

Browser can reject push! but !

may have already received data

Server push

Other opportunities for server push?

HTML

CSS

DOM

CSSOM

Render!Tree Layout PaintJavaScript

Fonts and background images discovered

when render tree builds

Could we push them?

Multiplexing offers interesting possibilities too

How much of an image do we need to make it usable - 5%?

Experiment by John Mellor at Google

There are some questions over the user experience with progressive images


Time to kill off some optimisation techniques?

http://www.flickr.com/photos/tonyjcase/7183556158

https://www.flickr.com/photos/mariachily/3335708242

Still plenty of challenges…

We need to explore!

http://www.flickr.com/photos/atoach/6014917153

http://www.flickr.com/photos/auntiep/5024494612

!

@andydavies!!

[email protected] !!

http://slideshare.net/andydavies!

http2 is here!

Technology