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

Web Application 2018 From Performance Perspective

Web Application 2018 From Performance Perspective

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

Yosuke Furukawa
PRO

March 24, 2018
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

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