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.

Web Performance Optimization with HTTP/3

170 vues

Publié le

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

Publié dans : Internet
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

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

×