The case for HTTP/2

http://www.ﬂickr.com/photos/arnybo/2679622216
The Case for HTTP/2
@AndyDavies
#GreeceJS, June 2016

http://www.ﬂickr.com/photos/7671591@N08/1469828976
HTTP/1.x doesn’t use the network efficiently

and we’ve been hacking around some of the limitations
https://www.ﬂickr.com/photos/rocketnumber9/13695281

Each TCP connection only supports one request at a time*
https://www.ﬂickr.com/photos/39551170@N02/5621408218
*HTTP Pipelining is broken in practice

So browsers allowed us to make more requests in parallel
Very old browsers - 2 parallel connections
Today’s browsers - 4 plus connections

To make even more parallel requests we split resources across hosts
www.bbc.co.uk
static.bbci.co.uk
news.bbcimg.co.uk
node1.bbcimg.co.uk

Increasing the risk of network congestion and packet loss
https://www.ﬂickr.com/photos/dcmaster/4585119705

Every request has an overhead
https://www.ﬂickr.com/photos/tholub/9488778040

HTTP 1.x - Higher latency = slower load times
PageLoadTime(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)”

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 aren’t compressed

And small responses may not fill the TCP Congestion Window
Could have sent more segments in this round-trip
Small response

So we follow recipes e.g. Reduce Requests
https://www.ﬂickr.com/photos/nonny/116902484

Create CSS and JavaScript bundles
++++
= =

++++
= =More to download
and parse

++++
= =
x+
Whole bundle is
invalidated if a
single ﬁle changes
More to download
and parse

and combine images to make sprites

To get just one sprite …

Browser must download and
decode the whole image
To get just one sprite …

We override the browser’s priorities
https://www.ﬂickr.com/photos/skoupidiaris/5025176923

Embed binary* data using DataURIs
url(data:image/
png;base64,iVBORw0KGgoAA
AANSUhEUgAAABkAAAAZCAMAA
ADzN3VRAAAAGXRFWHRTb2Z0d
2FyZQBBZG9iZSBJbWFnZVJlY
WR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUe
NpiYBgFo2AwAIAAAwACigABt
nCV2AAAAABJRU5ErkJggg==)
=
*dataURIs can be text too e.g. SVG

and 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' typ
<link rel="alternate" href="http://blog.yoav.ws/index.xml" type="application/rss+xml" title="Y
<style>
body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; color: rgb(72, 7
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:
.clearfix:before, .clearfix:after, .row:before, .row:after { content: '0020'; display: bl
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }

There’s a tension between development and delivery
https://www.ﬂickr.com/photos/domiriel/7376397968

Build tools and optimisation services help plug gaps
and won’t be going away…

But what if we could use the network more efficiently?
https://www.ﬂickr.com/photos/belsymington/4102783610

HTTP/1.1 HTTP/2
https://http2.golang.org/gophertiles

HTTP/1.1 HTTP/2
https://http2.golang.org/gophertiles
Impressive
But is it a real world test?

• HTTP methods, status codes and semantics remain the same
• Binary headers
• Header compression
• Multiplexed
• Server can push resources
HTTP/2

DATA
frame
HEADERS
frame
HTTP/1.1 200 OK
Date: Mon, 07 Sep 2015 17:39:33 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Transfer-Encoding: chunked
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>This is my title<title>
<link rel="stylesheet" href="styles.css" type="text/css" />
HTTP/2HTTP/1.1
Streams are divided into frames
}
} DATA
frame
DATA
frame

Frames are multiplexed over a TCP connection
…
Stream 1
DATA
Stream 2
HEADERS
Stream 2
DATA
Stream 1
DATA
…
Stream 4
DATA
Client Server

TCP connection comparison HTTP/2 vs HTTP/1.1
HTTP/1.1
HTTP/2

Prioritised using 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

Weight: 200
id: 2
Weight: 100
id: 4
Weight: 1
id: 6
Weight: 100
id: 12
Weight: 100
id: 8
Weight: 100
id: 10
2/3 1/3 Low priority

Weight: 200
id: 2
Weight: 100
id: 4
Weight: 1
id: 6
Weight: 100
id: 12
Weight: 100
id: 8
Weight: 100
id: 10
2/3 1/3 Low priorityIn reality, there are some difficulties implementing this

What is the optimal order… Does it change as page loads?
https://www.ﬂickr.com/photos/add1sun/4993432274

Header compression
https://http2.github.io/http2-spec/compression.html

Does it make any difference?
Host: Ireland, Test Agent: Singapore, Cable

What about when server and client are close?
Host: Ireland, Test Agent: Ireland, Cable
HTTP/1.1
HTTP/2

and evenly matched when server and client are close
Host: Ireland, Test Agent: Ireland, Cable
HTTP/1.1
HTTP/2

https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016

Opportunities for new kinds of optimisations
https://www.ﬂickr.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 resources e.g. CSS
Server push

Browser Server
Server
builds
page
GET index.html
<html><head>…
Push critical resources e.g. CSS
Browser can reject push
but
may have already received data
Server push

Many 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

Parallel version looks usable with just 15% of bytes

And almost complete with 25% of the image bytes!

There are some questions over the user
experience with progressive images
Sequential version needs 80% of bytes to match up…

When do we kill off some HTTP/1.1 optimisation techniques?
http://www.ﬂickr.com/photos/tonyjcase/7183556158

Browser support for HTTP/2 is relatively good
40 Edge 9b39 30a
a. Opera Mini doesn’t support HTTP/2
b. Server-Push not supported yet

Server Support
https://github.com/http2/http2-spec/wiki/Implementations
Common servers already support it*

But choose your server carefully…
Does it respect stream and connection ﬂow?
Does it support dependencies and weights?
Does it support server-push?
How does it help optimisation?

You might find some strange things…
https://www.ﬂickr.com/photos/joebenjamin/5009411920

Implementations are still young…
Resources pushed in
reverse order!
(h20 v1.5.0 - ﬁxed in h2o 1.5.3)

Different patterns of server resource usage
http://engineering.khanacademy.org/posts/js-packaging-http2.htm

Sometimes browsers have unexpected behaviour…
1.6s 1.7s 1.8s 1.9s 2.0s 2.1s
With Push 1.6
Without Push
(Chrome 46, in Firefox both tests were fast)

with push
without push
300ms gap in waterfall
while Chrome’s
preloader starts

Chrome recently deprecated NPN

https://blogs.dropbox.com/tech/2016/05/enabling-http2-for-dropbox-web-services-experiences-and-observations/

Tools that might help you understand more
https://www.ﬂickr.com/photos/99783447@N07/9431062947

https://github.com/rmurphey/chrome-http2-log-parser

http://webpagetest.org
Shows pushed resources
in Chrome & Firefox tests

Balancing HTTP/1.1 & HTTP/2
https://www.ﬂickr.com/photos/kyletaylor/589628071

Some good practices remain constant across HTTP/1.1 and HTTP/2
Shrinking content - compression, miniﬁcation, image optimisation
Reducing re-redirects
Effective caching
Reducing latency e.g. using a CDN
Reducing DNS lookups and TCP connections

Others need to vary to make the most of each
Replace inlining with server push
Reduce CSS/JS concatenation and image spriting
Avoiding sharding

HTTP/2 combines connections for shards
When:
Refer to same IP address
Use same certiﬁcate (wildcard, or SAN)
But… how well does this work in the ﬁeld, with complexities of Global Load Balancing etc?

HTTP/2 combines connections for shards
When:
Refer to same IP address
Use same certiﬁcate (wildcard, or SAN) DNS lookup, but
no new TCP connection
or TLS negotiation
But… how well does this work in the ﬁeld, with complexities of Global Load Balancing etc?

No content until DNS, TCP and TLS negotiation complete
Efficient TLS is still important
Session Resumption, Certiﬁcate Stapling and improvements in TLS v1.3 all help

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

https://www.ﬂickr.com/photos/mariachily/3335708242
Still plenty of challenges…

Use of Third-Parties is still growing
Requests by Domain
Bytes by Domain

W3C Resource Hints should help
<link rel="dns-prefetch" href=“//example.com”>
<link rel="preconnect" href=“//example.com”>
<link rel="preload" href=“//example.com/font.woff” as=“font”>

If you want to learn more…
hpbn.co/http2 http://daniel.haxx.se/http2

Go explore!
http://www.ﬂickr.com/photos/atoach/6014917153

http://www.flickr.com/photos/auntiep/5024494612
@andydavies
andy.davies@nccgroup.trust
http://slideshare.net/andydavies

The case for HTTP/2

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to The case for HTTP/2 (20)

More from GreeceJS (13)

Recently uploaded (20)

The case for HTTP/2