Post on 11-Apr-2017
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
++++= =
Create CSS and JavaScript bundles
++++= =More to download
and parse
Create CSS and JavaScript bundles
++++= =More to download
and parse x+!!
Whole bundle is invalidated if a
single file changes
and mush images together as sprites
and mush images together as sprites
To get just one sprite …
and mush images together as sprites
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
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
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>…
Request other page resources
Push critical resource e.g. CSS
Server push
Browser Server
Server!builds!page
GET index.html
<html><head>…
Request other page resources
Push critical resource e.g. CSS
Server push
Browser Server
Server!builds!page
GET index.html
<html><head>…
Request other page resources
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
How much of an image do we need to make it usable - 15%?
How much of an image do we need to make it usable - 25%?
There are some questions over the user experience with progressive images
How much of an image do we need to make it usable - 80%?
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!!
andy.davies@nccgroup.com !!
http://slideshare.net/andydavies!