Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Web Performance Optimization with HTTP/3

128 Aufrufe

Veröffentlicht am

Web Performance Optimization with HTTP/3.
This is the English version of my previous slide in Korean.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Web Performance Optimization with HTTP/3

  1. 1. Service Platform Architect Brandon Kang sangjinn@gmail.com https://tech.brandonkang.net June 2020 Web Performance Optimization with HTTP/3
  2. 2. Optimization What is Optimization? Steps of preparing the best Conditions To make the best Performance
  3. 3. Web Optimization To make Web site Faster! With… • Backend Optimization • Frontend Optimization • Protocol Optimization
  4. 4. Backend/Frontend Optimization Backend Frontend -> Rendering Starts… | Rendering Completes
  5. 5. Backend Optimization • DNS RTT Acceleration • DNS Caching • Increase Network throughput • Web/WAS CPU/RAM Upgrade • Proxy Server • CDN(Content Delivery Network) • Database Caching • Database Normalization • Load balancing + Scaling Out • …
  6. 6. Frontend Optimization RUM(Real User Monitoring) based Optimization per Network, Device, Browser, OS, .. -> Personalization
  7. 7. Frontend Optimization • Script combination • Script minification • GZIP Encoding, Brotli, … • Browser friendly images e.g.)WebP, JPEGXR • Image resizing and (loosely) compression • Browser cache(cache-control header) • DNS RTT <-> Domain Sharding • DNS prefetching • CSS/JS locating (Top/Bottom) • Page prefetching • 3rd party script optimization • …
  8. 8. Protocol Optimization HTTP “To upgrade HTTP for faster Request & Response!!” Client Server
  9. 9. Let’s remind HTTP History~
  10. 10. HTTP Versions 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. HTTP/2 - Multiplexing PipeliningHTTP1.1 Multiplexing HTTP/2 HTTP1.0 Client Server Client Server Client Server
  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 • Header indexing using static & dynamic tables • After indexing, Compress headers with Huffman encoding • Encoding & Decoding at client and server Client Server HTTP/2 ­ Header Compression
  14. 14. HTTP/2 - Server Push • Server pushes contents without client’s request • Saving RTT(Round Trip Time) between two endpoints
  15. 15. * CRP(Critical Rendering Path) From: https://developers.google.com/web/fundamentals/performance /critical-rendering-path/analyzing-crp HTTP/2 - Server Push
  16. 16. HTTP1.1 HTTP/2 Server Push (X) HTTP/2 + Server Push (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 HTTP/2 - Server Push Pushed Contents HTTP/2 Multiplexing, Header compression, … Request & Response
  17. 17. HTTP/2 Rocks!
  18. 18. But, Why HTTP/3 Only four years after the HTTP/2 Announcement?
  19. 19. HTTP/3 HTTP/2 resolved HOLB(Head Of Line Blocking) of HTTP However, It still has HOLB problem of TCP
  20. 20. HOLB of TCP HTTP/2 QUIC
  21. 21. HTTP/3 The old TCP protocol Can’t Resolve HOLB issue.. Thus, We need a new protocol -> QUIC
  22. 22. QUIC (Quick UDP Internet Connections)
  23. 23. QUIC From: https://blog.chromium.org/2015/04/a-quic-update-on-googles-experimental.html
  24. 24. HTTP/3 HTTP/2 TLS 1.2+ TCP HTTP/3 UDP IP TLS 1.3 QUIC • QUIC enables protocol optimization • TLS 1.3 provides more secure and faster transmission.
  25. 25. HTTP/3 Reliability HTTP/3 QUIC UDP QUIC Reliability Layer QUIC has a Reliable Layer that makes Packet retransmission, congestion control, recovering loss,.. inheritance from TCP protocol
  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 • Static table with a list of headers defined in RFC • Clients and server updates a Dynamic table • Indexes on Dynamic tables are assigned (First-In-First-Out) Client Server HTTP/3 QPACK = HPACK in HTTP/2
  27. 27. Client Server Step 1) date:Wed, 23 Oct 2019 20:13:21 GMT 34 characters, 34 bytes Responses date: header Step 2) ..date:.…zd..2...0....z.sd...... Huffman encoded, 34 bytes -> 29 bytes HTTP/3 - QPACK
  28. 28. Client Server Same response uses the index “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 ClientServer • Encoder updates Dynamic table and Compress headers • Decoder Decompress headers using Dynamic table and Static table HTTP/3 - QPACK
  30. 30. HTTP/3 HTTP/3 Resolves the TCP HOLB Problem And, • Inherits HTTP/2 Benefits + • TLS1.3 • UDP Performance • QUIC Efficiency
  31. 31. HTTP/3 QUIC HTTP/3 = HTTP/2 + TCP benefits + QUIC + TLS 1.3 Reliability Layer HTTP/2 TLS 1.3
  32. 32. HTTP/3 Implementation
  33. 33. HTTP/3 Implementation
  34. 34. DEMO - HTTP/3 with Chrome Canary -
  35. 35. HTTP/3 - Chrome
  36. 36. HTTP/3 Cons.. • Still beta protocol and implemented services • HTTP1.1 is still mainly used, HTTP/2 is the following.. • UDP network is blocked in internal network hops • QUIC fail ratio is up to 3~7% • No standard QUIC APIs • CPU intensive on the web server • Unoptimized UDP stack • Lack of HTTP/3 tools and services (except Google)
  37. 37. - Thank You. - Service Platform Architect Brandon Kang sangjinn@gmail.com https://tech.brandonkang.net HTTP/3 Faster and Securer

×