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

HTTP/2 Server Push Considered Harmful

HTTP/2 Server Push Considered Harmful

Moto Ishizawa

April 14, 2015
Tweet

More Decks by Moto Ishizawa

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Moto Ishizawa
    (@summerwind)

    View full-size slide

  3. Ծઆ
    HTTP/2 ͷ Server Push Λ࢖ͬͯɺ
    Above the fold ͷϦιʔεΛϓογϡͨ͠Β
    ϨϯμϦϯά͕଎͘ͳΔͷͰ͸ʁ

    View full-size slide

  4. ςετ؀ڥ
    αʔόʔ
    • CentOS 7.0
    • H2O (1.1.2-alpha1)
    • Nginx (1.7.11)
    ΫϥΠΞϯτ
    • Chrome Canary (44.0.2364.0)
    ωοτϫʔΫ
    • Uplink delay: 100ms
    • Downlink delay: 100ms

    View full-size slide

  5. HTTP/2
    ը૾ͷಡΈࠐΈ͸͔֬ʹ଎͘ͳ͍ͬͯΔ
    Above the fold ͷϦιʔεΛαʔόʔϓογϡ͢Δ
    HTTP/2
    (Pushed above the fold)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. HTTP/2
    (Pushed CSS & JavaScript)
    DOM ߏஙλΠϛϯά͕͞Βʹվળ
    CSS ͱ JavaScript Λαʔόʔϓογϡ͢Δ
    HTTP/2

    View full-size slide

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

    View full-size slide

  11. HTTP/2
    (Pushed CSS & JavaScript & Above the fold)
    ͦ΋ͦ΋ Chrome ͕ࢦఆ͢Δ Priority ͕ߟྀ͞Ε͍ͯͳ͍…?
    શ෦αʔόʔϓογϡ͢Δ
    HTTP/2

    View full-size slide

  12. HTTP/1.1
    HTTP/2 vs HTTP/1.1
    HTTP/2
    HTTP/1.1 ͷํ͕ DOM ߏஙλΠϛϯά͕଎͍

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. ·ͱΊ
    • Above the fold ͷϦιʔεΛϓογϡͯ͠΋଎͘͸ͳΒͳ͍
    • ϒϥ΢β૬खͷ৔߹͸ϨϯμϦϯάͷ͜ͱΛߟྀͯ͋͛͠Δඞཁ͕͋Δ
    • HTTP/2 Ͱ͸αʔόʔͷ࣮૷࣍ୈͰɺϨϯμϦϯάύϑΥʔϚϯε΋มΘͬͯ͘Δ
    • nghttp2 ͷεέδϡʔϥʔ͸ϒϥ΢βͱ૬ੑ͕ྑ͍
    • H2O ͷεέδϡʔϥʔ͸վળͷ༨஍͕͋Δ͔΋
    • ͳΜͰ΋αʔόʔϓογϡ͢Ε͹଎͘ͳΔɺͱ͍͏΋ͷͰ͸ͳ͍
    • ϞόΠϧΞϓϦͱ Web API ͷ૊Έ߹Θͤͷ৔߹͸΋ͬͱΧδϡΞϧʹ࢖͑ͦ͏

    View full-size slide

  17. Thank you :-)

    View full-size slide