SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
7.
http://www.flickr.com/photos/7671591@N08/1469828976
HTTP/1.x doesn’t use the network efficiently
8.
and we’ve been hacking around some of the limitations
https://www.flickr.com/photos/rocketnumber9/13695281
9.
Each TCP connection only supports one request at a time*
https://www.flickr.com/photos/39551170@N02/5621408218
*HTTP Pipelining is broken in practice
10.
So browsers allowed us to make more requests in parallel
Very old browsers - 2 parallel connections
Today’s browsers - 4 plus connections
11.
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
12.
Increasing the risk of network congestion and packet loss
https://www.flickr.com/photos/dcmaster/4585119705
13.
Every request has an overhead
https://www.flickr.com/photos/tholub/9488778040
15.
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
16.
And small responses may not fill the TCP Congestion Window
Could have sent more segments in this round-trip
Small response
17.
So we follow recipes e.g. Reduce Requests
https://www.flickr.com/photos/nonny/116902484
22.
and combine images to make sprites
To get just one sprite …
23.
and combine images to make sprites
Browser must download and
decode the whole image
To get just one sprite …
24.
We override the browser’s priorities
https://www.flickr.com/photos/skoupidiaris/5025176923
25.
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
54.
Opportunities for new kinds of optimisations
https://www.flickr.com/photos/inucara/14981917985
55.
Browser Server
Server
builds
page
GET index.html
<html><head>…
Network
Idle
Request other page resources
Server push
56.
Browser Server
Server
builds
page
GET index.html
<html><head>…
Request other page resources
Push critical resources e.g. CSS
Server push
57.
Browser Server
Server
builds
page
GET index.html
<html><head>…
Request other page resources
Push critical resources e.g. CSS
Server push
58.
Browser Server
Server
builds
page
GET index.html
<html><head>…
Request other page resources
Push critical resources e.g. CSS
Browser can reject push
but
may have already received data
Server push
59.
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?
60.
Multiplexing offers interesting possibilities too
61.
How much of an image do we need to make it usable - 5%?
Experiment by John Mellor at Google
62.
Parallel version looks usable with just 15% of bytes
63.
And almost complete with 25% of the image bytes!
64.
There are some questions over the user
experience with progressive images
Sequential version needs 80% of bytes to match up…
65.
When do we kill off some HTTP/1.1 optimisation techniques?
http://www.flickr.com/photos/tonyjcase/7183556158
66.
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
67.
Server Support
https://github.com/http2/http2-spec/wiki/Implementations
Common servers already support it*
68.
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?
69.
You might find some strange things…
https://www.flickr.com/photos/joebenjamin/5009411920
70.
Implementations are still young…
Resources pushed in
reverse order!
(h20 v1.5.0 - fixed in h2o 1.5.3)
71.
Different patterns of server resource usage
http://engineering.khanacademy.org/posts/js-packaging-http2.htm
72.
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)
73.
with push
without push
300ms gap in waterfall
while Chrome’s
preloader starts
82.
Some good practices remain constant across HTTP/1.1 and HTTP/2
Shrinking content - compression, minification, image optimisation
Reducing re-redirects
Effective caching
Reducing latency e.g. using a CDN
Reducing DNS lookups and TCP connections
83.
Others need to vary to make the most of each
Replace inlining with server push
Reduce CSS/JS concatenation and image spriting
Avoiding sharding
84.
HTTP/2 combines connections for shards
When:
Refer to same IP address
Use same certificate (wildcard, or SAN)
But… how well does this work in the field, with complexities of Global Load Balancing etc?
85.
HTTP/2 combines connections for shards
When:
Refer to same IP address
Use same certificate (wildcard, or SAN) DNS lookup, but
no new TCP connection
or TLS negotiation
But… how well does this work in the field, with complexities of Global Load Balancing etc?
86.
No content until DNS, TCP and TLS negotiation complete
Efficient TLS is still important
Session Resumption, Certificate Stapling and improvements in TLS v1.3 all help
87.
Efficient TLS is Important
istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS
Ivan Ristic
88.
https://www.flickr.com/photos/mariachily/3335708242
Still plenty of challenges…
89.
Use of Third-Parties is still growing
Requests by Domain
Bytes by Domain
90.
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”>
91.
If you want to learn more…
hpbn.co/http2 http://daniel.haxx.se/http2
92.
Go explore!
http://www.flickr.com/photos/atoach/6014917153