HTTP/2.0 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/

There are a lot of „hacks“ needed to get a
web application fast

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

The anatomy of a page load

Every request one TCP connection

User enters URL

DNS lookup

TCP connection

TLS handshake

This already takes time

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

HTML response

DOM parsing

Rendering

Asset fetching

Applying CSS

Executing JS

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

Blocking HTML rendering

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>

JS can manipulate the DOM

Average page size

Average asset count

http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/

http://httparchive.org/trends.php

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

Larger assets

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

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"] } );

Single page apps

It takes longer until something is visible

Cost of server side rendering

Compared with…

https://www.ﬂickr.com/photos/91026431@N05/8497636527/

Slow connections

High latency

The internet gets slower and slower

It’s hard work to keep a page fast

Lots of hacks around HTTP needed

It needs to get better

HTTP/2.0

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

Headers are received early (1st packet)

Fully multiplexed

1 connection for parallelism

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/

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

When can I use it?

Browser support

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

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

Server support

Nginx https://www.nginx.com/blog/early-alpha-patch-http2/

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

Performance best practices will evolve

Stay up to date

Expect more frequent HTTP protocol iterations

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

HTTP/2.0 Introduction

HTTP/2.0 Introduction

More Decks by Bastian Hofmann

Other Decks in Programming

Featured

Transcript