2 web performance improvements for free! · 09 may 2017 1 http/2 –web performance improvements...

09 May 2017 www.retit.de 1

HTTP/2 – Web Performance Improvements for free!

Richard Vobl, 09.05.2017

09 May 2017 www.retit.de 2

• History

• HTTP2

• Performance Analysis

Agenda

09 May 2017 www.retit.de 3

HTTP/1.0

• Low bandwith

• Little data

• Few resources

1996

History

Time

Resource

index.html

style.css

script.js

image1.gif

image2.gif

Connect Time Time to first byte Transfer time

09 May 2017 www.retit.de 4

HTTP/1.1

• Persistent connections (connection re-use)

• Pipelining (never really worked / used)

1997

History

Time

Resource

index.html

style.css

script.js

image1.gif

image2.gif

Connect Time Time to first byte Transfer time

09 May 2017 www.retit.de 5

High bandwith

A lot of data

A lot of resources

…

History

• Low bandwith

• Little data

• Few resources

09 May 2017 www.retit.de 6

Load Time Today: HTTP/1.0

Time

Resource

index.html

style.css

script.js

image1.gif

image2.gif

resource6

resource7

resource8

resource9

resource10

resource11

resource12

resource13

resource14

resource15

resource16

resource17

Connect Time

Time to first byte

Transfer time

09 May 2017 www.retit.de 7

Load Time Today: HTTP/1.1

Time

Resource

index.html

style.css

script.js

image1.gif

image2.gif

resource6

resource7

resource8

resource9

resource10

resource11

resource12

resource13

resource14

resource15

resource16

resource17

Connect Time

Time to first byte

Transfer time

09 May 2017 www.retit.de 8

Load Time Today: HTTP/1.1 with more connections

Time

Resource

index.html

style.css

script.js

image1.gif

image2.gif

resource6

resource7

resource8

resource9

resource10

resource11

resource12

resource13

resource14

resource15

resource16

resource17

Connect Time

Time to first byte

Transfer time

09 May 2017 www.retit.de 9

• More bandwith does NOT improve load time (anymore)

• Latency becomes decisive factor

• (see: Ilya Grikorik, http://tinyurl.com/omyuh3x; Mike Belshe

http://tinyurl.com/btqpclr)

• Connections are precious

Result

09 May 2017 www.retit.de 10

Demo

• http://http2.golang.org/gophertiles?latency=0

09 May 2017 www.retit.de 11

• Spriting

• Inlining

• Concatenating

• Sharding (distribute HTTP requests)

• BUT: Complexitiy (Development, Operation, Overhead), Dirty Hacks!

Performance Optimizations

Reduce number of HTTP requests,

but are bad for caching

09 May 2017 www.retit.de 12

• Same semantics as HTTP/1.1 (Compatibility)

• Shapes HTTP to fit into modern web

• Pros and Cons

HTTP/2 – Overview

09 May 2017 www.retit.de 13

• Based on SPDY (2009)

• (Encryption)

• Binary

• Multiplexing

• Header Compression

• Prioritization

• Server Push

HTTP/2 – Key Features

09 May 2017 www.retit.de 14

HTTP/2

• Messages are decomposed into

frames (HEADERS, DATA,

SETTINGS, …)

• Each frame has a common setup

HTTP/1.1

• Message contains header data

as well as payload

Binary

POST /upload HTTP/1.1

Host: www.example.org

Content-Type: application/json

Content-Length: 22

…

{"msg":"Hello World!"}

HEADERS frame

DATA frame

09 May 2017 www.retit.de 15

Cons

• Not readable harder to debug

Pros

• More efficient to parse

• More compact "on the wire"

• Less error-prone

Binary

09 May 2017 www.retit.de 16

Multiplexing

Source: https://www.nginx.com/blog/7-tips-for-faster-http2-performance/

09 May 2017 www.retit.de 17

Multiplexing

Connection

Stream

Stream

…

Request messageHEADERS

Response messageHEADERS DATA DATA

Request message

Response messageHEADERS DATA DATA

DATA HEADERS

09 May 2017 www.retit.de 18

Load Time Today: HTTP/2

Time

Resource

index.html

style.css

script.js

image1.gif

image2.gif

resource6

resource7

resource8

resource9

resource10

resource11

resource12

resource13

resource14

resource15

resource16

resource17

Connect Time

Time to first byte

Transfer time

09 May 2017 www.retit.de 19

Demo

• https://http2.golang.org/gophertiles?latency=0

09 May 2017 www.retit.de 20

Cons

• Exposes weaknesses of TCP

• Additional metadata produces

overhead (especially for large

files)

Pros

• Only one TCP connection has to

be established

• Overhead is reduced (TLS)

• Impact of latency is reduced

• Solves head-of-line blocking

problem for pipelining

Multiplexing

09 May 2017 www.retit.de 21

• HPACK

• Huffman

• Static table

• Dynamic table (FIFO, 4kB)

Header Compression

GET /index.html

Host: www.example.org

2 :method GET

5 :path /index.html

35 Host

61 www-authenticate

62

…

…

…

2,5,35,

Huffman("www.example.org")

09 May 2017 www.retit.de 22

2,Huffman("/newResource"),

62

GET /newResource

Host: www.example.org

• HPACK

• Huffman

• Static table

• Dynamic table (FIFO, 4kB)

Header Compression

2 :method GET

5 :path /index.html

35 Host

61 www-authenticate

62

…

…

…

Host www.example.org

09 May 2017 www.retit.de 23

Cons

• CPU overhead

• Response headers often much

smaller

• Harder to debug

Pros

• Reduces amount of data

• Especially for redundant request

headers

Header Compression

09 May 2017 www.retit.de 24

• Prioritization of streams

• HEADERS and PRIORITY frames

• Suggestion by the client to the server

• Weight

• Dependency

Prioritization

*

A

8

B

4

*

C

1

D

5

*

C

1

D

5

A

8

B

4

*

C

1

D

5

A

8

B

4

E

5

09 May 2017 www.retit.de 25

Prioritization

Firefox

Chrome

Source: https://speakerdeck.com/summerwind/2-prioritization

HTML

CSS

JavaScript

Images

09 May 2017 www.retit.de 26

• Push a resource to the client before it is requested

• Enabled by default (disable in SETTINGS frame)

• PUSH_PROMISE frame

Server Push

09 May 2017 www.retit.de 27

Connection

Server Push

HEADERS (sid=1)

GET /index.html

PUSH_PROMISE (sid=1)

Promised sid=2

GET /style.css

<request headers>

HEADERS

(sid=1)

DATA

(sid=1)

HEADERS

(sid=2)

DATA

(sid=2)[ ]

Client Server

09 May 2017 www.retit.de 28

• Difficult to decide what to push

• Negative effects with caching

• RST_STREAM frame allows to cancel push event (probably too late)

• Learning Push Service (heuristic data)

Server Push

09 May 2017 www.retit.de 29

• Full browser support (http://caniuse.com/#search=http2: ~82%)

• Server implementations at varying levels of support (features)

• https://github.com/http2/http2-spec/wiki/Implementations

Using HTTP/2

09 May 2017 www.retit.de 30

• RETIT Web Application

• Other Studies

• General Remarks

Performance Analysis

09 May 2017 www.retit.de 31

Ubuntu (4 CPU cores, 8 GB RAM)

Wildfly AS

Chrome

Performance Analysis

LoadTest

Selenium

ChromedriverPolymer AppNetem

09 May 2017 www.retit.de 32

Performance Analysis

0

0,1

0,2

0,3

0,4

0,5

0,6

0,7

0,8

0,9

1

0ms 50ms 100ms 150ms 200ms

Rela

tive L

oad

Tim

e

Latency

Relative Load Time Change

HTTP/2 HTTP/1.1

BUT: Build

optimization

(HACKS!) for

HTTP/1.1 NOT

enabled!

Think

Mobile!

09 May 2017 www.retit.de 33

• Build optimization for HTTP/1.1 enabled:

• HTTP/1.1 and HTTPS/2 head-to-head

• HTTPS/1.1 slightly slower

• BUT (our use case):

• ~ 1MB of data is transferred

• Build optimization reduced the necessary requests to < 6

• No third party libraries have to be loaded over the web

Performance Analysis

09 May 2017 www.retit.de 34

• http://blog.loadimpact.com/blog/http2/study-shows-http2-can-improve-

website-performance-between-50-70-percent/

• Amazon.com

• 50-70% reduced load time (depending on latency)

• https://css-tricks.com/http2-real-world-performance-test-analysis/

• WordPress Template

• 20-60% reduced load time

Performance Analysis – Other Studies

09 May 2017 www.retit.de 35

• https://www.youtube.com/watch?v=0yzJAKknE_k

• Fastly (Cloud Platform, CDN)

• Slight improvements in some cases, but also negative effects

• https://www.youtube.com/watch?v=4OiyssTW4BA

• NGINX

• Improvement compared to HTTPS/1.1

Performance Analysis – Other Studies

09 May 2017 www.retit.de 36

• Lab setups are not 100% realistic

• Mechanics of HTTP/2 do have a performance impact

• Performance improvements (changes) depend on content and type of

the website

• Performance analysis for individual use case is advisable

Performance Analysis – General Remarks

09 May 2017 www.retit.de 37

• HTTP/2 is not the "holy grail"

• Sites are optimized for HTTP/1.1

• Reduces the need for hacky performance optimizations reduced

complexity in development & operation

• HTTP/2 implementations not at final degree of maturity

• There is still a lot to learn

Summary & Outlook

09 May 2017 www.retit.de 38

Richard Voblvobl@retit.de

09 May 2017 www.retit.de 39

Backup

09 May 2017 www.retit.de 40

• HTTP/2 101

https://www.youtube.com/watch?v=r5oT_2ndjms

• HTTP/2 vs. HTTP/1.1: A Performance Analysis

https://www.youtube.com/watch?v=0L5Q_897fwk

• HTTP/2: what no one is telling you

https://www.youtube.com/watch?v=0yzJAKknE_k

Some Links