Pro Yearly is on sale from $80 to $50! »

Flush your <head>! - an HTTP performance optimization tool - Reversim Summit '16

940e4866e4f95fbabbe5334d0a4a0de1?s=47 cowchimp
September 19, 2016

Flush your <head>! - an HTTP performance optimization tool - Reversim Summit '16

If you take delivering a fast web experience seriously, then you have to make sure you’re utilizing HTTP’s ability to serve the response in chunks.
Using “Chunked Encoding” improves performance by letting your server flush critical parts of the document (like the tag) early, which means the browser can start downloading other resources sooner.
And even though this has been part of the HTTP protocol since 1997(!) there hasn’t been a tool that lets you see when a flush takes place.. up until now.
“Chunk Scatter” is a tool dedicated to solve this by visualizing the point in time each flush occurred. It also shows what part of the document the client gets in each chunk, and lets you compare one endpoint to another (e.g. staging vs. production).
“Chunk Scatter” is used by to test how different configurations and environments handle flushing.

940e4866e4f95fbabbe5334d0a4a0de1?s=128

cowchimp

September 19, 2016
Tweet

Transcript

  1. Chunk Scatter an HTTP Performance Optimization Tool

  2. Flush your <head>

  3. None
  4. The Story So Far…

  5. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com
  6. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request
  7. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request Database
  8. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request Database
  9. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request Database HTML
  10. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request Database HTML CSS
  11. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request Database HTML CSS
  12. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com
  13. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request
  14. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request HTML <head>
  15. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request HTML <head> Database CSS
  16. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request HTML <head> Database CSS
  17. Web Server CDN Server Client Web Server CDN Server Client

    t Icon made by Freepik from www.flaticon.com GET Request HTML <head> Database CSS HTML <body>
  18. HTTP Chunked Response Transfer-Encoding: chunked

  19. WHAT IF I TOLD YOU THIS IS AVAILABLE SINCE 1997

  20. WHAT IF I TOLD YOU THIS IS AVAILABLE SINCE 1997

  21. The Problem

  22. This is the Chunked Response Visualization landscape

  23. http://flic.kr/p/dnLhE cba This is the Chunked Response Visualization landscape

  24. chunk #1 size chunk #1 content chunk #2 size chunk

    #2 content chunk #3 size chunk #3 content chunk #4 size chunk #4 content
  25. The Solution

  26. None
  27. None
  28. @cowchimp COWCHIMP/CHUNK-SCATTER blog.cowchimp.com GITHUB.COM/