Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

HTTP/3 시대의 웹 성능 최적화 기술 이해하기

4 177 vues

Publié le

웹 사이트의 빠른 로딩을 위한 프론트 엔드 최적화 기법과 더불어 알아두어야 할 HTTP 프로토콜 최적화를 언급하며, 최근 발표된 HTTP/3를 소개합니다.

HTTP/3는 "Hyper Text Transfer Protocol over QUIC"의 내용을 근간으로 UDP의 장점을 HTTP에 활용한 버전입니다.

HTTP/3를 알기 위해서는 QUIC에 대한 이해와 함께, 기존 버전인 HTTP/2에서 어떤 부분이 개선되었는지에 대한 이해가 동시에 필요합니다.

Chrome을 활용한 웹 성능 비교 예제들은 HTTP/3의 기술들을 빠르게 이해하는 데 도움이 될 것입니다.

Publié dans : Technologie
  • Soyez le premier à commenter

HTTP/3 시대의 웹 성능 최적화 기술 이해하기

  1. 1. 강상진(sangjinn@gmail.com) GDG Korea WebTech 2019.11.23 HTTP/3 시대의 웹 최적화 기술 이해하기 HTTP/3 Faster and Securer
  2. 2. 최적화 최적화(Optimization) 최고의 성능(Performance)을 만들 수 있는 최적의 조건(Condition)을 갖추는 것.
  3. 3. 웹 최적화 웹 사이트의 로딩 속도를 최대한 빠르게 만드는 기술 • 백엔드 최적화 • 프론트엔드 최적화 • 프로토콜 최적화 (오늘의 주제..)
  4. 4. 백엔드/프론트엔드 최적화 백엔드 프론트엔드 -> 렌더링 시작 | 렌더링 완료
  5. 5. 백엔드(Backend) 최적화 • DNS RTT 가속 • DNS 캐싱 • 네트워크 throughput/bandwidth • 웹 서버/WAS CPU/RAM 증설 • 웹 서버 프록시 서버 • 웹 서버 컨텐츠 캐싱 • CDN(Content Delivery Network) • 오브젝트 스토리지 • 데이터베이스 정규화 • 데이터베이스 캐싱 • 로드 밸런스 • 웹 애플리케이션 로직 • …
  6. 6. 프론트엔드(Frontend) 최적화 실제 사용자 환경 (네트워크, 디바이스, 브라우저, …)에 알맞은 최적화
  7. 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. 8. 프로토콜 최적화 HTTP “좀 더 web을 빠르게 요청하고, 빠르게 응답할 수 있는 프로토콜” Client Server
  9. 9. HTTP, 역사(歷史)를 살펴보자.
  10. 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. 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. 12. 멀티플렉싱(Multiplexing) 파이프라이닝(pipelining) HTTP1.1 멀티플렉싱 HTTP/2 HTTP1.0
  13. 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. 14. 서버 푸시(Server Push) • 클라이언트가 요청하지 않은 콘텐트를 서버가 알아서 내려주기 • 클라이언트 ­ 서버 간, RTT(Round Trip Time) 절약
  15. 15. * CRP(Critical Rendering Path) From: https://developers.google.com/web/fundamentals/performance /critical-rendering-path/analyzing-crp 서버 푸시(Server Push)
  16. 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. 17. HTTP/2 효과
  18. 18. 그런데, 왜 HTTP/3? 그것도 HTTP/2 이후, 4년 만에??
  19. 19. HTTP/3 등장 배경 HTTP/2는 HTTP의 HOLB(Head Of Line Blocking)은 해결하였으나, TCP의 HOLB 문제는 여전히 남아있었다.
  20. 20. HTTP/3 등장 배경 HTTP/2 QUIC
  21. 21. QUIC (Quick UDP Internet Connections)
  22. 22. QUIC From: https://blog.chromium.org/2015/04/a-quic-update-on-googles-experimental.html
  23. 23. HTTP/3 프로토콜 스택 HTTP/2 TLS 1.2+ TCP HTTP/3 UDP IP TLS 1.3 QUIC -> 보안과 성능 개선
  24. 24. HTTP/3 신뢰성 HTTP/3 QUIC UDP UDP를, 믿을 수 있나?
  25. 25. HTTP/3 신뢰성 QUIC 신뢰성 레이어 추가 • 패킷 재전송 • 혼잡 제어 • 손실 회복 • 기타 TCP 기능.. Reliability Layer
  26. 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. 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. 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. 29. Decoder Ecoder Static Table Dynamic TableEncoder Decoder Decoder Ecoder Static Table Dynamic Table DecoderEncoder 클라이언트서버 • 인코더를 사용하여 동적 테이블 업데이트, 헤더 압축 • 디코더는 정적 테이블, 동적 테이블을 사용하여 헤더를 압축 해제 HTTP/3 - QPACK
  30. 30. HTTP/3 HTTP/3는 HTTP/2의 TCP HOLB 문제만 개선한 것이 아니다. • HTTP/2의 기능 계승 + • TLS1.3 • UDP의 빠른 성능 • QUIC의 효율성
  31. 31. HTTP/3 QUIC HTTP/3 = HTTP/2 + TCP의 장점 + QUIC + TLS 1.3 Reliability Layer HTTP/2 TLS 1.3
  32. 32. HTTP/3 구현체
  33. 33. HTTP/3 구현체
  34. 34. DEMO - HTTP/3 with Chrome -
  35. 35. HTTP/3 - Chrome
  36. 36. HTTP/3 - Chrome
  37. 37. HTTP/3, 풀어야 할 숙제는?..
  38. 38. HTTP/3, 풀어야 할 숙제는?.. 추가 정보 https://www.facebook.com/ittechtrip/
  39. 39. - 감사합니다. -

×