Web Application 2018 From Performance Perspective

Web Application 2018 From Performance Perspective

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

March 24, 2018
Tweet

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 (PPE0ME8FC

  5. 2001 2009 2010 2016 2018 4JOHMF1BHF8FC "QQT

  6. 2001 2009 2010 2016 2018 &WPMWF4JOHMF1BHF "QQT

  7. 2001 2009 2010 2016 2018 'VUVSFʜ

  8. 2001 2009 2010 2016 2018 8FC"QQT9

  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 3FRTTFD

    ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFSTFD ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ Web Performance Tools ~200X
  19. • Page Speed Insights • Apache Bench • jmeter 3FRTTFD

    ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFSTFD ඵؒͰԿ#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͸%-ͨ͠ΒΩϟογϡͤ͞Δ $444QSJUF JDPO͸Ұͭʹ·ͱΊΔ *OMJOFల։ ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ ϥΠϯʹల։͢Δ
  24. • CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ

    $BDIF$POUSPM BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ $444QSJUF 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'BTU0QFO )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 ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ ఺਺Ͱදࣔͯ͘͠ΕΔ 3FBM6TFS.POJUPSJOH ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ  4QFFE$VSWF /FX3FMJD#SPXTFS 6Q5SFOET
  42. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring

    • Navigation Timing • Resource Timing -JHIUIPVTF ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ ఺਺Ͱදࣔͯ͘͠ΕΔ 3FBM6TFS.POJUPSJOH ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ  4QFFE$VSWF /FX3FMJD#SPXTFS 6Q5SFOET 9͔ΒͷมԽ ΑΓύϑΥʔϚϯεͷ౔ඨ͕ϦΞϧͳϢʔβʔΛର৅ͱ͢ΔΑ͏ ʹͳͬͨɻϖʔδϩʔυͷ͚࣌ؒͩͰ͸ͳ͘ɺΞϓϦέʔγϣϯ ͱͯ͠ͷશମͷ࣌ؒΛߟྀ͢ΔΑ͏ʹͳͬͨɻ
  43. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring

    • Navigation Timing • Resource Timing -JHIUIPVTF ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ ఺਺Ͱදࣔͯ͘͠ΕΔ 3FBM6TFS.POJUPSJOH ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ  4QFFE$VSWF /FX3FMJD#SPXTFS 6Q5SFOET 9͔ΒͷมԽ ΑΓύϑΥʔϚϯεͷ౔ඨ͕ϦΞϧͳϢʔβʔΛର৅ͱ͢ΔΑ͏ ʹͳͬͨɻϖʔδϩʔυͷ͚࣌ؒͩͰ͸ͳ͘ɺΞϓϦέʔγϣϯ ͱͯ͠ͷશମͷ࣌ؒΛߟྀ͢ΔΑ͏ʹͳͬͨɻ ඞવతʹ΍Δ͜ͱ͕ܾ·ͬͯ͘Δ
  44. Web Performance ~2016 • ΍Δ͜ͱ • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷ ޙͷૢ࡞΋࠷దԽ͢Δ • ϨΠςϯγΛ࡟Δ

  45. ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ

  46. ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ 9Ͱ͸+40/Ͱ͸ͳ͘)5.-Ͱ΍Γ औΓ͍ͯͨ͠ɺશ෦ͷϖʔδΛຖճϨ ϯμϦϯά͢ΔͨΊɺແବ͕ଟ͍ɻ

  47. ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ 4JOHMF1BHF"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/ 1BSUJBM3FOEFS

  52. Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5+40/ 1BSUJBM3FOEFS

    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 #SPXTFSDBOTFOESFRVFTUT POMZ

  59. 4FSWFS OFFEUPXBJUUPpOJTIQSFWJPVTSFRVFTU

  60. 4FSWFS "OEJGSFRVFTUJTTMPX CSPXTFS DBOVTFPOMZSFRVFTUT

  61. 4FSWFS "OEJGSFRVFTUJTTMPX CSPXTFS DBOVTFPOMZSFRVFTUT )FBEPG-JOF#MPDLJOH

  62. http/2 solves HoL Blocking

  63. Multiplexing requests on 1 TCP connection 4FSWFS 5$1$POOFDUJPOCVUNVMUJ SFRVFTUT

  64. Multiplexing requests on 1 TCP connection 4FSWFS *GTPNFSFRVFTUTBSFTMPX #65 XIPMFSFRVFTUTBSFOPUB⒎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 ύϑΥʔϚϯε͸จԽ 4FSWJDF8PSLFSΛ࢖͓͏

  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 4FSWFS3FOEFSFE1BHFTBSFOPU 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 ϦΫΤετΛ4FSWJDF8PSLFSͰड͚औͬ ͯΩϟογϡ͔ΒϨεϙϯεΛฦ͢ ΦϑϥΠϯͷ࣌͸4FSWJDF8PSLFS͔Βͷ Ωϟογϡ͕ฦΔࣄͰϩʔΧϧͰίϯςϯ π͕ݟΕΔɻ

  78. Service Worker ϦΫΤετΛ4FSWJDF8PSLFSͰड͚औͬ ͯΩϟογϡ͔ΒϨεϙϯεΛฦ͢ ΦϑϥΠϯͷ࣌͸4FSWJDF8PSLFS͔Βͷ Ωϟογϡ͕ฦΔࣄͰϩʔΧϧͰίϯςϯ π͕ݟΕΔɻ ΩϟογϡΛଟ͘࢖͏ɺ1VTI௨஌ͳ ͲͰ&OHBHFNFOUΛଟ͘͢Δ

  79. Server Side Rendering • Client Side Ͱ HTML ΛϨϯμϦϯά͢Δ͜ͱ ΛClient

    Side RenderingͱݺͿɻͦΕʹର͠ ͯಉ͜͡ͱΛ Server Side Ͱ΋࣮ࢪ͢Δ͜ͱΛ Server Side Rendering ͱݺͿɻ
  80. Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.-

    (FUQBHFQBSUT
  81. Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.-

    $MJFOU4JEF 3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS)5.-XJUITBNF DMJFOUTFSWFSSFOEFSMPHJD 4FSWFS4JEF 3FOEFSFS (FUQBHFQBSUT
  82. Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.-

    $MJFOU4JEF 3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS)5.-XJUITBNF DMJFOUTFSWFSSFOEFSMPHJD 4FSWFS4JEF 3FOEFSFS (FUQBHFQBSUT 443Λ͢Δ͜ͱͰॳظදࣔ࣌ؒΛվ ળͭͭ͠ɺ41"ͷྑ͍ॴͲΓΛ͢Δ
  83. First View Performance

  84. ͦ΋ͦ΋First ViewͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU

    'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ *NBHF 5JNF5P *OUFSBDUJWF +4MPBEFE *NBHF 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE *NBHF
  85. First View Performance • SSR ʹ͓͚Δ First View ͷվળͱ͸ɺ͜ͷ First

    Meaningful Paint ·ͰΛࢦ͢ɻ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU
  86. First View Performance • First Meaningful PaintҎ߱ͷվળ͸Service Worker΍HTTP2ͳͲผͳ΍Γํ͕͋Δɻ 'JSTU.FBOJOHGVM 1BJOU

    7JTVBMMZSFBEZ *NBHF 5JNF5P *OUFSBDUJWF +4MPBEFE *NBHF 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE *NBHF
  87. Client Side Rendering ͷΈͰͷಈ͖

  88. Client Side Rendering ͷΈͷ ৔߹ • First Meaningful Paint ͱ

    Time To Interact ͷ λΠϛϯά͕΄ͱΜͲಉ͡ɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..
  89. Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful

    Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..
  90. Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful

    Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading.. Ϣʔβʔ͸ݟ͔͑ͯΒૢ࡞͢Δ 'JSTU.FBOJOHGVM1BJOU͕ग़͔ͯΒ*OUFSBDU ͢Δ ͷͰɺ͜ͷ$MJFOU4JEF3FOEFSJOH͚ͩͰ͸࣌ؒతʹແବ͕ଟ͍ɻ
  91. ͦ͜Ͱ Server Side Rendering

  92. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU ࠷ॳ͔ΒσʔλΛຒΊࠐΜͩঢ়ଶͰ)5.-ʹ͢Δ ʢ4FSWFS4JEF3FOEFSJOHʣ

  93. 2018೥·Ͱͷ·ͱΊ

  94. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU 4FSWFSͰͷϨεϙϯεվળ %#ΫΤϦνϡʔχϯά΍ωοτϫʔΫվળ౳

  95. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU $SJUJDBM3FOEFSJOH$44Ͱͷௐ੔ɺ -PBEJOH*OEJDBUPSʹΑΔ଴ͨͤͳ͍޻෉

  96. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU ॳظσʔλΛGFUDI͢ΔͷͰ͸ͳ͘ɺ+40/ͱͯ͠ຒΊࠐΉ ΋͘͠͸ɺॳظσʔλΛ)5.-ʹ͢Δ ʢ4FSWFS4JEF3FOEFSJOHʣ

  97. 'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE BCPWFUIFGPME֎ͷը૾ͷ஗ԆಡΈࠐΈ

    ޮ཰తͳϑΥʔϚοτͷબఆ
  98. 'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE +4ͷ஗Ԇϩʔυɺ+4DPEFTQMJUUJOHͳͲͰͷෆཁͳίʔυ

    ͷ࡟আ
  99. 'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF 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