Web Application 2018 From Performance Perspective

Webパフォーマンスについての話を manabiya.tech で発表しました。

Transcript

1. Web Application 2018 From Performance Perspective 2018/03/24 @ manabiya.tech Yosuke FURUKAWA
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. 2001 2009 2010 2016 2018
4. 2001 2009 2010 2016 2018 (PPE
   0ME
   8FC
5. 2001 2009 2010 2016 2018 4JOHMF
   1BHF
   8FC
   "QQT
6. 2001 2009 2010 2016 2018 &WPMWF
   4JOHMF
   1BHF
   "QQT
7. 2001 2009 2010 2016 2018 'VUVSF
   ʜ
8. 2001 2009 2010 2016 2018 8FC
   "QQT
   9
9. Web Performance 200X
10. Performance Bible ~200X
11. Performance Bible ~200X
12. Performance Bible ~200X )551ϦΫΤετΛ࠷খݶʹ͠Α͏
    $%/Λ࢖͓͏
    $BDIF$POUSPMΛ࢖͓͏
    FUD Ϣʔβʔ͸ϑϩϯτΤϯυͰ 80 ~ 90% ͷ࣌ؒ଴ػ͍ͯ͠Δ
13. Previous Web Applications
14. Previous Web Applications • جຊతʹϖʔδભҠͰͷॲཧ͕ϝΠϯ • SNS • ϒϩά • ཱྀߦαΠτ • Ϩετϥϯݕࡧ etc
15. Previous Web Applications • جຊతʹϖʔδભҠͰͷॲཧ͕ϝΠϯ • SNS • ϒϩά • ཱྀߦαΠτ • Ϩετϥϯݕࡧ etc ຖճϖʔδΛඳըͭͭ͠ɺϒϥ΢β ͷجຊػೳΛଟ༻ͯ͠࡞Δ
16. Web Performance ~200X • Measuring Time from Request to Response
17. Web Performance Tools ~200X • Page Speed Insights • Apache Bench • jmeter • Requests / sec • Latency • Transfer / sec
18. • Page Speed Insights • Apache Bench • jmeter 3FRT
    
    TFD
    ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFS
    
    TFD
    ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ
    ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ Web Performance Tools ~200X
19. • Page Speed Insights • Apache Bench • jmeter 3FRT
    
    TFD
    ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFS
    
    TFD
    ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ
    ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ ඞવతʹ΍Δ͜ͱ͕ܾ·ͬͯ͘Δ Web Performance Tools ~200X
20. Web Performance ~ 200X • ΍Δ͜ͱ • ϦΫΤετճ਺ͷվળ • Ϩεϙϯε࣌ؒͷվળ • Ϩεϙϯε͢ΔόΠτ਺ͷվળ
21. ϦΫΤετճ਺ͷվળ • αΠτΛߴ଎ʹ͢ΔҰ൪ͷํ๏͸
 ͦ΋ͦ΋ϦΫΤετ͠ͳ͍͜ͱ • ۃྗϦΫΤετ਺ΛݮΒ͢ • ex: CSSΛ1ϑΝΠϧʹɺJS΋ಉ༷ɻ
22. ϦΫΤετճ਺ͷվળ • CSS Sprite • Inline ల։ • Cache Control
23. • CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ $BDIF$POUSPM
    BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ $44
    4QSJUF
    JDPO͸Ұͭʹ·ͱΊΔ *OMJOF
    ల։
    ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ ϥΠϯʹల։͢Δ
24. • CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ $BDIF$POUSPM
    BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ $44
    4QSJUF
    JDPO͸Ұͭʹ·ͱΊΔ *OMJOF
    ల։
    ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ ϥΠϯʹల։͢Δ ͳΔ΂͘ϦΫΤετ͠ͳ͍
25. Ϩεϙϯε࣌ؒͷվળ • Improve Backend Performance • Indexing, Join, denomalize • Proper Middleware ΑΓྑ͍ϛυϧ΢ΣΞΛ࢖͏ 3FEJT
    NFNDBDIF %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ δϣΠϯ͢Δɺඇਖ਼نԽ͢Δ
    FUD
26. Ϩεϙϯε࣌ؒͷվળ • Improve Backend Performance • Indexing, Join, denomalize • Proper Middleware ΑΓྑ͍ϛυϧ΢ΣΞΛ࢖͏ 3FEJT
    NFNDBDIF %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ δϣΠϯ͢Δɺඇਖ਼نԽ͢Δ
    FUD ΞϓϦέʔγϣϯαʔόͷத਎Λ
    վળͯ͠ɺϨεϙϯεΛྑ͘͢Δ
27. Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png, gif, jpeg • JS, css ͷ minify, gzipԽ
28. Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png, gif, jpeg • JS, css ͷ minify, gzipԽ ద੾ͳը૾ϑΥʔϚοτͷબ୒ TDSJQU΍TUZMF͸NJOJGZͯ͠H[JQʹ͢Δ ͜ͱͰখͯ͘͞͠഑৴
29. Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png, gif, jpeg • JS, css ͷ minify, gzipԽ ద੾ͳը૾ϑΥʔϚοτͷબ୒ TDSJQU΍TUZMF͸NJOJGZͯ͠H[JQʹ͢Δ ͜ͱͰখͯ͘͞͠഑৴ Ϩεϙϯε͢ΔόΠτ਺͕ݮΕ͹ଳ Ҭͷѹഭ͕ݮΔɺ࣌ؒ΋গͳ͘ͳΔ
30. Summary ~200X • Bible: • High Performance Web Sites • App: • جຊతʹϖʔδભҠ୯ҐͰ΍ΓऔΓ • Performance Techniques: • ϦΫΤετΛݮΒ͢ • JS/CSS/image Λ1fileʹ͢Δɺ Inlineʹ͢ΔɺCache-ControlΛ࢖͏ • ϨεϙϯεΛվળ͢Δ • Backend ͷϨεϙϯεΛվળ͢ΔɺDBΑ͘͢Δɺద੾ͳMiddleware࢖͏ • Ϩεϙϯε͢ΔαΠζΛݮΒ͢ • ImageΛॖখ ͢ΔɺCSS/JSΛminify͢Δɺద੾ͳImage formatΛબͿɺѹॖ͢Δ
31. 2001 2009 2010 2016 2018 8FC
    "QQT
    
    
    
32. Web Performance 2010-2016
33. Performance Bible 2010-2016
34. Performance Bible 2010-2016
35. Performance Bible 2010-2016 ॲཧͷத৺͕αʔό͔Βϒϥ΢β΁
    ϨΠςϯγΛখ͘͞ɻ
    ϨΠςϯγΛԼ͛Δʹ͸ɿ
    ઀ଓίετΛԼ͛Δ
    5$1
    'BTU
    0QFO
    )551
    ඞཁͳσʔλ͚ͩऔͬͯࠩ෼Ͱߋ৽͢Δ
    9)3
    +4
    ࣮ࡍͷϢʔβʔͷϞχλϦϯά݁ՌΛݟΔ
    36.
36. Web Applications 2010-2016 • NetworkϨΠϠͰͷ࠷దԽ (HTTP/2) • Ajax௨৴ͱ෦෼ϨϯμϦϯά (SPA)
37. Web Applications 2010-2015 • NetworkϨΠϠͰͷ࠷దԽ (HTTP/2) • Ajax௨৴ͱ෦෼ϨϯμϦϯά (SPA) 41"Λجຊͱͯ͠ΑΓ(6*ΞϓϦέʔ γϣϯͱͯ͠ͷଆ໘͕ڧ͘ͳͬͨɻ )551Λجຊͱͯ͠ΑΓωοτϫʔΫ ϨΠϠͰͷ࠷దԽ͕ਐΉΑ͏ʹͳͬͨ
38. Web Performance ~2016 • Network Optimization • HTTP/2 • Single Page Application • Partial Rendering • Ajax
39. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring • Navigation Timing • Resource Timing
40. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring • Navigation Timing • Resource Timing -JHIUIPVTF
    ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ
    ఺਺Ͱදࣔͯ͘͠ΕΔ
41. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring • Navigation Timing • Resource Timing -JHIUIPVTF
    ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ
    ఺਺Ͱදࣔͯ͘͠ΕΔ 3FBM
    6TFS
    .POJUPSJOH
    ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ
    
    
    4QFFE$VSWF
    /FX
    3FMJD
    #SPXTFS
    6Q5SFOET
42. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring • Navigation Timing • Resource Timing -JHIUIPVTF
    ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ
    ఺਺Ͱදࣔͯ͘͠ΕΔ 3FBM
    6TFS
    .POJUPSJOH
    ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ
    
    
    4QFFE$VSWF
    /FX
    3FMJD
    #SPXTFS
    6Q5SFOET 9͔ΒͷมԽ
    ΑΓύϑΥʔϚϯεͷ౔ඨ͕ϦΞϧͳϢʔβʔΛର৅ͱ͢ΔΑ͏ ʹͳͬͨɻϖʔδϩʔυͷ͚࣌ؒͩͰ͸ͳ͘ɺΞϓϦέʔγϣϯ ͱͯ͠ͷશମͷ࣌ؒΛߟྀ͢ΔΑ͏ʹͳͬͨɻ
43. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring • Navigation Timing • Resource Timing -JHIUIPVTF
    ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ
    ఺਺Ͱදࣔͯ͘͠ΕΔ 3FBM
    6TFS
    .POJUPSJOH
    ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ
    
    
    4QFFE$VSWF
    /FX
    3FMJD
    #SPXTFS
    6Q5SFOET 9͔ΒͷมԽ
    ΑΓύϑΥʔϚϯεͷ౔ඨ͕ϦΞϧͳϢʔβʔΛର৅ͱ͢ΔΑ͏ ʹͳͬͨɻϖʔδϩʔυͷ͚࣌ؒͩͰ͸ͳ͘ɺΞϓϦέʔγϣϯ ͱͯ͠ͷશମͷ࣌ؒΛߟྀ͢ΔΑ͏ʹͳͬͨɻ ඞવతʹ΍Δ͜ͱ͕ܾ·ͬͯ͘Δ
44. Web Performance ~2016 • ΍Δ͜ͱ • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷ ޙͷૢ࡞΋࠷దԽ͢Δ • ϨΠςϯγΛ࡟Δ
45. ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ
46. ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ 9Ͱ͸+40/Ͱ͸ͳ͘)5.-Ͱ΍Γ औΓ͍ͯͨ͠ɺશ෦ͷϖʔδΛຖճϨ ϯμϦϯά͢ΔͨΊɺແବ͕ଟ͍ɻ
47. ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ 4JOHMF
    1BHF
    "QQMJDBUJPOʹ͢Δ
48. Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏
49. Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL
50. Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5
    +40/
51. Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5
    +40/ 1BSUJBM
    3FOEFS
52. Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5
    +40/ 1BSUJBM
    3FOEFS 3JDI
    ͳ
    8FC
    "QQMJDBUJPO͸େମ͜ ͏ͳ͖͍ͬͯͯΔɻ
53. ϨΠςϯγΛ࡟Δ • 1ͭͷHTTP઀ଓΛແବʹ͠ͳ͍ • ຖճHTTP઀ଓ͢Δͷ͸ωοτϫʔΫϨΠϠͰݟΔ ͱίετ͕ߴ͍ • 1ͭͷHTTP઀ଓͷதͰϦΫΤετΛଟॏԽ͢Δ • ઀ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ΋ ͋Δʢޙड़ʣ
54. ϨΠςϯγΛ࡟Δ • 1ͭͷHTTP઀ଓΛແବʹ͠ͳ͍ • ຖճHTTP઀ଓ͢Δͷ͸ωοτϫʔΫϨΠϠͰݟΔ ͱίετ͕ߴ͍ • 1ͭͷHTTP઀ଓͷதͰϦΫΤετΛଟॏԽ͢Δ • ઀ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ΋ ͋Δʢޙड़ʣ )551
    
55. HTTP2 • ଟॏԽ͞ΕͨϦΫΤετΛૹΔ • HTTP/1.1 ࣌୅ΑΓ΋1ͭͷωοτϫʔΫ઀ଓ Λ࢖ͬͨ࠷దԽ͕ߦΘΕΔΑ͏ʹɻ • Prioritization, Server Push, Early Hints ଳҬ෯͕૿͑ͯ΋ϨΠςϯγ͕ݮΒͳ ͍ͱࠓޙͷߴ଎Խ͕Ͱ͖ͳ͍
56. http/1.1 problems
57. 4FSWFS GET /main.js GET /main.css GET /image0.png
58. 4FSWFS #SPXTFS
    DBO
    TFOE
    
    SFRVFTUT
    POMZ
59. 4FSWFS OFFE
    UP
    XBJU
    UP
    pOJTI
    QSFWJPVT
    SFRVFTU
60. 4FSWFS "OE
    JG
    
    SFRVFTU
    JT
    TMPX
    CSPXTFS
    DBO
    VTF
    POMZ
    
    SFRVFTUT
61. 4FSWFS "OE
    JG
    
    SFRVFTU
    JT
    TMPX
    CSPXTFS
    DBO
    VTF
    POMZ
    
    SFRVFTUT )FBE
    PG
    -JOF
    #MPDLJOH
62. http/2 solves HoL Blocking
63. Multiplexing requests on 1 TCP connection 4FSWFS 
    5$1
    $POOFDUJPO
    CVU
    NVMUJ
    SFRVFTUT
64. Multiplexing requests on 1 TCP connection 4FSWFS *G
    TPNF
    SFRVFTUT
    BSF
    TMPX
    #65
    XIPMF
    SFRVFTUT
    BSF
    OPU
    B⒎FDUFE
65. https://github.com/yosuke-furukawa/early-hints-demo
66. https://github.com/yosuke-furukawa/early-hints-demo
67. Summary ~2016 • Bible: • High Performance Browser Networking • App: • Single Page Application • Performance Techniques: • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ • SPA Λ࡞ΓɺϢʔβʔϞχλϦϯά͠ͳ͕Βૢ࡞ͱॲཧΛ
 ࠷దԽ͢Δ • ϨΠςϯγΛ࡟Δ • HTTP/2 Λ࢖͏
68. 2001 2009 2010 2016 2018 8FC
    "QQT
    
    
    
69. Web Performance 2016-2018
70. Performance Bible 2016-2018
71. Performance Bible 2016-2018
72. Performance Bible 2016-2018 ύϑΥʔϚϯε͸จԽ
    4FSWJDF
    8PSLFS
    Λ࢖͓͏
73. Performance Bible 2016-2018 • 7 principles of Rich Web Applications • Guillermo Rauch ࢯఏএ • ຋༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
74. Performance Bible 2016-2018 • 7 principles of Rich Web Applications • Guillermo Rauch ࢯఏএ • ຋༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415 4FSWFS
    3FOEFSFE
    1BHFT
    BSF
    OPU
    PQUJPOBM
75. Web Performance 2016 ~ 2018 • ΑΓ GUI ΞϓϦέʔγϣϯͱͯ͠Ϣʔβʔମ ݧΛ޲্ͤ͞ΔਐԽΛ͍ͯ͠Δ • ҰํͰɺJavaScriptͷαΠζ͕ͲΜͲΜ্͕ͬ ͍͍ͯͬͯΔɻ • ֤छϦΫΤετ͕૿͑ͯɺॳظදࣔͷ࣌ؒ΋ Ԇͼ͍ͯΔɻ
76. Service Worker • Service Worker is not optional. • Safari & Edge is already supported! • Offline & Cache is first class web features.
77. Service Worker ϦΫΤετΛ4FSWJDF
    8PSLFSͰड͚औͬ ͯΩϟογϡ͔ΒϨεϙϯεΛฦ͢ ΦϑϥΠϯͷ࣌͸4FSWJDF
    8PSLFS͔Βͷ Ωϟογϡ͕ฦΔࣄͰϩʔΧϧͰίϯςϯ π͕ݟΕΔɻ
78. Service Worker ϦΫΤετΛ4FSWJDF
    8PSLFSͰड͚औͬ ͯΩϟογϡ͔ΒϨεϙϯεΛฦ͢ ΦϑϥΠϯͷ࣌͸4FSWJDF
    8PSLFS͔Βͷ Ωϟογϡ͕ฦΔࣄͰϩʔΧϧͰίϯςϯ π͕ݟΕΔɻ ΩϟογϡΛଟ͘࢖͏ɺ1VTI௨஌ͳ ͲͰ&OHBHFNFOUΛଟ͘͢Δ
79. Server Side Rendering • Client Side Ͱ HTML ΛϨϯμϦϯά͢Δ͜ͱ ΛClient Side RenderingͱݺͿɻͦΕʹର͠ ͯಉ͜͡ͱΛ Server Side Ͱ΋࣮ࢪ͢Δ͜ͱΛ Server Side Rendering ͱݺͿɻ
80. Server Side Rendering 4FSWFS 1BHF
    3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI
    %BUB %#
    
    "1* 3FOEFS
    )5.- (FU
    QBHF
    QBSUT
81. Server Side Rendering 4FSWFS 1BHF
    3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI
    %BUB %#
    
    "1* 3FOEFS
    )5.- $MJFOU
    4JEF
    3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS
    )5.-
    XJUI
    TBNF
    DMJFOUTFSWFS
    SFOEFS
    MPHJD 4FSWFS
    4JEF
    3FOEFSFS (FU
    QBHF
    QBSUT
82. Server Side Rendering 4FSWFS 1BHF
    3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI
    %BUB %#
    
    "1* 3FOEFS
    )5.- $MJFOU
    4JEF
    3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS
    )5.-
    XJUI
    TBNF
    DMJFOUTFSWFS
    SFOEFS
    MPHJD 4FSWFS
    4JEF
    3FOEFSFS (FU
    QBHF
    QBSUT 443Λ͢Δ͜ͱͰॳظදࣔ࣌ؒΛվ ળͭͭ͠ɺ41"ͷྑ͍ॴͲΓΛ͢Δ
83. First View Performance
84. ͦ΋ͦ΋First ViewͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ *NBHF 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE *NBHF 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE *NBHF
85. First View Performance • SSR ʹ͓͚Δ First View ͷվળͱ͸ɺ͜ͷ First Meaningful Paint ·ͰΛࢦ͢ɻ /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU
86. First View Performance • First Meaningful PaintҎ߱ͷվળ͸Service Worker΍HTTP2ͳͲผͳ΍Γํ͕͋Δɻ 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ *NBHF 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE *NBHF 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE *NBHF
87. Client Side Rendering ͷΈͰͷಈ͖
88. Client Side Rendering ͷΈͷ ৔߹ • First Meaningful Paint ͱ Time To Interact ͷ λΠϛϯά͕΄ͱΜͲಉ͡ɻ 'JSTU
    .FBOJOHGVM
    1BJOU
    
    5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'JSTU
    $POUFOUGVM
    1BJOU Loading..
89. Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU
    .FBOJOHGVM
    1BJOU
    
    5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'JSTU
    $POUFOUGVM
    1BJOU Loading..
90. Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU
    .FBOJOHGVM
    1BJOU
    
    5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'JSTU
    $POUFOUGVM
    1BJOU Loading.. Ϣʔβʔ͸ݟ͔͑ͯΒૢ࡞͢Δ 'JSTU
    .FBOJOHGVM
    1BJOU
    ͕ग़͔ͯΒ*OUFSBDU ͢Δ ͷͰɺ͜ͷ$MJFOU
    4JEF
    3FOEFSJOH͚ͩͰ͸࣌ؒతʹແବ͕ଟ͍ɻ
91. ͦ͜Ͱ Server Side Rendering
92. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU ࠷ॳ͔ΒσʔλΛຒΊࠐΜͩঢ়ଶͰ)5.-ʹ͢Δ
    ʢ4FSWFS
    4JEF
    3FOEFSJOHʣ
93. 2018೥·Ͱͷ·ͱΊ
94. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU 4FSWFSͰͷϨεϙϯεվળ
    %#ΫΤϦνϡʔχϯά΍ωοτϫʔΫվળ౳
95. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU $SJUJDBM
    3FOEFSJOH
    $44Ͱͷௐ੔ɺ
    -PBEJOH
    *OEJDBUPSʹΑΔ଴ͨͤͳ͍޻෉
96. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU ॳظσʔλΛGFUDI͢ΔͷͰ͸ͳ͘ɺ+40/ͱͯ͠ຒΊࠐΉ
    
    ΋͘͠͸ɺॳظσʔλΛ)5.-ʹ͢Δ
    ʢ4FSWFS
    4JEF
    3FOEFSJOHʣ
97. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE BCPWF
    UIF
    GPME֎ͷը૾ͷ஗ԆಡΈࠐΈ
    ޮ཰తͳϑΥʔϚοτͷબఆ
98. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE +4ͷ஗Ԇϩʔυɺ+4
    DPEF
    TQMJUUJOHͳͲͰͷෆཁͳίʔυ ͷ࡟আ
99. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE )551
    ΍
    3FTPVSDF
    )JOUT
    ʹΑΔϩʔυվળ
100. Summary ~2018 • Bible: • ௒଎! Webϖʔδ଎౓վળΨΠυ • 7 Principles for Rich Web Application • App: • Progressive Web Application • Performance Techniques: • Service Worker Λ࢖͏ • Server Side Rendering Λ࢖ͬͯHTMLΛࣄલʹϨϯμϦϯά͢Δ
101. 2001 2009 2010 2016 2018 'VUVSF
     ʜ
102. Future Web Performance
103. ະ։ͷ஍
104. Future Web Prediction • ϢʔβʔΞΫγϣϯ͕ى͜Δલʹಈ͖Λ༧ଌ͠ ͯ౤ػత࣮ߦ͢Δ • CDNΛ΋ͬͱΞΫςΟϒʹ࢖͏
105. Ϣʔβʔͷಈ͖Λ༧ଌͨ͠ ౤ػతͳઌಡΈ • ϨΠςϯγͷนΛ௒͑Δ • dev.to͸Ϣʔβʔ͕Ϛ΢εΦʔόʔͨ͠Βઌಡ Έͯ͠CacheʹೖΕͯΔ • ແݶεΫϩʔϧͰ࣍ͷϦετΛ൒෼·Ͱདྷͨ ΒಡΈࠐΉ
106. Ϣʔβʔͷಈ͖Λ༧ଌͨ͠ ౤ػతͳઌಡΈ • ౷ܭɾػցֶशʹΑΔϢʔβʔͷಈ͖༧ଌ • Personalized͞Εͨಈ͖༧ଌ • ϢʔβʔA͕a.htmlͱb.htmlΛݟΔ͜ͱ͕ଟͦ͏ͳ Β࠷ॳ͔ΒཪͰprefetch or prerender͓ͯ͘͠౳ • https://dev.to/
107. CDNΛ΋ͬͱΞΫςΟϒʹ࢖͏ • Cloudinary • ը૾ͷ഑৴ͷ࠷దԽʹಛԽͨ͠CDN ݉ ը૾ม׵ as a Service • Fastly & netlify • Instant Cache Purge΍APIͰͷCDNૢ࡞ͳͲɺ ϓϩάϥϚϑϨϯυϦʔͳCDN͕૿͑ͨɻ
108. CDNΛ΋ͬͱΞΫςΟϒʹ࢖͏ • Fastly ΍ NetlifyΛॳΊͱͯ͠ Instant Cache Purge Λ࣮૷͍ͯ͠ΔCDN͕૿͍͑ͯΔ • CDNʹಈతͳHTMLΛΩϟογϡͤ͞Δߦҝ΋૿͑ ͦ͏ɻطʹdev.to͸fastlyΛ࢖ͬͯΩϟογϡͯ͠Δ • Cache͠ͳ͘ͱ΋ɺCDNΛ࢖͏ͱܦ࿏͕࠷దԽ͞Ε ΔͷͰɺܦ࿏࠷దʹΑͬͯߴ଎Խ͞ΕΔ
109. Future Web Performance ·ͱΊ
110. Web Performance 2018~ • ͜Ε·Ͱ΍͖ͬͯͨ͜ͱ͸౰ͨΓલʹͳͬͯ ͍͘ • ͞ΒʹࠩผԽΛ͍ͯ͘͠ඞཁ͕͋Δ • Ϣʔβʔͷಈ͖༧ଌ • CDNΛ΋ͬͱΞΫςΟϒʹ࢖͏
111. ͡Ό͋๻Β͸Ͳ͏͢Δͷ͔
112. ࠓޙͷWebͷύϑΥʔϚϯε ʹ௥ै͢ΔͨΊʹ͸Ͳ͏͋Δ ΂͖͔ɹ
113. Ͳ͏͢Δ΂͖͔ • ύϑΥʔϚϯε͸จԽͰ͋Δ • ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏ • ࠓޙͷWebͷಈ͖Λ༧૝͠Α͏ • Webͷ࢓༷ΛϑΥϩʔ͠Α͏
114. ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏ • ύϑΥʔϚϯε͸ੜ͖෺ • ܭଌ͍ͯ͠ͳ͍ͱ͙͢ʹऑΔ • ύϑΥʔϚϯεʹහײͳਓΛҭͯΔඞཁ͕͋ Δ
115. ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏ • ύϑΥʔϚϯεͷྼԽ΋ཱ೿ͳো֐ • ҎԼͷͲͪΒͷຊͰ΋ύϑΥʔϚϯεͷ΢Υο νΛ͢Δਓͷॏཁੑʹ͍ͭͯݴٴ͍ͯ͠Δɻ
116. ࠓޙͷWebͷಈ͖Λ༧ଌ͢Δ • Webͷඪ४Խ࢓༷ʹ΋৭ʑͳಈ͖͕ଟ͍ • TC39 • WHATWG / W3C • IETF • ͜ͷ͋ͨΓͷඪ४Խͷಈ͖Λ௥͓ͬͯ͘ͱະདྷ༧ ૝ʹ໾ཱͭ
117. ࠓޙͷWebͷಈ͖Λ༧ଌ͢Δ • ۩ମతʹ஫໨ͯ͠Δಈ͖ • web packaging • QUIC • etc (async-dom, binary ast, observable etc)
118. Ͳ͏͢Δ΂͖͔ • ύϑΥʔϚϯε͸จԽͰ͋Δ • ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏ • ࠓޙͷWebͷಈ͖Λ༧૝͠Α͏ • Webͷ࢓༷ΛϑΥϩʔ͠Α͏
119. Ͳ͏͢Δ΂͖͔ • ύϑΥʔϚϯε͸จԽͰ͋Δ • ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏ • ࠓޙͷWebͷಈ͖Λ༧૝͠Α͏ • Webͷ࢓༷ΛϑΥϩʔ͠Α͏ ͓ͦΒ͘͜ͷล͸֤ࣾରԠ͕ҧ͏ɺ
 ΈΜͳͷઓུ͸͜ͷޙͷΫϩετʔΫ ͰޠΓ߹͏༧ఆ
120. ύϑΥʔϚϯενΣοΫϦετ • ύϑΥʔϚϯεͷจԽΛҭͯΔ • ύϑΥʔϚϯεܯ࡯Λ࡞Ζ͏ • ਖ਼͍͠ܭଌϝτϦοΫεΛऔΔ • Webඪ४ԽΛϑΥϩʔ͢ΔਓΛ࡞Δ • ݱ࣮తͳύϑΥʔϚϯεΰʔϧΛ࡞Δ • RAIL • ύϑΥʔϚϯεͷϕʔεϥΠϯΛ࡞ΔʢԼճͬͨΒ ܯࠂ͢Δʣ • ༧ࢉʹԠͯ͡CDNͷར༻΋ݕ౼͢Δ • ॳظදࣔߴ଎Խ • JS/CSS/assetͷbundleͯ͠Δ͔Ͳ͏͔ • asset͸ద੾ͳѹॖΛͯ͠Δ͔ʁ gzip, brotli, zopfli • image͸ద੾ͳϑΥʔϚοτΛͯ͠Δ͔ʁ jpg, gif, png, webp • ϨϯμϦϯάߴ଎Խ • SSRͷར༻Λݕ౼͢Δ • Code Split΋ߦ͏ • ϨΠςϯγΛ࡟Δ • HTTP2Λ࢖͏ • SPAʹ͢Δ • Service Workerͷར༻Λݕ౼͢Δ
121. Ͳ͏͢Δ΂͖͔ • ύϑΥʔϚϯε͸จԽͰ͋Δ • ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏ • ࠓޙͷWebͷಈ͖Λ༧૝͠Α͏ • Webͷ࢓༷ΛϑΥϩʔ͠Α͏ 8FCͷ໘ന͍ॴ͸
     ऴΘΓ͕ݟ͑ͳ͍ॴ
122. Enjoy, web performance
123. Thank you
124. Reference • High Performance Web Sites
 https://www.amazon.co.jp/dp/B0028N4WHY/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1 • High Performance Browser Networking
 https://hpbn.co/ • ௒଎Webϖʔδ଎౓վળΨΠυ
 https://www.amazon.co.jp/ Web%E3%83%9A%E3%83%BC%E3%82%B8%E9%80%9F%E5%BA%A6%E6%94%B9%E5%96%84%E3%82%A C%E3%82%A4%E3%83%89- %E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%95%E3%81%AF%E3%80%8C%E9%80%9F%E 3%81%95%E3%80%8D%E3%81%8B%E3%82%89%E5%A7%8B%E3%81%BE%E3%82%8B-WEB-PRESS-plus/ dp/477419400X • 7 Principles of Rich Web Application
 https://rauchg.com/2014/7-principles-of-rich-web-applications • dev.to • https://github.com/yosuke-furukawa/early-hints-demo • ύϑΥʔϚϯε޲্ͷͨΊͷσβΠϯઃܭ
 https://www.amazon.co.jp/ %E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E5%90%91%E 4%B8%8A%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3% 83%B3%E8%A8%AD%E8%A8%88-Lara-Callender-Hogan/dp/4873117550