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


• History

• HTTP2

• Performance Analysis

Agenda


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


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


High bandwith

A lot of data

A lot of resources

…

History

• Low bandwith

• Little data

• Few resources


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


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


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


• 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

http://tinyurl.com/omyuh3x

http://tinyurl.com/btqpclr


Demo

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

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


• 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


• Same semantics as HTTP/1.1 (Compatibility)

• Shapes HTTP to fit into modern web

• Pros and Cons

HTTP/2 – Overview


• Based on SPDY (2009)

• (Encryption)

• Binary

• Multiplexing

• Header Compression

• Prioritization

• Server Push

HTTP/2 – Key Features


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


Cons

• Not readable harder to debug

Pros

• More efficient to parse

• More compact "on the wire"

• Less error-prone

Binary


Multiplexing

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


Multiplexing

Connection

Stream

Stream

…

Request messageHEADERS

Response messageHEADERS DATA DATA

Request message

Response messageHEADERS DATA DATA

DATA HEADERS


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


Demo

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

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


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


• HPACK

• Huffman

• Static table

• Dynamic table (FIFO, 4kB)

Header Compression

GET /index.html


2 :method GET

5 :path /index.html

35 Host

61 www-authenticate

62

…

…

…

2,5,35,

Huffman("www.example.org")


2,Huffman("/newResource"),

62

GET /newResource


• 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


Cons

• CPU overhead

• Response headers often much

smaller

• Harder to debug

Pros

• Reduces amount of data

• Especially for redundant request

headers

Header Compression


• 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


Prioritization

Firefox

Chrome

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

HTML

CSS

JavaScript

Images


• Push a resource to the client before it is requested

• Enabled by default (disable in SETTINGS frame)

• PUSH_PROMISE frame

Server Push


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


• 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


• 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

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

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


• RETIT Web Application

• Other Studies

• General Remarks

Performance Analysis


Ubuntu (4 CPU cores, 8 GB RAM)

Wildfly AS

Chrome


LoadTest

Selenium

ChromedriverPolymer AppNetem



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!


• 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



• 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

http://blog.loadimpact.com/blog/http2/study-shows-http2-can-improve-website-performance-between-50-70-percent/

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


• 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

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

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


• 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


• 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


Richard [email protected]


Backup


• 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


Some Links

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

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


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

Documents