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

Flush your <head>! - an HTTP performance optimi...

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. Web Server CDN Server Client Web Server CDN Server Client

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

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

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

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

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

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

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

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

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

    t Icon made by Freepik from www.flaticon.com GET Request HTML <head>
  11. 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
  12. 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
  13. 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>
  14. chunk #1 size chunk #1 content chunk #2 size chunk

    #2 content chunk #3 size chunk #3 content chunk #4 size chunk #4 content