HTTP2 What, where, why, and when?! Smashing Conference, March 2016

Slide 1

Slide 1 text

HTTP/2 Patrick Hamann — Smashing Conference, Oxford, March 2016 @patrickhamann What, where, why, and when?! !

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Web application stack Session TLS (optional) Transport (TCP) Network (IP) Application (HTTP) HTML CSS JavaScript

Slide 5

Slide 5 text

The brief history of HTTP 1995 HTTP/1.0 (RFC1945) HTTP/0.9 1991 HTTP/2 (RFC7540) 2015 HTTP/1.1 (RFC2068) 1997 2006 SPDY

Slide 6

Slide 6 text

1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015 GET /index.html

Slide 7

Slide 7 text

1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015

Slide 8

Slide 8 text

1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015

Slide 9

Slide 9 text

1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015

Slide 10

Slide 10 text

1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015 HTTP/2 HTTP/2 HTTP/2 HTTP/2

Slide 11

Slide 11 text

HTTP/2 ?%&$! https://bagder.gitbooks.io/http2-explained/content/en/part4.html • Be less sensitive to latency • Fix pipelining and the head of line blocking problems • Eliminate the need to increase the number of connections to each host • Keep all existing interfaces, URI formats and schemes • Be made within the IETF's HTTPbis working group   HTTP/2 Explained  DANIEL STENBERG — MOZILLA, 2015

Slide 12

Slide 12 text

1. Why 2. What 3. Where 4. When

Slide 13

Slide 13 text

Why?

Slide 14

Slide 14 text

Our websites are changing !=

Slide 15

Slide 15 text

Requesrts 0 50 100 150 200 250 300 2011 2012 2013 2014 2015 2016 201 219 224 227 238 239 59 68 70 75 76 81 Median 95th Average HTTP requests per page

Slide 16

Slide 16 text

80 Average requests per page

Slide 17

Slide 17 text

Requesrts 0 1000 2000 3000 4000 5000 6000 7000 8000 2011 2012 2013 2014 2015 2016 2,186 2,898 4,103 5,106 6,119 6,883 487 667 848 1,089 1,280 1,474 Median 95th Average bytes per page

Slide 18

Slide 18 text

1.4mb Average bytes transferred per page

Slide 19

Slide 19 text

We don’t use the network efficiently

Slide 20

Slide 20 text

It’s all about latency! https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

Slide 21

Slide 21 text

HTTP connection DNS lookup Initial connection  (TCP) SSL/TLS negotiation TTFB Content download

Slide 22

Slide 22 text

Average round trip time on UK 3G connection Dmytrii Shchadei — http://www.slideshare.net/metrofun/reduce-mobile-latency " # # # $ Internal latency Firewalls, Load Balancers, Servers % Internet routing latency CDNs, ISPs, Caches, Proxies Control plane latency ~600ms on average UK 3G connection ~200ms

Slide 23

Slide 23 text

Head of line blocking $ & Client Server TCP connection GET /image-1.jpg GET /image-1.jpg '

Slide 24

Slide 24 text

Head of line blocking $ & Client Server GET /image-1.jpg GET /image-2.jpg GET /image-3.jpg GET /image-4.jpg GET /image-5.jpg GET /image-6.jpg

Slide 25

Slide 25 text

Hacks: concatenation ( React.js ( Angular.js ( jQuery.js ( Bootstrap.js ( MooTools.js ( main.js + + + +

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Hacks: domain sharding

Slide 28

Slide 28 text

Example of base64 json’ifed fonts Hacks: inlining

Slide 29

Slide 29 text

• Why latency matters • Where latency occurs • Head of line blocking • HTTP/1.1 Hacks and anti-patterns

Slide 30

Slide 30 text

1. Why 2. What 3. Where 4. When

Slide 31

Slide 31 text

What?

Slide 32

Slide 32 text

Slide 33

Slide 33 text

HTTP/2 core features 1. Multiplexing (via streams, frames, and messages) 2. Binary data format 3. Prioritisation 4. Header compression 5. Flow control 6. Server push

Slide 34

Slide 34 text

& Client $ Server Stream Message :method: GET :path: /image-2.jpg Frame Message :status 200 :version: HTTP/2.0 :vary: Accept-Encoding Frame … response payload … Frame Connection Stream A virtual channel within an established connection which carries bidirectional messages. Frame The smallest unit of communication, which carries a speciﬁc type of data—e.g., HTTP headers, payload, commands e.t.c. Message A complete sequence of frames that map to a logical HTTP message, such as a request. Multiplexing: terminology

Slide 35

Slide 35 text

Multiplexing: Frames HTTP/1.1 200 OK Content-Type: text/css Vary: Accept-Encoding Content-Encoding: gzip Cache-Control: max-age=6427474 Content-Length: 11740 Connection: keep-alive @font-face{font-family:"BentonSans";src:url("http://s1.ft- static.com/m/font/ft-velcro/bentonsans- regular.eot");src:url("http://s1.ft-static.com/m/font/ft-velcro/ bentonsans-regular.eot?#iefix") format("embedded- HEADERS frame DATA frame HTTP/1.1 HTTP/2

Slide 36

Slide 36 text

Binary frames Length Data payload… Type Flags Stream Identifier

Slide 37

Slide 37 text

Stream 5 HEADERS Stream 6 HEADERS Multiplexing: Streams HTTP/2 connection Stream 1 HEADERS Stream 1 DATA Stream 1 DATA Stream 2 HEADERS Stream 1 DATA Stream 1 DATA Stream 3 HEADERS $ Server & Client

Slide 38

Slide 38 text

HTTP/1.1 Prioritisation ) /index.html /main.css /app.js /image-1.jpg /image-2.jpg Time Delay

Slide 39

Slide 39 text

HTTP/2 Prioritisation ) /index.html Time /main.css /app.js /image-1.jpg /image-2.jpg

Slide 40

Slide 40 text

/hero.jpg Stream ID: 4 Weight: 16 /data.json Stream ID: 7 Weight: 16 /app.js Stream ID: 2 Weight: 64 /icon.svg Stream ID: 9 Weight: 16 /main.css Stream ID: 1 Weight: 128 HTTP/2 Prioritisation

Slide 41

Slide 41 text

Header compression: HPACK :method: GET :scheme: https :host: next.ft.com :path: /main.css Cookie FTUserTrack=213.216.148.1.1432658066641353; SIVISITOR=Mi45NzIuMjIzMDc2NzM2NTU0NS4x NDMyNzI0MTE2NDc4LjZmM2U4YmFj*; __gads=ID=0d68ab230d47cf5f:T=1432724114:S= ALNI_MZykGfLfvkhayKSL3LXYT9YQNtRjg; cookieconsent=accepted; & Client

Slide 42

Slide 42 text

Header compression: HPACK 2 :method: GET 3 :scheme: https 3 :host: next.ft.com 4 :path: /main.css 64 Cookie FTUserTrack=213.216.148.1.1432658066 641353; SIVISITOR=Mi45NzIuMjIzMDc2NzM2N TU0NS4xNDMyNzI0MTE2NDc4LjZm M2U4YmFj*; __gads=ID=0d68ab230d47cf5f:T=1432 & Client 2 :method: GET 3 :scheme: https 4 :host: next.ft.com 5 :path: /main.css 64 Cookie FTUserTrack=213.216.148.1.1432658066 641353; SIVISITOR=Mi45NzIuMjIzMDc2NzM2N TU0NS4xNDMyNzI0MTE2NDc4LjZm M2U4YmFj*; __gads=ID=0d68ab230d47cf5f:T=1432 Static table Dynamic table

Slide 43

Slide 43 text

Header compression: HPACK 2 3 4 ` 5 :path: /app.js 64 65 X-Custom-Header TRUE & Client

Slide 44

Slide 44 text

Push $ & Client Server HTTP/2 connection GET /index.html GET /main.css

Slide 45

Slide 45 text

Push $ & Client Server GET /index.html PUSH_PROMISE /imain.css ' 200 OK /index.html HTTP/2 connection

Slide 46

Slide 46 text

Push $ & Client Server GET /index.html PUSH_PROMISE /imain.css ' RST_STREAM /main.css HTTP/2 connection

Slide 47

Slide 47 text

• Multiplexing via streams and frames • Client/server prioritisation • Header compression via HPACK • Server-side resource pushing

Slide 48

Slide 48 text

1. Why 2. What 3. Where 4. When

Slide 49

Slide 49 text

Where?

Slide 50

Slide 50 text

Browsers https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing Current browser support

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Severs https://github.com/http2/http2-spec/wiki/Implementations Server Version Push NGINX 1.9.5+ No Apache 2.4.17+ Yes IIS 10 Yes Jetty 9.3+ Yes

Slide 53

Slide 53 text

CDNs https://istlsfastyet.com/ Provider Version Push Akamai Yes No CloudFlare Yes No KeyCDN Yes No MaxCDN No No Fastly No No AWS CloudFront No No

Slide 54

Slide 54 text

PaaS https://istlsfastyet.com/ Server Version Google App Engine Yes AWS (ELB) No Heroku No

Slide 55

Slide 55 text

Choosing the right server! Does it support stream priorities? * * Does it support server push? * If so, what strategies does it support for resource hinting? * Does it have intelligent optimisation?

Slide 56

Slide 56 text

Strategy: static assets/CDN " % $ $ ( + ) .css ) .js ) .woff /index.html Origin CDN Origin Static assets Client HTTP/2 HTTP/1.1

Slide 57

Slide 57 text

Strategy: reverse proxy " $ Proxy ( /index.html + ) .css ) .js ) .woff Static assets Client HTTP/1.1 $ Origin HTTP/2

Slide 58

Slide 58 text

Strategy: all teh thingz! " ( /index.html + ) .css ) .js ) .woff Static assets Client $ Origin HTTP/2

Slide 59

Slide 59 text

Strategy: push critical assets Request page Network Render GET html Build DOM response Build CSSOM Render page idle idle GET css response Render blocking Run JS GET js response Async Render text GET font response

Slide 60

Slide 60 text

Strategy: push critical assets Request page Network Render GET html Build DOM response Build CSSOM Render page idle idle GET css response Run JS GET js response Render text GET font response Push ,

Slide 61

Slide 61 text

What should we push? Critical CSS * * Critical fonts * Core JavaScript applications

Slide 62

Slide 62 text

How can we push? Resource hints Link: ; rel=preload; as=style; Link header: Link element: Link: ; rel=push; rel=push ?? https://www.w3.org/TR/preload/#server-push-http-2

Slide 63

Slide 63 text

How can we push? Manifest { "/css/app.css": { "type": "style", "weight": 2 }, "/js/app.js": { "type": "script", "weight": 1 }, "/bower_components/component/webcomponents-lite.js": { "type": "script", "weight": 1 } …

Slide 64

Slide 64 text

) .css /main.css GET ) .js /main.js GET ( /index.html GET How can we push? Intelligent push % CDN " Client

Slide 65

Slide 65 text

) .css /main.css , ) .js /main.js , ( /index.html How can we push? Intelligent push % CDN " Client

Slide 66

Slide 66 text

Tools: WebPageTest

Slide 67

Slide 67 text

Tools: WPT http://www.slideshare.net/AndyDavies/the-case-for-http2-internetdagarna-2015-stockholm/65

Slide 68

Slide 68 text

Dev tools https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing

Slide 69

Slide 69 text

Dev tools https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing

Slide 70

Slide 70 text

Wireshark https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing https://jimshaver.net/2015/02/11/decrypting-tls-browser-traffic-with-wireshark-the-easy-way/

Slide 71

Slide 71 text

Wireshark https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing $ export SSLKEYLOGFILE=~/sslkeylogs/

Slide 72

Slide 72 text

https://github.com/summerwind/h2spec

Slide 73

Slide 73 text

Tools: chrome://net-internals

Slide 74

Slide 74 text

Tools: http2-log-parser https://github.com/rmurphey/chrome-http2-log-parser

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

• Browser and server support • TLS requirement • Considerations when choosing your HTTP server • Deployment strategies • Push strategies • Tooling landscape

Slide 77

Slide 77 text

1. Why 2. What 3. Where 4. When

Slide 78

Slide 78 text

When?

Slide 79

Slide 79 text

Move to TLS first Acquire certificates * * Ensure all 3rd party scripts are secure * Ensure all 1st party assets are secure * Configure / upgrade servers * Force all traffic to TLS

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

What is your user support like? 56% 44% H2 capable Browser statistics taken form next.ft.com March 2016

Slide 82

Slide 82 text

Change your build process to be H2 first gulp build-default build-concat

Slide 83

Slide 83 text

Bundle by frequency of change! Libraries Utilities Application

Slide 84

Slide 84 text

Bundle by frequency of change! Libraries Utilities Application Rarely change Frequent change

Slide 85

Slide 85 text

Bundle by frequency of change! Libraries Utilities Application Rarely change Frequent change ( core.js ( app.js

Slide 86

Slide 86 text

Performance basics still matter! First render (above the fold) prioritisation & optimisation * * Compression, minification, and image optimisation * Cache wherever possible * Reduce DNS lookups and TLS handshakes * Use CDNs to reduce latency

Slide 87

Slide 87 text

• Move to TLS first • Get stakeholders involved • Analyse your user support • Change your build processes • Performance basics still matter!

Slide 88

Slide 88 text

1. Why 2. What 3. Where 4. When

Slide 89

Slide 89 text

Summary

Slide 90

Slide 90 text

Does it work? 95th percentile load event FT.com Statistics taken form next.ft.com March 2016 loadEvent (ms) 0 4,500 9,000 13,500 18,000 Mobile Tablet Desktop HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 6,671 16,411 15,163 6,317 12,956 10,776

Slide 91

Slide 91 text

Does it work? Impact of latency and HTTP/2 Statistics taken form next.ft.com March 2016 Median loadEvent (ms) 0 1,250 2,500 3,750 5,000 RTT (latency) 0 100 200 300 400 500 H2 H1

Slide 92

Slide 92 text

Does it work? 95th percentile start render Statistics taken form next.ft.com March 2016 Start render (ms) 0 800 1,600 2,400 3,200 Mobile Tablet Desktop HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 2,521 2,944 3,028 1,105 2,453 2,506

Slide 93

Slide 93 text

#perfmatters

Slide 94

Slide 94 text

Thanks @patrickhamann http://bit.ly/http2-what-where-why-when  github.com/Financial-Times ! - . Do you want to help build this stuff? Join in.