웹 사이트의 빠른 로딩을 위한 프론트 엔드 최적화 기법과 더불어 알아두어야 할 HTTP 프로토콜 최적화를 언급하며, 최근 발표된 HTTP/3를 소개합니다. HTTP/3는 "Hyper Text Transfer Protocol over QUIC"의 내용을 근간으로 UDP의 장점을 HTTP에 활용한 버전입니다. HTTP/3를 알기 위해서는 QUIC에 대한 이해와 함께, 기존 버전인 HTTP/2에서 어떤 부분이 개선되었는지에 대한 이해가 동시에 필요합니다. Chrome을 활용한 웹 성능 비교 예제들은 HTTP/3의 기술들을 빠르게 이해하는 데 도움이 될 것입니다.

1. 강상진(sangjinn@gmail.com)
GDG Korea WebTech
2019.11.23
HTTP/3 시대의
웹 최적화 기술 이해하기
HTTP/3
Faster and Securer

2. 최적화
최적화(Optimization)
최고의 성능(Performance)을 만들 수 있는
최적의 조건(Condition)을 갖추는 것.

3. 웹 최적화
웹 사이트의 로딩 속도를
최대한 빠르게 만드는 기술
• 백엔드 최적화
• 프론트엔드 최적화
• 프로토콜 최적화 (오늘의 주제..)

4. 백엔드/프론트엔드 최적화
백엔드 프론트엔드
-> 렌더링 시작
| 렌더링 완료

5. 백엔드(Backend) 최적화
• DNS RTT 가속
• DNS 캐싱
• 네트워크 throughput/bandwidth
• 웹 서버/WAS CPU/RAM 증설
• 웹 서버 프록시 서버
• 웹 서버 컨텐츠 캐싱
• CDN(Content Delivery Network)
• 오브젝트 스토리지
• 데이터베이스 정규화
• 데이터베이스 캐싱
• 로드 밸런스
• 웹 애플리케이션 로직
• …

6. 프론트엔드(Frontend) 최적화
실제 사용자 환경
(네트워크, 디바이스, 브라우저, …)에 알맞은 최적화

7. 프론트엔드(Frontend) 최적화
• 스크립트 병합 (script combination)
• 스크립트 최소화 (script minification)
• 스크립트 압축 전달 (gzip Encoding)
• 이미지 형식 최적화 (WebP)
• 이미지 손실 압축 (compression)
• 브라우저 캐시 사용 (cache-control 헤더)
• DNS 조회 최소화 <-> Domain Sharding
• DNS 정보 미리 읽어오기 (DNS prefetching)
• CSS/JS 위치 조절 (Top/Bottom)
• 페이지 미리 읽어오기 (page prefetching)
• 서드 파티(3rd party) 스크립트 조정
• …

8. 프로토콜 최적화
HTTP
“좀 더 web을 빠르게 요청하고,
빠르게 응답할 수 있는 프로토콜”
Client Server

9. HTTP,
역사(歷史)를 살펴보자.

10. HTTP의 발전
1991 1995 1997 2012 2013 2015 2019
HTTP0.9
HTTP1.0
HTTP1.1
SPDY
HTTP/2
HTTP/3
QUIC
• TCP -> MPTCP -> UDP -> gQUIC -> QUIC
• HTTP1.1 -> SPDY -> HTTP/2 -> HTTP Over QUIC -> HTTP/3

11. ~/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 돌아보기

12. 멀티플렉싱(Multiplexing)
파이프라이닝(pipelining)
HTTP1.1
멀티플렉싱
HTTP/2
HTTP1.0

13. Static Table
1 :authority
2 :method GET
3 :path /
4 :scheme https
… … …
62 user-agent Mozilla/5.0 (Macintosh; Intel
Mac..
… … …
Dynamic Table
• 정적 테이블 / 동적 테이블을 사용한 헤더의 인덱싱
• 인덱싱이 완료된 헤더는 Huffman 알고리즘으로 압축
• Encoder/Decoder를 사용한 헤더의 해석
Client Server
헤더 인덱싱과 압축

14. 서버 푸시(Server Push)
• 클라이언트가 요청하지 않은 콘텐트를 서버가 알아서 내려주기
• 클라이언트 ­ 서버 간, RTT(Round Trip Time) 절약

15. * CRP(Critical Rendering Path)
From:
https://developers.google.com/web/fundamentals/performance
/critical-rendering-path/analyzing-crp
서버 푸시(Server Push)

16. HTTP1.1
HTTP/2
서버 푸시(X)
HTTP/2 +
서버 푸시(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
서버 푸시(Server Push)
푸시된
콘텐트
HTTP/2
멀티플렉싱,
헤더 압축,
…
반복적인
요청과 응답

17. HTTP/2 효과

18. 그런데,
왜 HTTP/3?
그것도 HTTP/2 이후,
4년 만에??

19. HTTP/3 등장 배경
HTTP/2는
HTTP의 HOLB(Head Of Line Blocking)은 해결하였으나,
TCP의 HOLB 문제는 여전히 남아있었다.

20. HTTP/3 등장 배경
HTTP/2
QUIC

21. QUIC
(Quick UDP Internet Connections)

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

23. HTTP/3 프로토콜 스택
HTTP/2
TLS 1.2+
TCP
HTTP/3
UDP
IP
TLS 1.3
QUIC
-> 보안과 성능 개선

24. HTTP/3 신뢰성
HTTP/3
QUIC
UDP
UDP를,
믿을 수 있나?

25. HTTP/3 신뢰성
QUIC
신뢰성 레이어 추가
• 패킷 재전송
• 혼잡 제어
• 손실 회복
• 기타 TCP 기능..
Reliability Layer

26. Static Table
1 :authority
2 :method GET
3 :path /
4 :scheme https
… … …
62 user-agent Mozilla/5.0 (Macintosh; Intel
Mac..
… … …
Dynamic Table
• 정적 테이블에는 RFC에 정의된 헤더 리스트
• 동적 테이블은 양쪽 End Point에 의해 실시간으로 업데이트
• 동적 테이블의 인덱스 번호는 FIFO 방식으로 할당
Client Server
HTTP/3 - QPACK

27. Client Server
Step 1) date:Wed, 23 Oct 2019 20:13:21 GMT
34 characters, 34 bytes
서버가 응답하는 date: 응답 헤더
Step 2) ..date:.…zd..2...0....z.sd......
Huffman encoded, 34 bytes -> 29 bytes
HTTP/3 - QPACK

28. Client Server
두 번째 동일한 응답은 테이블 사용,
“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

29. Decoder
Ecoder
Static
Table
Dynamic
TableEncoder Decoder
Decoder
Ecoder
Static
Table
Dynamic
Table DecoderEncoder
클라이언트서버
• 인코더를 사용하여 동적 테이블 업데이트, 헤더 압축
• 디코더는 정적 테이블, 동적 테이블을 사용하여 헤더를 압축 해제
HTTP/3 - QPACK

30. HTTP/3
HTTP/3는 HTTP/2의
TCP HOLB 문제만 개선한 것이 아니다.
• HTTP/2의 기능 계승
+
• TLS1.3
• UDP의 빠른 성능
• QUIC의 효율성

31. HTTP/3
QUIC
HTTP/3
=
HTTP/2
+
TCP의 장점 + QUIC
+
TLS 1.3
Reliability Layer
HTTP/2
TLS 1.3

32. HTTP/3 구현체

33. HTTP/3 구현체

34. DEMO
- HTTP/3 with Chrome -

35. HTTP/3 - Chrome

36. HTTP/3 - Chrome

37. HTTP/3,
풀어야 할 숙제는?..

38. HTTP/3,
풀어야 할 숙제는?..
추가 정보
https://www.facebook.com/ittechtrip/

39. - 감사합니다. -