HTTP/2와 웹 성능 최적화 방안

HTTP/2와웹성능최적화방안

강상진[email protected]

https://brunch.co.kr/@sangjinkang

강상진

소개

전) 삼성SDS�� 솔루션개발센터선임개발자전) 한국마이크로소프트소프트웨어연구소책임연구원현) Akamai�� Korea�� – Service�� Line�� Manager��

IT 도서 집필/번역IT�� 트렌드, 웹 프로그래밍,모바일앱개발, 게임 개발등

IT�� 강연/강의/기고미래창조과학부SW�� MaestroKOBA,�� KGC,�� Icon,�� MSDN,�� 마이크로소프트웨어,G*Star,�� Unite�� Seoul,�� 방송과기술등

기술블로깅https://brunch.co.kr/@sangjinkang

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

Front�� End�� 최적화를�� 위한�� 대표적인�� 방법�� (in�� HTTP1.1�� World)

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

“9%의파이어폭스사용자는HTTP/2를 사용중..이는 SPDY 사용자보다더 많이HTTP/2를 사용하는것임…⋯”

크롬 사용자중에…⋯.HTTP/1.x을사용하는 27%의 사용자는..SPDY/3.1�� 버전을사용하는 28%의 사용자는..HTTP/2를사용하는 45%의 사용자는…⋯TLS�� +�� NPN/ALPN 프로토콜을사용중..

HTTP/2의 현재

http://caniuse.com/#search=HTTP%2F2

HTTP/2의 현재

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

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

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

*�� 보완된단점- HOL(Head�� Of�� Line Blocking)문제를Multiplexing으로해결- HTTP�� BODY뿐만아니라HEADER도 압축 (Huffman�� Coding)- 중복되는헤더값들을자연스레제거 (Indexing�� Table 사용)

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

HTTP/2 한눈에 보기

이 모든것이어떻게 가능?

*�� HTTP1.X�� 프로토콜의HTTP�� 요청과응답메커니즘

HTTP/2 – 멀티플렉싱(Multiplexing) 이란?

Client Server

Tim

e

TCP�� Handshake�� 완성 이후,확보된연결을통해지속적인 HTTP�� 요청및 응답

장점:비싼연결 비용을하나로줄임

단점:한번에하나의요청/응답만가능(최대6개),응답중간에딜레이때문에후속 응답은느려짐(Head�� Of�� Line�� Blocking�� 이슈)

*�� 멀티플렉싱이적용된HTTP/2의 요청과응답

HTTP/2 – 멀티플렉싱(Multiplexing) 이란?

Client Server

Tim

e

장점:FIFO(Fist�� In�� First�� Out)�� 방식이아닌,클라이언트에서우선순위를높게요청했거나,서버에서준비된리소스먼저응답이가능

헤더또한중복제거및 압축 가능 -> 전체바이트줄임

유일한단점:헤더가 Binary 인코딩되어, 육안으로식별 어려움

요청 순위와관계없이응답이가능한이유는

HTTP/2는 Stream을사용하기때문…⋯

스트림? 그거.. 동영상이나,네트워크 프로그래밍에 나오는

단어 아닌가요?

HTTP/2 – 스트림(Stream)

스트림의사전전의미: 끊임없이(seamless),�� 순서와상관없이흘러보내는것

HTTP/2 – 스트림(Stream)

Stream�� 1DATA

Stream�� 3HEADERS

Stream�� 3DATA

Stream�� 1DATA

…⋯…⋯…⋯.

Stream�� 5DATA

• 스트림은클라이언트-서버간흘러다니는헤더와바디(DATA)등의조합• 하나의 TCP�� 커넥션으로다수의스트림의흐름을지원함• 스트림의응답에는정해진순서가없고 요청우선순위는고려함• 서버에서먼저준비된스트림이클라이언트로전달됨• 위 그림에서는Stream�� 1,2,5번이 동시에떠다님 -> 멀티플렉싱• 각 스트림에는Unique�� ID와 함께우선 순위도(Priority)가 책정 됨

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

HTTP/2 – 프레임(frame)

• 프레임은스트림의기본단위(unit)• 프레임은 Text 방식이아닌 Binary�� 방식의인코딩된값임• 하나의스트림은하나혹은다수개의프레임으로구성됨

Application�� (HTTP/2)

Session�� (TLS,�� optional)

Transport�� (TCP)

Network�� (IP)

POST�� /upload�� HTTP/1.1Host:�� www.akamai.comContent-Type:�� application/jsonContent-Length:�� 15

{“msg”:”Hello�� World!”}

HEADERS�� frame

DATA�� frame

Binary�� Framing

HTTP/2

HTTP�� 1.1

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�� Frame�� (Stream�� 1) HEADERS�� Frame�� (Stream�� 3)

:method:�� GET:scheme:�� https:host:�� akamai.com:path:�� /index:accept:�� image/jpegUser-agent:�� Mozilla/5.0…⋯

:path:�� /new

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

HTTP/2 – 헤더의 중복 제거 및 압축

• 클라이언트– 서버간중복헤더검출은 Static/Dynamic�� 테이블사용• 기본적인헤더는 Static,�� 클라이언트고유헤더는Dynamic�� 이동• 중복된헤더는테이블 index값만전달• 나머지중복되지않은헤더는허프만코딩방식의인코팅적용• 해당압축알고리즘은HPACK�� (RFC7541)에정의

이미지출처: Velocity 2015

• Client는 어떤 응답이제일 중요한지,

우선 순위를알려주고,�� 서버는 이에응답할 수 있음

예)이미지 처리를위해 CSS를 이미지보다먼저…⋯..

Time

Client Server

HTTP/2 – 응답 스트림 우선 순위화(Prioritization)

Stream�� 4Frame�� 1

…⋯…⋯…⋯…⋯Stream�� 1Frame�� n

Stream�� 4promise

Stream�� 2promise

Stream�� 1Frame�� 2

Stream�� 1:�� /index.html (Client�� 요청)Stream�� 2:�� /jsscript.js (push�� promise)Stream�� 4:�� /cssstyle.css (push�� promise)

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

• 클라이언트는PUSH_PROMISE를 승락혹은거절할수 있음

• 브라우져캐시된콘텐트는당연 클라이언트가거절해야함~

HTTP/2 – 서버 푸시(Server�� Push)

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

사실 ..�� HTTP/2 사용만으로웹 응답속도는 HTTP1.1에

비해15~50% 상승!

다만, HTTP1.1�� 기준으로프론트엔드최적화 해둔코딩 방식엔변화가필요!

• HTML안에 JS/CSS를 직접 넣어, HTTP�� 요청수를줄이는기법

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

단점: HTML�� 들어간 JS/CSS는 브라우져캐시및 업데이트가곤란

• HTTP/2에서의인라인스크립트대응방안

Server�� Push를 사용하여, 별도요청없이도 JS/CSS/Image�� 등을 내려주기..

HTTP/2 – 인라인 스크립트

• 다양한아이콘, 배너, 버튼등을한 개의 이미지에넣어두고,

CSS의 background-position�� 속성을사용하여원하는이미지만사용


단점: 이미지브라우져캐시곤란, 특정이미지만변경되도전체업데이트

• HTTP/2에서의이미지스프라이트대응방안

Server�� Push를 사용하여, 별도요청없이도 Image�� 파일을내려주기..

HTTP/2 – 이미지 스프라이트

HTTP/2 – 스크립트 병합

js1.js

• 여러개의 text성 스크립트를하나의파일에합쳐, HTTP 요청수 줄이기


단점: 각각의 js 파일별로변경이생겨도캐시된merged.js를 업데이트함

• HTTP/2에서의스크립트병합대응 방안

Server�� Push를 사용하여, 별도요청없이도 JS/CSS/..등을내려주기..

js2.js

js3.js

merged.js

HTTP/2 – 도메인 분할 호출(Domain�� Sharding)

• 도메인 1개당, 동시 연결 6개의 제한극복을위해 여러개의도메인사용

장점: 클라이언트입장에서가능한최대병렬 연결개수활용

단점: 각각의도메인DNS 조회 시간및 관리의복잡

• HTTP/2에서의도메인분할 호출대응 방안

- Multiplexing을 통해 동시연결 개수제한을이미극복

- HTTP/2의 각종 기능을사용하기위해서, Single�� Domain을 추천

전반적으로, HTTP 요청을최소화한코딩 방식을수정하여,

HTTP/2의 고유기능인멀티플렉싱,서버 푸시, 응답 우선순위화를

충실하게사용해야함!

아래 웹 성능 최적화 옵션은언제나 중요!

• DNS 조회회수는항상최소화!• TCP 연결재활용하기(Keep-Alive,�� Multiplexing)• CDN등의 Reverse�� Proxy�� 캐시기능사용하기• 페이지재전송(301/302�� 응답)을 최소화하기! (RTT�� 최소화)• 불필요한Byte�� 전송없애기! (필요없는Cookie�� 생성지양)• Text 성 스크립트는Content-Encoding:�� gzip 등으로압축하기• 브라우져캐시충실하게활용하기• 이미지파일은손실압축등으로 byte�� 최소화하기• 모바일과같이작은스크린에서큰이미지를줄여보여주지않기• 반응형웹사이트에서는불필요한이미지는아에다운로드않하기

다시한번 HTTP/2 새로운기능을요약해주세요.

• 멀티플렉싱

복수개의요청이하나의 TCP connection으로가능하도록, Stream방식의데이터전달을통해구현한것입니다.응답은순서에상관없이stream으로받으며,기존의 Connection Keep-‐Alive, Pipelining이개선된부분입니다.

• 중복헤더제거및헤더압축

중복된헤거를제거하고,나머지헤더를 Huffman coding방식으로

압축하여전반적인헤더크기를줄입니다

HTTP/2 – FAQs

다시한번 HTTP/2 새로운기능을요약해주세요.

• 스트림우선순위

각스트림별로고유하게가진우선순위값을통해,서버가어떤요청스트림의응답스트림을먼저만들어줄지를결정합니다.

• 서버푸시

클라이언트가요청하지않은리소스를미리필요하다고판단하여,첫요청에연속적으로미리요청없이도응답스트림으로보내주는방식입니다.클라이언트는이를수락할수도거절할수도있습니다.

HTTP/2 – FAQs

HTTP/2 – FAQs

• 왜 HTTP2.0이 아니라,HTTP/2인가요?

HTTP/2가 사용하는 binary�� frame�� 포맷은기존 HTTP1.X 버전에는없는획기적인개선안이기에HTTP/2가 되었고, IETF는 HTTP2.X�� 서브버전이없을것이라고공식적으로발표 하였습니다.

• HTTP/2가 사용되면 SPDY는어떻게되는건가요?

SPDY를기반으로많은요소들이이미HTTP/2에 적용되어중복으로

필요없습니다. 실제로구글은 2016년 2월, Chrome 브라우져에내장된 SPDY 기능을제거할예정입니다.

• HTTP/2를 지원하는브라우져,서버군은 무엇인가요?

아래와같으며, HTTP/2 지원을위해서는클라이언트와서버모두해당프로토콜을지원해야하며, 만약한쪽이라도지원하지않는다면, 기존과동일하게HTTP1.1로 사용하도록두 개의프로토콜을당분간지원해야합니다.

HTTP/2 – FAQs

감사 합니다.

Internet

HTTP/2와 웹 성능 최적화 방안