Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

cowchimp

September 19, 2016
Tweet

More Decks by cowchimp

Other Decks in Programming

Transcript

  1. Chunk Scatter
    an HTTP Performance Optimization Tool

    View Slide

  2. Flush your

    View Slide

  3. View Slide

  4. The Story So Far…

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    Database
    CSS

    View Slide

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

    Database
    CSS

    View Slide

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

    Database
    CSS
    HTML

    View Slide

  18. HTTP
    Chunked
    Response
    Transfer-Encoding: chunked

    View Slide

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

    View Slide

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

    View Slide

  21. The Problem

    View Slide

  22. This is the
    Chunked Response
    Visualization landscape

    View Slide

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

    View Slide

  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

    View Slide

  25. The Solution

    View Slide

  26. View Slide

  27. View Slide

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

    View Slide