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

The Glorious Era of HTTP/2

Surma
March 21, 2016

The Glorious Era of HTTP/2

Chrome Dev Summit 2015

Surma

March 21, 2016
Tweet

More Decks by Surma

Other Decks in Technology

Transcript

  1. HTTP/1.x Best Practices Write it, concatenate it, minify it, inline

    it, sprite it, shard it, vulcanize it, gzip it Workarounds Hacks
  2. Flaw #2 Meta Data GET /index.html User-Agent: Mozilla/5.0… Cookie: session_id=deadbeef

    … POST /comment User-Agent: Mozilla/5.0… GET /logo.jpg User-Agent: Mozilla/5.0… GET /script.js User-Agent: Mozilla/5.0… Cookie: session_id=deadbeef …
  3. Flaw #2 Meta Data 200 OK Set-Cookie: … Content-Type: text/html

    Content-Encoding: gzip <compressed data> ?
  4. h2 capable h2 enabled h2 unsupported 7,200 ms 5,325 ms

    6,160 ms Time to mobile load event Sample is 1 month of data on https://next.ft.com
  5. ✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html

    8 :status 200 35 Host 61 www-authenticate 62 … … … GET /index.html Host: www.example.org 2, 5, 35, Huffman(“www.example.org”)
  6. ✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html

    8 :status 200 35 Host 61 www-authenticate 62 Host www.example.org … … … GET /index.html Host: www.example.org 2, 5, 35, Huffman(“www.example.org”)
  7. ✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html

    8 :status 200 35 Host 61 www-authenticate 62 Host www.example.org 63 … … POST /something Host: www.example.org 3, Huffman(“/something”), 62
  8. 47% of HTML 36% of CSS 26% of JS are

    still uncompressed without gzip with gzip bit.ly/uncompressed-resources
  9. { "index.html": { "/css/app.css": { "type": "style" }, ... },

    "page.html": { "/css/page.css": { "type": "style" }, ... } }