HTTP/2 프로토콜에 대한 설명과, 기존 HTTP1.1 프로토콜 사용할떄의 웹 성능 최적화 방법이 HTTP/2를 사용할때엔 어떻게 변경되어야 하는지에 대한 문서 입니다.

1. HTTP/2와 웹 성능 최적화 방안
강상진
sangjinn@gmail.com
https://brunch.co.kr/@sangjinkang

2. 강상진
소개
전) 삼성SDS

3. 솔루션 개발센터 선임 개발자
전) 한국마이크로소프트 소프트웨어 연구소 책임 연구원
현) Akamai

4. Korea

5. ­– Service

6. Line

7. Manager

8.
IT 도서 집필/번역
IT

9. 트렌드, 웹 프로그래밍, 모바일 앱 개발, 게임 개발 등
IT

10. 강연/강의/기고
미래창조과학부 SW

11. Maestro
KOBA,

12. KGC,

13. Icon,

14. MSDN,

15. 마이크로소프트웨어,
G*Star,

16. Unite

17. Seoul,

18. 방송과 기술 등
기술 블로깅
https://brunch.co.kr/@sangjinkang

19. • 스크립트
병합
(script
combination)
• 스크립트
최소화
(script
minification)
• 스크립트
압축
전달
(gzip
encoding)
• 이미지
비손실
최적화
• 이미지
손실
압축
(compression)
• 브라우져
캐시
사용
(cache-­‐control
헤더)
• DNS
조회
최소화
• CSS/JS의
위치
조절
• 페이지
미리
읽어오기
(page
prefetching)
• DNS
정보
미리
읽어오기
(DNS
prefetching)
Front

20. End

21. 최적화를

22. 위한

23. 대표적인

24. 방법

26. (in

27. HTTP1.1

29. World)
HTTP/2
프로토콜에서는
방법의
전환
필요!

30. “9%의 파이어폭스 사용자는 HTTP/2를 사용 중..
이는 SPDY 사용자보다 더 많이 HTTP/2를 사용하는 것임…⋯”
크롬 사용자 중에…⋯.
HTTP/1.x을 사용하는 27%의 사용자는..
SPDY/3.1

31. 버전을 사용하는 28%의 사용자는..
HTTP/2를 사용하는 45%의 사용자는…⋯
TLS

32. +

33. NPN/ALPN 프로토콜을 사용 중..
HTTP/2의 현재

34. http://caniuse.com/#search=HTTP%2F2
HTTP/2의 현재

35. 이미 HTTP/2는
우리 주변에 벌써 ...

36. HTTP/2가 뭐니?
RFC 7540 이야기는 하지말고…⋯

37. *

38. 1996년 발표된 HTTP1.1의 19년 만의 후속 버전
- HTTP1.1의 단점 보완 및 장점 추가 (당연한 얘기..)
*

39. 보완된 단점
- HOL(Head

40. Of

41. Line Blocking)문제를Multiplexing으로해결
- HTTP

42. BODY뿐만 아니라 HEADER도 압축 (Huffman

43. Coding)
- 중복되는 헤더값들을 자연스레 제거 (Indexing

44. Table 사용)
*

45. 추가된 장점
- 한번 Connection을맺으면 최대한 오래, 길게 사용
- 필요한 리소스를 먼저 달라고 서버에 우선 순위 요청 가능
- 필요한 크기 만큼 먼저 달라고 WINDOW_SIZE 요청
- 중요한 리소스를 미리 가져가라고 클라이언트에 요청 가능
Frame이라는 Encoding된Binary

46. format을 사용한다.
HTTP/2 한눈에 보기

47. 이 모든것이
어떻게 가능?

48. *

49. HTTP1.X

50. 프로토콜의 HTTP

51. 요청과 응답 메커니즘
HTTP/2 ­– 멀티플렉싱(Multiplexing) 이란?
Client Server
Time
TCP

52. Handshake

53. 완성 이후,
확보된 연결을 통해 지속적인 HTTP

54. 요청 및 응답
장점:
비싼 연결 비용을 하나로 줄임
단점:
한번에 하나의 요청/응답만 가능(최대 6개),
응답 중간에 딜레이때문에 후속 응답은 느려짐
(Head

55. Of

56. Line

57. Blocking

58. 이슈)

59. *

60. 멀티플렉싱이 적용된 HTTP/2의 요청과 응답
HTTP/2 ­– 멀티플렉싱(Multiplexing) 이란?
Client Server
Time
장점:
FIFO(Fist

61. In

62. First

63. Out)

64. 방식이 아닌,
클라이언트에서 우선 순위를 높게 요청했거나,
서버에서 준비된 리소스 먼저 응답이 가능
헤더또한 중복 제거 및 압축 가능 - 전체 바이트 줄임
유일한 단점:
헤더가 Binary 인코딩 되어, 육안으로 식별 어려움

65. 요청 순위와 관계없이
응답이 가능한 이유는
HTTP/2는 Stream을 사용하기 때문…⋯

66. 스트림? 그거.. 동영상이나,
네트워크 프로그래밍에 나오는
단어 아닌가요?

67. HTTP/2 ­– 스트림(Stream)
스트림의 사전전 의미: 끊임없이(seamless),

68.
순서와 상관없이 흘러 보내는 것

69. HTTP/2 ­– 스트림(Stream)
Stream

70. 1
DATA
Stream

71. 3
HEADERS
Stream

72. 3
DATA
Stream

73. 1
DATA
…⋯…⋯…⋯.
Stream

74. 5
DATA
• 스트림은 클라이언트-서버간 흘러다니는 헤더와 바디(DATA)등의 조합
• 하나의 TCP

75. 커넥션으로 다수의 스트림의 흐름을 지원함
• 스트림의 응답에는 정해진 순서가 없고 요청 우선 순위는 고려함
• 서버에서 먼저 준비된 스트림이 클라이언트로 전달됨
• 위 그림에서는 Stream

76. 1,2,5번이 동시에 떠다님 - 멀티플렉싱
• 각 스트림에는 Unique

77. ID와 함께 우선 순위도(Priority)가 책정 됨

78. 이왕 말 나온김에
HTTP/2 추가된 내용 좀…⋯

79. HTTP/2 ­– 프레임(frame)
• 프레임은 스트림의 기본 단위(unit)
• 프레임은 Text 방식이 아닌 Binary

80. 방식의 인코딩된 값임
• 하나의 스트림은 하나 혹은 다수개의 프레임으로 구성됨
Application

81. (HTTP/2)
Session

82. (TLS,

83. optional)
Transport

84. (TCP)
Network

85. (IP)
POST

86. /upload

87. HTTP/1.1
Host:

88. www.akamai.com
Content-Type:

89. application/json
Content-Length:

90. 15
{“msg”:”Hello

91. World!”}
HEADERS

92. frame
DATA

93. frame
Binary

94. Framing
HTTP/2
HTTP

95. 1.1

96. HTTP/2 ­– 헤더의 중복 제거 및 압축
:method GET
:scheme https
:host akamai.com
:path /index
accept Image/jpeg
User-agent Mozilla/5.0..
:method GET
:scheme https
:host akamai.com
:path /new
accept Image/jpeg
User-agent Mozilla/5.0..
클라이언트 첫 번째 요청 클라이언트 두번 째 요청
HEADERS

97. Frame

98. (Stream

99. 1) HEADERS

100. Frame

101. (Stream

102. 3)
:method:

103. GET
:scheme:

104. https
:host:

105. akamai.com
:path:

106. /index
:accept:

107. image/jpeg
User-agent:

108. Mozilla/5.0…⋯
:path:

109. /new
• 중복 요청된 헤더는 압축 대상에서 제외,
• 중복되지 않은 헤더는 Binary 인코딩 압축

110. HTTP/2 ­– 헤더의 중복 제거 및 압축
• 클라이언트 ­– 서버간 중복 헤더 검출은 Static/Dynamic

111. 테이블 사용
• 기본적인 헤더는 Static,

112. 클라이언트 고유 헤더는 Dynamic

113. 이동
• 중복된 헤더는 테이블 index값만 전달
• 나머지 중복되지 않은 헤더는 허프만 코딩 방식의 인코팅 적용
• 해당 압축 알고리즘은 HPACK

114. (RFC7541)에 정의
이미지 출처:
Velocity
2015

115. • Client는 어떤 응답이 제일 중요한지,
우선 순위를 알려주고,

116. 서버는 이에 응답할 수 있음
예)
이미지 처리를 위해 CSS를 이미지보다 먼저…⋯..
Time
Client Server
HTTP/2 ­– 응답 스트림 우선 순위화(Prioritization)

117. Stream

118. 4
Frame

119. 1
…⋯…⋯…⋯…⋯
Stream

120. 1
Frame

121. n
Stream

122. 4
promise
Stream

123. 2
promise
Stream

124. 1
Frame

125. 2
Stream

126. 1:

127. /index.html (Client

128. 요청)
Stream

129. 2:

130. /jsscript.js (push

131. promise)
Stream

132. 4:

133. /cssstyle.css (push

134. promise)
• 서버는 다음 요청이 오기전, 응답을 미리 줄 수 있음 (Push

135. Promise)
• 클라이언트는 PUSH_PROMISE를 승락 혹은 거절할 수 있음
• 브라우져 캐시된 콘텐트는 당연 클라이언트가 거절해야 함~
HTTP/2 ­– 서버 푸시(Server

136. Push)

137. 본론으로 돌아와서..
그래서 어떻게 HTTP/2를 통해
웹 성능 향상을 할 수 있나요?

138. 사실 ..

139. HTTP/2 사용만으로
웹 응답 속도는 HTTP1.1에
비해15~50% 상승!

140. 다만, HTTP1.1

142. 기준으로
프론트엔드 최적화 해둔
코딩 방식엔 변화가 필요!

143. • HTML안에 JS/CSS를 직접 넣어, HTTP

144. 요청수를 줄이는 기법
장점: HTTP

145. 요청 수를 줄여, 전반적인 페이지 로딩 속도를 빠르게..
단점: HTML

146. 들어간 JS/CSS는 브라우져 캐시 및 업데이트가 곤란
• HTTP/2에서의 인라인 스크립트 대응 방안
Server

147. Push를 사용하여, 별도 요청없이도 JS/CSS/Image

148. 등을 내려주기..
HTTP/2 ­– 인라인 스크립트

149. • 다양한 아이콘, 배너, 버튼 등을 한 개의 이미지에 넣어두고,
CSS의 background-position

150. 속성을 사용하여 원하는 이미지만 사용
장점: HTTP

151. 요청 수를 줄여, 전반적인 페이지 로딩 속도를 빠르게..
단점: 이미지 브라우져 캐시 곤란, 특정 이미지만 변경되도 전체 업데이트
• HTTP/2에서의 이미지 스프라이트 대응 방안
Server

152. Push를 사용하여, 별도 요청없이도 Image

153. 파일을 내려주기..
HTTP/2 ­– 이미지 스프라이트

154. HTTP/2 ­– 스크립트 병합
js1.js
• 여러개의 text성 스크립트를 하나의 파일에 합쳐, HTTP 요청 수 줄이기
장점: HTTP

155. 요청 수를 줄여, 전반적인 페이지 로딩 속도를 빠르게..
단점: 각각의 js 파일별로 변경이 생겨도 캐시된 merged.js를 업데이트 함
• HTTP/2에서의 스크립트 병합 대응 방안
Server

156. Push를 사용하여, 별도 요청없이도 JS/CSS/..등을 내려주기..
js2.js
js3.js
merged.js

157. HTTP/2 ­– 도메인 분할 호출(Domain

158. Sharding)
• 도메인 1개당, 동시 연결 6개의 제한 극복을 위해 여러개의 도메인 사용
장점: 클라이언트 입장에서 가능한 최대 병렬 연결 개수 활용
단점: 각각의 도메인 DNS 조회 시간 및 관리의 복잡
• HTTP/2에서의 도메인 분할 호출 대응 방안
- Multiplexing을 통해 동시 연결 개수 제한을 이미 극복
- HTTP/2의 각종 기능을 사용하기 위해서, Single

159. Domain을 추천

160. 전반적으로, HTTP 요청을 최소화한
코딩 방식을 수정하여,
HTTP/2의 고유기능인 멀티플렉싱,
서버 푸시, 응답 우선 순위화를
충실하게 사용해야 함!

161. 아래 웹 성능 최적화 옵션은 언제나 중요!
• DNS 조회 회수는 항상 최소화!
• TCP 연결 재활용 하기(Keep-Alive,

162. Multiplexing)
• CDN등의 Reverse

163. Proxy

164. 캐시 기능 사용하기
• 페이지 재전송(301/302

165. 응답)을 최소화 하기! (RTT

166. 최소화)
• 불필요한 Byte

167. 전송 없애기! (필요없는 Cookie

168. 생성 지양)
• Text 성 스크립트는 Content-Encoding:

169. gzip 등으로 압축하기
• 브라우져 캐시 충실하게 활용하기
• 이미지 파일은 손실 압축 등으로 byte

170. 최소화 하기
• 모바일과 같이 작은 스크린에서 큰 이미지를 줄여 보여주지 않기
• 반응형 웹사이트에서는불필요한 이미지는 아에 다운로드 않하기

171. 다시 한번 HTTP/2
새로운 기능을 요약해주세요.
• 멀티플렉싱
복수개의 요청이 하나의 TCP connection으로 가능하도록,Stream
방식의 데이터 전달을 통해 구현한 것 입니다. 응답은 순서에 상관없이
stream으로 받으며, 기존의 Connection
Keep-­‐Alive,
Pipelining이
개선된 부분 입니다.
• 중복 헤더 제거 및 헤더 압축
중복된 헤거를 제거하고, 나머지 헤더를 Huffman
coding방식으로
압축하여 전반적인 헤더 크기를 줄입니다
HTTP/2 ­– FAQs

172. 다시 한번 HTTP/2
새로운 기능을 요약해주세요.
• 스트림 우선 순위
각 스트림 별로 고유하게 가진 우선 순위 값을 통해, 서버가 어떤 요청
스트림의 응답 스트림을 먼저 만들어 줄지를 결정 합니다.
• 서버 푸시
클라이언트가 요청하지 않은 리소스를 미리 필요하다고 판단하여, 첫
요청에 연속적으로 미리 요청없이도 응답 스트림으로 보내주는 방식
입니다. 클라이언트는 이를 수락할 수도 거절할 수 도 있습니다.
HTTP/2 ­– FAQs

173. HTTP/2 ­– FAQs
• 왜 HTTP2.0이 아니라, HTTP/2인가요?
HTTP/2가 사용하는 binary

174. frame

175. 포맷은 기존 HTTP1.X 버전에는 없는
획기적인 개선안이기에 HTTP/2가 되었고, IETF는 HTTP2.X

176. 서브
버전이 없을 것이라고 공식적으로 발표 하였습니다.
• HTTP/2가 사용되면 SPDY는 어떻게 되는건가요?
SPDY를 기반으로 많은 요소들이 이미 HTTP/2에 적용되어 중복으로
필요 없습니다. 실제로 구글은 2016년 2월, Chrome 브라우져에
내장된 SPDY 기능을 제거할 예정 입니다.

177. • HTTP/2를 지원하는 브라우져, 서버 군은 무엇인가요?
아래와 같으며, HTTP/2 지원을 위해서는 클라이언트와 서버 모두 해당
프로토콜을 지원해야 하며, 만약 한쪽이라도 지원하지 않는다면, 기존과
동일하게 HTTP1.1로 사용하도록 두 개의 프로토콜을 당분간 지원해야
합니다.
HTTP/2 ­– FAQs

178. 감사 합니다.