Web Performance Optimization with HTTP/3

Service Platform Architect
Brandon Kang
sangjinn@gmail.com
https://tech.brandonkang.net
June 2020
Web Performance Optimization
with HTTP/3

Optimization
What is Optimization?
Steps of preparing the best Conditions
To make the best Performance

Web Optimization
To make Web site Faster!
With…
• Backend Optimization
• Frontend Optimization
• Protocol Optimization

Backend/Frontend Optimization
Backend Frontend
-> Rendering
Starts…
| Rendering
Completes

Backend Optimization
• DNS RTT Acceleration
• DNS Caching
• Increase Network throughput
• Web/WAS CPU/RAM Upgrade
• Proxy Server
• CDN(Content Delivery Network)
• Database Caching
• Database Normalization
• Load balancing + Scaling Out
• …

Frontend Optimization
RUM(Real User Monitoring) based
Optimization per Network, Device, Browser, OS, ..
-> Personalization

Frontend Optimization
• Script combination
• Script minification
• GZIP Encoding, Brotli, …
• Browser friendly images e.g.)WebP, JPEGXR
• Image resizing and (loosely) compression
• Browser cache(cache-control header)
• DNS RTT <-> Domain Sharding
• DNS prefetching
• CSS/JS locating (Top/Bottom)
• Page prefetching
• 3rd
party script optimization
• …

Protocol Optimization
HTTP
“To upgrade HTTP for
faster Request & Response!!”
Client Server

HTTP Versions
1991 1995 1997 2012 2013 2015
2019
HTTP0.9
HTTP1.0
HTTP1.1
SPD
Y
HTTP/2
HTTP/3
QUI
C
• TCP -> MPTCP -> UDP -> gQUIC -> QUIC
• HTTP1.1 -> SPDY -> HTTP/2 -> HTTP Over QUIC -> HTTP/3

~/Desktop/code » h2c start --dump
-> SETTINGS(0)
- ACK
{empty}
<- SETTINGS(0)
- ACK
SETTINGS_HEADER_TABLE_SIZE: 4096
SETTINGS_MAX_CONCURRENT_STREAMS: 100
SETTINGS_INITIAL_WINDOW_SIZE: 65535
SETTINGS_MAX_FRAME_SIZE: 16384
SETTINGS_MAX_HEADER_LIST_SIZE: 16384
-> SETTINGS(0)
+ ACK
{empty}
<- SETTINGS(0)
+ ACK
{empty}
-> HEADERS(1)
+ END_STREAM
+ END_HEADERS
:method: GET
:scheme: https
:authority: http2.akamai.com
:path: /
<- PUSH_PROMISE(1)
+ END_HEADERS
Promised Stream Id: 2
:method: GET
:path: /resources/push.css
:authority: http2.akamai.com
:scheme: https
host: http2.akamai.com
accept: */*
<- HEADERS(1)
- END_STREAM
+ END_HEADERS
:status: 200
server: Apache
content-type: text/html;charset=UTF-8
etag: "9068c20f1c727825919f58f136cdfb91:1506554442"
strict-transport-security: max-age=31536000 ; includeSubDomains
access-control-allow-origin: *
access-control-allow-methods: GET,HEAD,POST
<- DATA(1)
- END_STREAM
{1522 bytes}
<- DATA(1)
+ END_STREAM
{0 bytes}
EOF
HTTP/2

HTTP/2 - Multiplexing
Pipelining
HTTP1.1
Multiplexing
HTTP/2
HTTP1.0
Client Client Client

Static Table
1 :authority
2 :method GET
3 :path /
4 :scheme https
… … …
62 user-agent Mozilla/5.0 (Macintosh; Intel
Mac..
… … …
Dynamic Table
• Header indexing using static & dynamic tables
• After indexing, Compress headers with Huffman encoding
• Encoding & Decoding at client and server
Client Server
HTTP/2 – Header Compression

HTTP/2 - Server Push
• Server pushes contents without client’s request
• Saving RTT(Round Trip Time) between two endpoints

* CRP(Critical Rendering Path)
From: https://developers.google.com/web/fundamentals/performance
/critical-rendering-path/analyzing-crp

HTTP1.1
HTTP/2
Server Push (X)
HTTP/2 +
Server Push (O)
/index.html
style.css
logic.js
image.jpg
1sec 2sec 3sec 4sec 5sec
/index.html
style.css
logic.js
image.jpg
/index.html
style.css
logic.js
image.jpg
Pushed
Contents
HTTP/2
Multiplexing,
Header compression,
…
Request &
Response

But,
Why HTTP/3
Only four years after the
HTTP/2 Announcement?

HTTP/3
HTTP/2 resolved
HOLB(Head Of Line Blocking) of HTTP
However, It still has HOLB problem of TCP
?

HTTP/3
The old TCP protocol
Can’t Resolve HOLB issue..
Thus, We need a new protocol
->
QUIC

QUIC
(Quick UDP Internet Connections)

QUIC
From: https://blog.chromium.org/2015/04/a-quic-update-on-googles-experimental.html

HTTP/3
HTTP/2
TLS 1.2+
TCP
HTTP/3
UDP
IP
TLS 1.3
QUI
C
• QUIC enables protocol optimization
• TLS 1.3 provides more secure and faster transmission.

HTTP/3 Reliability
HTTP/3
QUIC
UDP
QUIC
Reliability Layer
QUIC has a Reliable Layer that makes
Packet retransmission, congestion control, recovering loss,..
inheritance from TCP protocol

Static Table
1 :authority
2 :method GET
3 :path /
4 :scheme https
… … …
62 user-agent Mozilla/5.0 (Macintosh; Intel
Mac..
… … …
Dynamic Table
• Static table with a list of headers defined in RFC
• Clients and server updates a Dynamic table
• Indexes on Dynamic tables are assigned (First-In-First-Out)
Client Server
HTTP/3 QPACK = HPACK in HTTP/2

Client Server
Step 1) date:Wed, 23 Oct 2019 20:13:21 GMT
34 characters, 34 bytes
Responses date: header
Step 2) ..date:.…zd..2...0....z.sd......
Huffman encoded, 34 bytes -> 29 bytes
HTTP/3 - QPACK

Client Server
Same response uses the index
“date:Wed, 23 Oct 2019 20:13:21 GMT”
Static Table
1 :authority
… … …
33 :date
… … …
62 date Wed, 23 Oct 2019 20:13:21 GMT
… … …
Dynamic Table
Index 62
24 bytes -> 1 byte
HTTP/3 - QPACK

Decoder
Ecoder
Static
Table
Dynamic
Table
Encoder Decoder
Decoder
Ecoder
Static
Table
Dynamic
Table Decoder
Encoder
Client
Server
• Encoder updates Dynamic table and Compress headers
• Decoder Decompress headers using Dynamic table and Static table
HTTP/3 - QPACK

HTTP/3
HTTP/3 Resolves the TCP HOLB Problem
And,
• Inherits HTTP/2 Benefits
+
• TLS1.3
• UDP Performance
• QUIC Efficiency

HTTP/3
QUIC
HTTP/3
=
HTTP/2
+
TCP benefits + QUIC
+
TLS 1.3
Reliability Layer
HTTP/2
TLS 1.3

DEMO
- HTTP/3 with Chrome Canary -

HTTP/3 Cons..
• Still beta protocol and implemented services
• HTTP1.1 is still mainly used, HTTP/2 is the following..
• UDP network is blocked in internal network hops
• QUIC fail ratio is up to 3~7%
• No standard QUIC APIs
• CPU intensive on the web server
• Unoptimized UDP stack
• Lack of HTTP/3 tools and services (except Google)

- Thank You. -
Service Platform Architect
Brandon Kang
sangjinn@gmail.com
https://tech.brandonkang.net
HTTP/3
Faster and Securer

Web Performance Optimization with HTTP/3

More Related Content

Web Performance Optimization with HTTP/3