![Page 1: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/1.jpg)
09 May 2017 www.retit.de 1
HTTP/2 – Web Performance Improvements for free!
Richard Vobl, 09.05.2017
![Page 2: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/2.jpg)
09 May 2017 www.retit.de 2
• History
• HTTP2
• Performance Analysis
Agenda
![Page 3: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/3.jpg)
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
![Page 4: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/4.jpg)
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
![Page 5: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/5.jpg)
09 May 2017 www.retit.de 5
High bandwith
A lot of data
A lot of resources
…
History
• Low bandwith
• Little data
• Few resources
![Page 6: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/6.jpg)
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
![Page 7: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/7.jpg)
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
![Page 8: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/8.jpg)
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
![Page 9: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/9.jpg)
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
![Page 10: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/10.jpg)
09 May 2017 www.retit.de 10
Demo
• http://http2.golang.org/gophertiles?latency=0
![Page 11: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/11.jpg)
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
![Page 12: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/12.jpg)
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
![Page 13: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/13.jpg)
09 May 2017 www.retit.de 13
• Based on SPDY (2009)
• (Encryption)
• Binary
• Multiplexing
• Header Compression
• Prioritization
• Server Push
HTTP/2 – Key Features
![Page 14: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/14.jpg)
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
![Page 15: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/15.jpg)
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
![Page 16: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/16.jpg)
09 May 2017 www.retit.de 16
Multiplexing
Source: https://www.nginx.com/blog/7-tips-for-faster-http2-performance/
![Page 17: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/17.jpg)
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
![Page 18: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/18.jpg)
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
![Page 19: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/19.jpg)
09 May 2017 www.retit.de 19
Demo
• https://http2.golang.org/gophertiles?latency=0
![Page 20: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/20.jpg)
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
![Page 21: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/21.jpg)
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")
![Page 22: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/22.jpg)
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
![Page 23: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/23.jpg)
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
![Page 24: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/24.jpg)
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
![Page 25: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/25.jpg)
09 May 2017 www.retit.de 25
Prioritization
Firefox
Chrome
Source: https://speakerdeck.com/summerwind/2-prioritization
HTML
CSS
JavaScript
Images
![Page 26: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/26.jpg)
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
![Page 27: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/27.jpg)
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
![Page 28: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/28.jpg)
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
![Page 29: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/29.jpg)
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
![Page 30: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/30.jpg)
09 May 2017 www.retit.de 30
• RETIT Web Application
• Other Studies
• General Remarks
Performance Analysis
![Page 31: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/31.jpg)
09 May 2017 www.retit.de 31
Ubuntu (4 CPU cores, 8 GB RAM)
Wildfly AS
Chrome
Performance Analysis
LoadTest
Selenium
ChromedriverPolymer AppNetem
![Page 32: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/32.jpg)
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!
![Page 33: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/33.jpg)
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
![Page 34: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/34.jpg)
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
![Page 35: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/35.jpg)
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
![Page 36: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/36.jpg)
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
![Page 37: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/37.jpg)
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
![Page 39: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/39.jpg)
09 May 2017 www.retit.de 39
Backup
![Page 40: 2 Web Performance Improvements for free! · 09 May 2017 1 HTTP/2 –Web Performance Improvements for free! Richard Vobl, 09.05.2017](https://reader034.vdocument.in/reader034/viewer/2022042309/5ed68ac2ff0e593c0b640a48/html5/thumbnails/40.jpg)
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