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

Moto Ishizawa (@summerwind)

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

ݕূϖʔδ

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

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

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

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

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

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

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

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

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

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

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

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

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

Thank you :-)