전지적 개발자 시점

지금까지 HTTP/2.0에대한 공부를하면서 이론적으로는 HTTP/1.1보다 더 빠르다는것을 배웠는데

실제 테스트에서도 같은 결과가 나오는지 궁금해서 실제로 1.1 버전과 2.0버전을 지원하는 사이트를 대상으로 테스트를 해봤다.

웹사이트의 성능을 측정을 도와주는 사이트는 대략적으로 이렇다.

1. https://tools.pingdom.com/

2. https://www.webpagetest.org/

3. https://developers.google.com/speed/pagespeed/insights/

4. https://gtmetrix.com/

그리고 HTTP/1.1과 HTTP/2.0을 지원해주는 사이트를 찾아야한다. (HTTP/2.0을 지원하는 사이트는 HTTP/1.1을 거치고 2.0으로 넘어가기 때문에 HTTP/1.1을 지원한다)

일단 잘 알고있는 nghttp2.org사이트가 두 버전 모두를 지원한다.

http://nghttp2.org로 접속하면 HTTP/1.1이고

https://nghttp2.org로 접속하면 HTTP/2.0이다. (클라이언트에서 https로 접속하고 다음에 http로 접속하면 cache때문인지 https로 접속이 된다.)

HTTP/1.1

다음은 핑덤 + http://nghttp2.org의 결과이다.

HTTP/2.0

그리고 핑덤 + https://nghttp2.org의 결과이다.

사이트 크기가 작아서 그런지 큰 차이는 없다.

(사실 이 포스팅을 하는 이유가 어제까지만해도 HTTP/2.0이 로딩속도가 2.3초정도로...1.1버전보다 느렸다. 이상하게 지금 해보니까 비슷하네;;)

조금 더 큰 규모의 사이트를 찾아보면 (보통 쇼핑몰 사이트가 사진이 많아서 규모가 크다)

다음은 알렉사 TOP500에서 찾은 사이트다.

1. http://www.aliexpress.com/

2. https://www.aliexpress.com/

그리고 다음은 핑덤 + 위 사이트이다.

HTTP/1.1

HTTP/2.0

HTTP/2.0이 속도면에서 많이 빠르다. 사이즈는 더 커졌다...? 리퀘스트도 조금 다르다...

테스트 지역을 달라스로 변경하고 다시 테스트 해보면

HTTP/1.1

HTTP/2.0

리퀘스트도 조금 다르고 사이즈는 아까와 다르게 작아졌다.

속도면에서 "HTTP/2.0이 HTTP/1.1보다 더 빠르다" 정도만 신뢰하면 될것같다.

현재 보고있는 웹사이트가 http2(혹은 SPDY)를 지원하는지를 확인하고 싶으면

chrome 웹스토어에서 HTTP/2 and SPDY indicator를 통해서 확인하는게 가장 쉽다. (firefox에도 있는것같다)

해당 앱을 설치하면 우측 상단에 번개모양의 심볼이 생기는데

해당 심볼이 파란색이면 HTTP2를,

빨간색이면 SPDY를 지원한다.

둘 다 지원하지 않으면 아무색도 들어오지않는다.

"#1. HTTP/1.1에서 HTTP/2.0 (https인 경우)"글에서 와이어샤크로 캡처한 화면은 없었다.

http를 사용하는 사이트에서는 와이어샤크로 캡처하면 http2 스위칭하는 부분이 별도의 처리 없이 보였었는데

https를 사용하는 사이트를 와이어샤크로 캡처해보니 http2라고 안나오고 TLS라고만 나왔다. (하지만 실제로 통신은 HTTP/2.0으로 통신했다)

와이어샤크로 https://nghttp2.org를 캡처한 화면

(빨간박스 안에 http2는 보이지 않는다)

크롬에서는 HTTP/2.0로 통신한다고 나온다

해결방법은 암호화한(SSL or TLS) 패킷을 복호화해서 보여주면 된다.

와이어샤크가 패킷을 읽고 "이건 HTTP/2.0네?"라고 인지하고 http2표현하는것 같은데

암호화가 되어있어서 와이어샤크는 이 패킷을 읽을 수 없어서 암호화 형태를보고 (혹은 다룬부분을 보고...) SSL or TLS라고 표현하는것같다.

실제로 복호화하는 절차를 거친 후 패킷을 캡처해보니 http2라고 나오는걸 확인할 수 있다.

(복호화 하는 절차 : http://http2.tistory.com/6)

'http' URL을 가진 HTTP/1.1에서는 HTTP/2.0으로 통신하기 위해서 HTTP/1.1 101 Switching Protocols을 거치는 과정이 있었다.

하지만 'https' URL을 가진 웹사이트는 101 스위칭 프로토콜을 거치는 과정이 필요없다.

CMD창에서 curl 명령어를 통해서 101 스위칭 프로토콜을 받지 않고 바로 HTTP/2.0으로 받는걸 볼 수 있다.

또한 http로 접속한건 101 스위칭 프로토콜을 받은걸 볼 수 있다.

그리고 크롬 개발자 도구를 통해서도 현재 사용중인 프로토콜을 확인 할 수 있다.

다음글 보기: http://http2.tistory.com/5

HTTP/2.0을 지원하는 웹페이지는 HTTP/1.1를 동시에 지원한다.

해당 사이트가 HTTP/2.0을 지원하는지 모르기 때문에 맨 처음 connection이 이루어지면 1.1버전으로 통신을 하고

HEAD를 보낼때 "너 HTTP/2.0버전을 지원하니?"라고 물어본다. (빨간 박스 부분이 물어보는 부분이다)

아래 표는 'http' URL을 사용하는 사이트의 경우 HTTP/2.0을 시작하기 위한 예시를 나타낸다(RFC 7540참고)

아래 스크린샷은 curl 명령어를 통해서 nghttp2.org라는 사이트와 통신하는것을 캡처한것이다.

(106.186.112.116은 nghttp2.org사이트의 ip주소이다)

만약 서버가 HTTP/2.0을 지원하지 않으면 이 요청(빨간색박스)을 무시하고 기존 1.1버전의 사이트를 200 OK로 내려준다.

하지만 이 경우는 서버가 HTTP/2.0을 지원하므로 HTTP/1.1 101 Switching Protocols 이라는 답장을 했다. (초록색 박스)

(여기서 HTTP/1.1 101 Switching Protocols은 "지금 HTTP/1.1을 쓰고있는데 HTTP/2.0으로 바꾸자"라고 답을해준거라 생각해도 된다.)

그 후 프로토콜은 HTTP/2.0으로 상승해서 통신하는 부분을 볼 수 있다. (주황색 박스)

*다음과 같이 CMD에서 curl명령어를 통해 101 스위칭 프로토콜이 도착하고, HTTP/2.0으로 변경된걸 확인 할 수 있다.