HTTP/2.0 101 Introduction

HTTP/2.0 101 Introduction @BastianHofmann

HTTP/2.0 101 Introduction 101 Switching Protocols @BastianHofmann

https://www.ﬂickr.com/photos/duncan/3171592427/

https://commons.wikimedia.org/wiki/File:Internet1.jpg#/media/File:Internet1.jpg

https://www.ﬂickr.com/photos/neilsingapore/3567378586/

HTTP/0.9 http://www.w3.org/Protocols/HTTP/AsImplemented.html 1991

HTTP/1.0 https://tools.ietf.org/html/rfc1945 1996

HTTP/1.1 http://tools.ietf.org/html/rfc2616 1999

HTTP/1.1 http://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

https://www.ﬂickr.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.ﬂickr.com/photos/91026431@N05/8497636527/

Slow connections

High latency

https://ﬂic.kr/p/KpBcj

It’s hard work to keep a page fast

Lots of hacks around HTTP needed

It needs to get better

HTTP/2 http://tools.ietf.org/html/rfc7540 http://tools.ietf.org/html/rfc7541 2015

New possibilities for web applications

Increased performance

Old truths may not be valid anymore

Before we start

A few words about me

Questions? Ask

http://speakerdeck.com/u/bastianhofmann

HTTP in detail

The anatomy of a page load

Every request one TCP connection

User enters URL

DNS lookup

TCP connection

TLS handshake

This already takes time

Optimizations

DNS caching

Connection Keep Alive

TLS optimizations

https://istlsfastyet.com/

Finally: HTTP

GET / HTTP/1.1 Host: www.researchgate.net HTTP/1.1 200 OK Content-Type: text/plain
Content

HTTP request

GET /home HTTP/1.1 Host: www.researchgate.net pragma: no-cache dnt: 1 accept-encoding:
gzip, deflate, sdch accept-language: de-DE,de;q=0.8,en- US;q=0.6,en;q=0.4 user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2478.0 Safari/537.36 accept: text/html,application/xhtml +xml,application/xml;q=0.9,image/webp,*/*;q=0.8 cache-control: no-cache cookie: …

https://www.ﬂickr.com/photos/40987321@N02/5580348753/

HTTP response

HTTP/1.1 200 OK Date: Sun, 16 Aug 2015 11:21:31 GMT
Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Cache-Control: must-revalidate, no-cache, no-store, post-check=0, pre-check=0, private X-Correlation-Id:... expires: Thu, 19 Nov 1981 08:52:00 GMT pragma: no-cache X-UA-Compatible: IE=Edge X-Frame-Options: SAMEORIGIN P3P: CP="..." X-Content-Type-Options: nosniff X-XSS-Protection: 1; mode=block Strict-Transport-Security: max-age=7200 Content-Security-Policy: … Content-Encoding: gzip

HTTP/2

For the user it works the same

No changes in Headers, Semantics etc

GET / HTTP/2.0 Host: www.researchgate.net HTTP/2.0 200 OK Content-Type: text/plain
Content

Changes on transport level

TLS only

Binary instead of textual

Header compression

Smaller requests and responses

Less roundtrips

Headers are received early (1st packet)

Response body

HTML response

DOM parsing

Rendering

Asset fetching

Applying CSS

Executing JS

https://www.ﬂickr.com/photos/hangdog/10991275/

Blocking HTML rendering

CSS triggers repaints

JS can manipulate the DOM

JS can access attributes set by CSS

HTTP/1.1 200 OK Content-Type: text/html <html> <head> <link href="main.css" >
<link href="proﬁle.css" > <script src="library.js" /> <script src="app.js" /> <script> // some JS </script> </head> <body>

Every request one TCP connection

Concurrent connection limits

Network congestion

http://www.browserscope.org/?category=network

Domain sharding

http://c5.rgstatic.net/proﬁle.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

Image compression

Minification

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-conﬁg/pluginhost- conﬁg-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

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.ﬂickr.com/photos/ksayer/5614813296/

Critical rendering path

What is visible?

What is critical?

Inline critical assets

Either inline always

Caching?

First request

HTTP/1.1 200 OK Content-Type: text/html <html> <head> <styles> … your
critical css </styles> </head> <body> <div>content</div> load main.css async set cookie that other css was loaded </body> </html>

Subsequent request (if Cookie set)

HTTP/1.1 200 OK Content-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 OK Content-Type:
text/html <html> <head><link ..><script ..> GET /foo.html </head><body></body></html>

HTTP supports streaming

Browser Server GET /foo.html <body></body> </html> HTTP/1.1 200 OK Content-Type:
text/html <html> <head><link ..><script ..></head> GET css & js

https://developer.mozilla.org/en-US/docs/Web/HTTP/ Controlling_DNS_prefetching

https://developer.mozilla.org/en-US/docs/Web/HTTP/ Link_prefetching_FAQ

Problems

Headers are already sent

Redirects

Proxies, servers, load balancers may buffer content

Browsers may wait before starting to render HTML

JSON/XML

Caching what assets are needed

GET /literature.AddPublicationsDialog HTTP/1.1 200 OK Content-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 HTTP/1.1 200 OK Content-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/

Headers X-Associated-Content

Automated learning

When can I use it?

Browser support

http://caniuse.com/#feat=http2

http://caniuse.com/#search=spdy

Server support

Nginx http://nginx.org/en/docs/http/ngx_http_v2_module.html

https://github.com/icing/mod_h2 Apache httpd

Performance best practices will evolve

Stay up to date

Expect more frequent HTTP protocol iterations

https://joind.in/15435

http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann [email protected]

HTTP/2.0 101 Introduction

HTTP/2.0 101 Introduction

More Decks by Bastian Hofmann

Other Decks in Programming

Featured

Transcript