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

HTTP/2 Server Push Considered Harmful

HTTP/2 Server Push Considered Harmful

20e958629852b653fad35c99706fc3ac?s=128

Moto Ishizawa

April 14, 2015
Tweet

Transcript

  1. HTTP/2 Server Push ʹؔ͢ΔҰߟ࡯

  2. Moto Ishizawa (@summerwind)

  3. Ծઆ HTTP/2 ͷ Server Push Λ࢖ͬͯɺ Above the fold ͷϦιʔεΛϓογϡͨ͠Β

    ϨϯμϦϯά͕଎͘ͳΔͷͰ͸ʁ
  4. ݕূϖʔδ

  5. ςετ؀ڥ αʔόʔ • CentOS 7.0 • H2O (1.1.2-alpha1) • Nginx

    (1.7.11) ΫϥΠΞϯτ • Chrome Canary (44.0.2364.0) ωοτϫʔΫ • Uplink delay: 100ms • Downlink delay: 100ms
  6. HTTP/2 ը૾ͷಡΈࠐΈ͸͔֬ʹ଎͘ͳ͍ͬͯΔ Above the fold ͷϦιʔεΛαʔόʔϓογϡ͢Δ HTTP/2 (Pushed above the

    fold)
  7. HTTP/2 JS ͕ϨϯμϦϯάΛϒϩοΫ͍ͯ͠Δ Above the fold ͷϦιʔεΛαʔόʔϓογϡ͢Δ HTTP/2 (Pushed above

    the fold)
  8. HTTP/2 DOM ߏஙλΠϛϯά͕վળ JavaScript Λαʔόʔϓογϡ͢Δ HTTP/2 (Pushed JavaScript)

  9. HTTP/2 CSS ͕ϨϯμϦϯάΛϒϩοΫ͍ͯ͠Δ JavaScript Λαʔόʔϓογϡ͢Δ HTTP/2 (Pushed JavaScript)

  10. HTTP/2 (Pushed CSS & JavaScript) DOM ߏஙλΠϛϯά͕͞Βʹվળ CSS ͱ JavaScript

    Λαʔόʔϓογϡ͢Δ HTTP/2
  11. HTTP/2 (Pushed CSS & JavaScript & Above the fold) ͋Εɺվળ͞Ε͍ͯͳ͍…

    શ෦αʔόʔϓογϡ͢Δ HTTP/2
  12. HTTP/2 (Pushed CSS & JavaScript & Above the fold) ͦ΋ͦ΋

    Chrome ͕ࢦఆ͢Δ Priority ͕ߟྀ͞Ε͍ͯͳ͍…? શ෦αʔόʔϓογϡ͢Δ HTTP/2
  13. HTTP/1.1 HTTP/2 vs HTTP/1.1 HTTP/2 HTTP/1.1 ͷํ͕ DOM ߏஙλΠϛϯά͕଎͍

  14. nghttpx H2O vs nghttpx H2O ϓογϡ͠ͳͯ͘΋ DOM ͷߏஙλΠϛϯά͕଎͍

  15. nghttpx H2O vs nghttpx H2O CSSɺJavaScriptɺը૾ͷॱ൪ʹసૹ͞Ε͍ͯΔ

  16. nghttpx nghttpx Ͱ Above the fold ͷϦιʔεΛαʔόʔϓογϡ͢Δ Ұ൪࠷ޙʹαʔόʔϓογϡͷ෼͕సૹ͞Ε͍ͯΔ nghttpx (Pushed

    Above the fold)
  17. ·ͱΊ • Above the fold ͷϦιʔεΛϓογϡͯ͠΋଎͘͸ͳΒͳ͍ • ϒϥ΢β૬खͷ৔߹͸ϨϯμϦϯάͷ͜ͱΛߟྀͯ͋͛͠Δඞཁ͕͋Δ • HTTP/2

    Ͱ͸αʔόʔͷ࣮૷࣍ୈͰɺϨϯμϦϯάύϑΥʔϚϯε΋มΘͬͯ͘Δ • nghttp2 ͷεέδϡʔϥʔ͸ϒϥ΢βͱ૬ੑ͕ྑ͍ • H2O ͷεέδϡʔϥʔ͸վળͷ༨஍͕͋Δ͔΋ • ͳΜͰ΋αʔόʔϓογϡ͢Ε͹଎͘ͳΔɺͱ͍͏΋ͷͰ͸ͳ͍ • ϞόΠϧΞϓϦͱ Web API ͷ૊Έ߹Θͤͷ৔߹͸΋ͬͱΧδϡΞϧʹ࢖͑ͦ͏
  18. Thank you :-)