http:2.0 101 introduction (workshop) - bastian hofmann
TRANSCRIPT
HTTP/2.0
101 Introduction
@BastianHofmann
Questions? Ask
https://www.flickr.com/photos/duncan/3171592427/
https://commons.wikimedia.org/wiki/File:Internet1.jpg#/media/File:Internet1.jpg
https://www.flickr.com/photos/neilsingapore/3567378586/
HTTP/0.9http://www.w3.org/Protocols/HTTP/AsImplemented.html
1991
HTTP/1.1http://tools.ietf.org/html/rfc2616
http://tools.ietf.org/html/rfc7230
http://tools.ietf.org/html/rfc7231
http://tools.ietf.org/html/rfc7232
http://tools.ietf.org/html/rfc7235
http://tools.ietf.org/html/rfc7234
http://tools.ietf.org/html/rfc7233
2014
20 years ago
https://www.flickr.com/photos/offshore/1433329174/
http://www.impressivewebs.com/importance-of-website-performance-sources/
Average page size
Average asset count
http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
http://httparchive.org/trends.php
The internet gets slower and slower
https://www.flickr.com/photos/91026431@N05/8497636527/
Slow connections
High latency
https://flic.kr/p/KpBcj
It’s hard work to keep a page fast
Lots of hacks around HTTP
needed
It needs to get better
SPDY
HTTP/2http://tools.ietf.org/html/rfc7540http://tools.ietf.org/html/rfc7541
2015
New possibilities for web
applications
Increased performance
Old truths may not be valid
anymore
HTTP/1.1 in detail
User enters URL
DNS lookup
TCP connection
TLS handshake
This already takes time
Already some Optimizations
DNS caching
Connection Keep Alive
TLS optimizations
Finally: HTTP
HTTP request
GET/homeHTTP/1.1Host:www.researchgate.netpragma:no-cachednt:1accept-encoding:gzip,deflate,sdchaccept-language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4user-agent:Mozilla/5.0(Macintosh;IntelMacOSX10_10_4)AppleWebKit/537.36(KHTML,likeGecko)Chrome/46.0.2478.0Safari/537.36accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8cache-control:no-cachecookie:…
https://www.flickr.com/photos/40987321@N02/5580348753/
HTTP response
HTTP/1.1200OKContent-Type:text/plain
Content
HTTP/1.1200OKDate:Sun,16Aug201511:21:31GMTContent-Type:text/html;charset=utf-8Transfer-Encoding:chunkedConnection:keep-aliveCache-Control:must-revalidate,no-cache,no-store,post-check=0,pre-check=0,privateX-Correlation-Id:...expires:Thu,19Nov198108:52:00GMTpragma:no-cacheX-UA-Compatible:IE=EdgeX-Frame-Options:SAMEORIGINP3P:CP="..."X-Content-Type-Options:nosniffX-XSS-Protection:1;mode=blockStrict-Transport-Security:max-age=7200Content-Security-Policy:…Content-Encoding:gzip
HTTP/2
For the user it works the same
No changes in Headers,
Semantics etc
Almost no changes in Headers,
Semantics etc
Protocol (h2) is established during
TLS handshake
:authority:www.researchgate.net:method:GET:path:/:scheme:https
:status:200Content-Type:text/plain
Content
Changes on transport level
TLS only
Binary instead of textual
Multiple requests are multiplexed over one TCP connection
Server Push
Header compression
Smaller requests and responses
Less roundtrips
Headers are received early
(1st packet)
HTTP Response body
HTML response
DOM parsing
Rendering
Asset fetching
Applying CSS
Executing JS
https://www.flickr.com/photos/hangdog/10991275/
Blocking HTML rendering
CSS
JS
CSS triggers repaints
JS can manipulate the DOM
JS can access attributes set by
CSS
HTTP/1.1 200 OKContent-Type: text/html
<html><head> <link href="main.css" >
<link href="profile.css" > <script src="library.js" /> <script src="app.js" /> <script>
// some JS </script>
</head><body>
<script src="demo_async.js" async></script>
Lots of assets
HTTP/1.1
Every request one TCP connection
Connection Keep Alive
Network congestion
Concurrent connection limits
http://www.browserscope.org/?category=network
Domain sharding
http://c5.rgstatic.net/profile.css
http://c4.rgstatic.net/icon.png
Shards should be persistent
Additional handshakes and
connections
Network congestion
TCP Slow Start
https://de.wikipedia.org/wiki/Transmission_Control_Protocol#/media/File:TCPSlowStartundCongestionAvoidance.svg
Ideal number of shards
https://codeascraft.com/2014/02/19/reducing-domain-sharding/
Page sizes
Less content
GZIP
Image compression
Minification
JS
CSS
HTML
Debugging problems
Sourcemaps
Less requests
Concatenation
https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/javascript/combo/lib/yui3/array-extras/array-extras-min.js&lib/yui3/oop/oop-min.js&lib/yui3/attribute-core/attribute-core-min.js&lib/yui3/event-custom-base/event-custom-base-min.js&lib/yui3/event-custom-complex/event-custom-complex-min.js&lib/yui3/attribute-observable/attribute-observable-
min.js&lib/yui3/attribute-extras/attribute-extras-min.js&lib/yui3/attribute-base/attribute-base-min.js&lib/yui3/attribute-complex/attribute-complex-min.js&lib/yui3/base-core/base-core-
min.js&lib/yui3/base-observable/base-observable-min.js&lib/yui3/base-base/base-base-min.js&lib/yui3/pluginhost-base/pluginhost-base-min.js&lib/yui3/pluginhost-config/pluginhost-config-min.js&lib/yui3/base-pluginhost/base-pluginhost-min.js&lib/yui3/classnamemanager/
classnamemanager-min.js&lib/yui3/dom-core/dom-core-min.js&lib/yui3/dom-base/dom-base-min.js&lib/yui3/selector-native/selector-native-min.js&lib/yui3/selector/selector-min.js&lib/
yui3/node-core/node-core-min.js
https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/mainbundle.js
Spritemaps
How to bundle
Over fetching
90% CSS unused
Cache invalidation
Under fetching
HTTP/2
Only 1 connection
Fully multiplexed
No domain sharding needed
Low overhead for a request
No concatenation
needed
Better cache hit ratio
More granular loading
Less development
overhead
https://www.flickr.com/photos/ksayer/5614813296/
Critical rendering path
What is visible?
What is critical?
HTTP/1.1
Inline critical assets
Either inline always
Caching?
First request
HTTP/1.1 200 OKContent-Type: text/html
<html><head> <styles> … your critical css
</styles></head><body>
<div>content</div>load main.css asyncset cookie that other css was loaded
</body></html>
Subsequent request (if Cookie set)
HTTP/1.1 200 OKContent-Type: text/html
<html><head> <link href="main.css" >
// loaded from cache</head><body>
<div>content</div></body></html>
Flushing critical stuff early
Traditional approach
Browser Server
GET css & js
HTTP/1.1 200 OKContent-Type: text/html
<html><head><link ..><script ..>
GET /foo.html
</head><body></body></html>
https://developer.mozilla.org/en-US/docs/Web/HTTP/Controlling_DNS_prefetching
https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
HTTP supports streaming
Browser ServerGET /foo.html
<body></body></html>
HTTP/1.1 200 OKContent-Type: text/html
<html><head><link ..><script ..></head>
GET css & js
Problems
Headers are already sent
Redirects
<script>window.location="...";</script>
Proxies, servers, load balancers
may buffer content
Browsers may wait before
starting to render HTML
AJAX?
JSON
Caching what assets are needed
GET/literature.AddPublicationsDialog
HTTP/1.1200OKContent-Type:application/json
{"data":{...},"css":["AddPublicationsDialog.css"],"js":["AddPublicationsDialogView.js"],"html":["addConferencePaperSelection.html"]}
localStorage.setItem("literature.AddPublicationsDialog",{"css":["AddPublicationsDialog.css"],"js":["AddPublicationsDialogView.js"],"html":["addConferencePaperSelection.html"]});
HTTP/2
Server push
Prioritize critical assets
Browser Server
Push CSS & JS
:status: 200Content-Type: text/html
<html><head><link ..><script ..></head><body></body></html>
GET /foo.html
spdy.createServer(options, function(req, res) {
// push JavaScript asset (/main.js) to the client res.push( '/main.js', {'content-type': ‚application/javascript'}, function(err, stream) { stream.end('alert("hello from push stream!")'); } );
// write main response body and terminate stream res.end( 'Hello World! <script src=„/main.js"></script>' );
}).listen(443);
https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/
HeadersX-Associated-Content
Automated learning
Great
When can I use it?
Browser support
http://caniuse.com/#feat=http2
Server support
https://httpd.apache.org/docs/2.4/mod/mod_http2.html
Apache httpd
Who is using it already?
chrome://net-internals/#http2
Performance best practices will
evolve
Monitor and test
Expect more frequent HTTP
protocol iterations
Stay up to date
http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann