HTTP/2 Server Push Considered Harmful

Slide 1

Slide 1 text

HTTP/2 Server Push ʹؔ͢ΔҰߟ࡯

Slide 2

Slide 2 text

Moto Ishizawa (@summerwind)

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ݕূϖʔδ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Thank you :-)