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

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

    View full-size slide

  2. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa

    View full-size slide

  3. 2001 2009 2010 2016 2018

    View full-size slide

  4. 2001 2009 2010 2016 2018
    (PPE0ME8FC

    View full-size slide

  5. 2001 2009 2010 2016 2018
    4JOHMF1BHF8FC
    "QQT

    View full-size slide

  6. 2001 2009 2010 2016 2018
    &WPMWF4JOHMF1BHF
    "QQT

    View full-size slide

  7. 2001 2009 2010 2016 2018
    'VUVSFʜ

    View full-size slide

  8. 2001 2009 2010 2016 2018
    8FC"QQT9

    View full-size slide

  9. Web Performance 200X

    View full-size slide

  10. Performance Bible ~200X

    View full-size slide

  11. Performance Bible ~200X

    View full-size slide

  12. Performance Bible ~200X
    )551ϦΫΤετΛ࠷খݶʹ͠Α͏
    $%/Λ࢖͓͏
    $BDIF$POUSPMΛ࢖͓͏FUD
    Ϣʔβʔ͸ϑϩϯτΤϯυͰ
    80 ~ 90% ͷ࣌ؒ଴ػ͍ͯ͠Δ

    View full-size slide

  13. Previous Web Applications

    View full-size slide

  14. Previous Web Applications
    • جຊతʹϖʔδભҠͰͷॲཧ͕ϝΠϯ
    • SNS
    • ϒϩά
    • ཱྀߦαΠτ
    • Ϩετϥϯݕࡧ etc

    View full-size slide

  15. Previous Web Applications
    • جຊతʹϖʔδભҠͰͷॲཧ͕ϝΠϯ
    • SNS
    • ϒϩά
    • ཱྀߦαΠτ
    • Ϩετϥϯݕࡧ etc
    ຖճϖʔδΛඳըͭͭ͠ɺϒϥ΢β
    ͷجຊػೳΛଟ༻ͯ͠࡞Δ

    View full-size slide

  16. Web Performance ~200X
    • Measuring Time from Request to Response

    View full-size slide

  17. Web Performance Tools ~200X
    • Page Speed Insights
    • Apache Bench
    • jmeter
    • Requests / sec
    • Latency
    • Transfer / sec

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Web Performance ~ 200X
    • ΍Δ͜ͱ
    • ϦΫΤετճ਺ͷվળ
    • Ϩεϙϯε࣌ؒͷվળ
    • Ϩεϙϯε͢ΔόΠτ਺ͷվળ

    View full-size slide

  21. ϦΫΤετճ਺ͷվળ
    • αΠτΛߴ଎ʹ͢ΔҰ൪ͷํ๏͸

    ͦ΋ͦ΋ϦΫΤετ͠ͳ͍͜ͱ
    • ۃྗϦΫΤετ਺ΛݮΒ͢
    • ex: CSSΛ1ϑΝΠϧʹɺJS΋ಉ༷ɻ

    View full-size slide

  22. ϦΫΤετճ਺ͷվળ
    • CSS Sprite
    • Inline ల։
    • Cache Control

    View full-size slide

  23. • CSS Sprite
    • Inline ల։
    • Cache Control
    ϦΫΤετճ਺ͷվળ
    $BDIF$POUSPM
    BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ
    $444QSJUF
    JDPO͸Ұͭʹ·ͱΊΔ
    *OMJOFల։
    ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ
    ϥΠϯʹల։͢Δ

    View full-size slide

  24. • CSS Sprite
    • Inline ల։
    • Cache Control
    ϦΫΤετճ਺ͷվળ
    $BDIF$POUSPM
    BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ
    $444QSJUF
    JDPO͸Ұͭʹ·ͱΊΔ
    *OMJOFల։
    ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ
    ϥΠϯʹల։͢Δ
    ͳΔ΂͘ϦΫΤετ͠ͳ͍

    View full-size slide

  25. Ϩεϙϯε࣌ؒͷվળ
    • Improve Backend Performance
    • Indexing, Join, denomalize
    • Proper Middleware
    ΑΓྑ͍ϛυϧ΢ΣΞΛ࢖͏ 3FEJT
    NFNDBDIF

    %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ
    δϣΠϯ͢Δɺඇਖ਼نԽ͢ΔFUD

    View full-size slide

  26. Ϩεϙϯε࣌ؒͷվળ
    • Improve Backend Performance
    • Indexing, Join, denomalize
    • Proper Middleware
    ΑΓྑ͍ϛυϧ΢ΣΞΛ࢖͏ 3FEJT
    NFNDBDIF

    %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ
    δϣΠϯ͢Δɺඇਖ਼نԽ͢ΔFUD
    ΞϓϦέʔγϣϯαʔόͷத਎Λ
    վળͯ͠ɺϨεϙϯεΛྑ͘͢Δ

    View full-size slide

  27. Ϩεϙϯε͢ΔόΠτ਺ͷվળ
    • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ
    • imagemagick, AWS Lambda
    • webp, png, gif, jpeg
    • JS, css ͷ minify, gzipԽ

    View full-size slide

  28. Ϩεϙϯε͢ΔόΠτ਺ͷվળ
    • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ
    • imagemagick, AWS Lambda
    • webp, png, gif, jpeg
    • JS, css ͷ minify, gzipԽ
    ద੾ͳը૾ϑΥʔϚοτͷબ୒
    TDSJQU΍TUZMF͸NJOJGZͯ͠H[JQʹ͢Δ
    ͜ͱͰখͯ͘͞͠഑৴

    View full-size slide

  29. Ϩεϙϯε͢ΔόΠτ਺ͷվળ
    • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ
    • imagemagick, AWS Lambda
    • webp, png, gif, jpeg
    • JS, css ͷ minify, gzipԽ
    ద੾ͳը૾ϑΥʔϚοτͷબ୒
    TDSJQU΍TUZMF͸NJOJGZͯ͠H[JQʹ͢Δ
    ͜ͱͰখͯ͘͞͠഑৴
    Ϩεϙϯε͢ΔόΠτ਺͕ݮΕ͹ଳ
    Ҭͷѹഭ͕ݮΔɺ࣌ؒ΋গͳ͘ͳΔ

    View full-size slide

  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ΛબͿɺѹॖ͢Δ

    View full-size slide

  31. 2001 2009 2010 2016 2018
    8FC"QQT

    View full-size slide

  32. Web Performance
    2010-2016

    View full-size slide

  33. Performance Bible
    2010-2016

    View full-size slide

  34. Performance Bible 2010-2016

    View full-size slide

  35. Performance Bible 2010-2016
    ॲཧͷத৺͕αʔό͔Βϒϥ΢β΁
    ϨΠςϯγΛখ͘͞ɻ
    ϨΠςϯγΛԼ͛Δʹ͸ɿ
    ઀ଓίετΛԼ͛Δ 5$1'BTU0QFO )551

    ඞཁͳσʔλ͚ͩऔͬͯࠩ෼Ͱߋ৽͢Δ 9)3 +4

    ࣮ࡍͷϢʔβʔͷϞχλϦϯά݁ՌΛݟΔ 36.

    View full-size slide

  36. Web Applications 2010-2016
    • NetworkϨΠϠͰͷ࠷దԽ (HTTP/2)
    • Ajax௨৴ͱ෦෼ϨϯμϦϯά (SPA)

    View full-size slide

  37. Web Applications 2010-2015
    • NetworkϨΠϠͰͷ࠷దԽ (HTTP/2)
    • Ajax௨৴ͱ෦෼ϨϯμϦϯά (SPA)
    41"Λجຊͱͯ͠ΑΓ(6*ΞϓϦέʔ
    γϣϯͱͯ͠ͷଆ໘͕ڧ͘ͳͬͨɻ
    )551Λجຊͱͯ͠ΑΓωοτϫʔΫ
    ϨΠϠͰͷ࠷దԽ͕ਐΉΑ͏ʹͳͬͨ

    View full-size slide

  38. Web Performance ~2016
    • Network Optimization
    • HTTP/2
    • Single Page Application
    • Partial Rendering
    • Ajax

    View full-size slide

  39. Web Performance Tools ~2016
    • Lighthouse
    • Real User Monitoring
    • Navigation Timing
    • Resource Timing

    View full-size slide

  40. Web Performance Tools ~2016
    • Lighthouse
    • Real User Monitoring
    • Navigation Timing
    • Resource Timing
    -JHIUIPVTF
    ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ
    ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ
    ఺਺Ͱදࣔͯ͘͠ΕΔ

    View full-size slide

  41. Web Performance Tools ~2016
    • Lighthouse
    • Real User Monitoring
    • Navigation Timing
    • Resource Timing
    -JHIUIPVTF
    ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ
    ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ
    ఺਺Ͱදࣔͯ͘͠ΕΔ
    3FBM6TFS.POJUPSJOH
    ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ

    4QFFE$VSWF
    /FX3FMJD#SPXTFS
    6Q5SFOET

    View full-size slide

  42. Web Performance Tools ~2016
    • Lighthouse
    • Real User Monitoring
    • Navigation Timing
    • Resource Timing
    -JHIUIPVTF
    ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ
    ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ
    ఺਺Ͱදࣔͯ͘͠ΕΔ
    3FBM6TFS.POJUPSJOH
    ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ

    4QFFE$VSWF
    /FX3FMJD#SPXTFS
    6Q5SFOET
    9͔ΒͷมԽ
    ΑΓύϑΥʔϚϯεͷ౔ඨ͕ϦΞϧͳϢʔβʔΛର৅ͱ͢ΔΑ͏
    ʹͳͬͨɻϖʔδϩʔυͷ͚࣌ؒͩͰ͸ͳ͘ɺΞϓϦέʔγϣϯ
    ͱͯ͠ͷશମͷ࣌ؒΛߟྀ͢ΔΑ͏ʹͳͬͨɻ

    View full-size slide

  43. Web Performance Tools ~2016
    • Lighthouse
    • Real User Monitoring
    • Navigation Timing
    • Resource Timing
    -JHIUIPVTF
    ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ
    ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ
    ఺਺Ͱදࣔͯ͘͠ΕΔ
    3FBM6TFS.POJUPSJOH
    ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ

    4QFFE$VSWF
    /FX3FMJD#SPXTFS
    6Q5SFOET
    9͔ΒͷมԽ
    ΑΓύϑΥʔϚϯεͷ౔ඨ͕ϦΞϧͳϢʔβʔΛର৅ͱ͢ΔΑ͏
    ʹͳͬͨɻϖʔδϩʔυͷ͚࣌ؒͩͰ͸ͳ͘ɺΞϓϦέʔγϣϯ
    ͱͯ͠ͷશମͷ࣌ؒΛߟྀ͢ΔΑ͏ʹͳͬͨɻ
    ඞવతʹ΍Δ͜ͱ͕ܾ·ͬͯ͘Δ

    View full-size slide

  44. Web Performance ~2016
    • ΍Δ͜ͱ
    • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷ
    ޙͷૢ࡞΋࠷దԽ͢Δ
    • ϨΠςϯγΛ࡟Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Single Page Application
    • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢
    Δ͜ͱͰߴ଎Խ͢Δํ๏

    View full-size slide

  49. Single Page Application
    • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢
    Δ͜ͱͰߴ଎Խ͢Δํ๏
    DMJDL

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Single Page Application
    • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢
    Δ͜ͱͰߴ଎Խ͢Δํ๏
    DMJDL
    (&5+40/
    1BSUJBM3FOEFS
    3JDIͳ8FC"QQMJDBUJPO͸େମ͜
    ͏ͳ͖͍ͬͯͯΔɻ

    View full-size slide

  53. ϨΠςϯγΛ࡟Δ
    • 1ͭͷHTTP઀ଓΛແବʹ͠ͳ͍
    • ຖճHTTP઀ଓ͢Δͷ͸ωοτϫʔΫϨΠϠͰݟΔ
    ͱίετ͕ߴ͍
    • 1ͭͷHTTP઀ଓͷதͰϦΫΤετΛଟॏԽ͢Δ
    • ઀ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ΋
    ͋Δʢޙड़ʣ

    View full-size slide

  54. ϨΠςϯγΛ࡟Δ
    • 1ͭͷHTTP઀ଓΛແବʹ͠ͳ͍
    • ຖճHTTP઀ଓ͢Δͷ͸ωοτϫʔΫϨΠϠͰݟΔ
    ͱίετ͕ߴ͍
    • 1ͭͷHTTP઀ଓͷதͰϦΫΤετΛଟॏԽ͢Δ
    • ઀ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ΋
    ͋Δʢޙड़ʣ
    )551

    View full-size slide

  55. HTTP2
    • ଟॏԽ͞ΕͨϦΫΤετΛૹΔ
    • HTTP/1.1 ࣌୅ΑΓ΋1ͭͷωοτϫʔΫ઀ଓ
    Λ࢖ͬͨ࠷దԽ͕ߦΘΕΔΑ͏ʹɻ
    • Prioritization, Server Push, Early Hints
    ଳҬ෯͕૿͑ͯ΋ϨΠςϯγ͕ݮΒͳ
    ͍ͱࠓޙͷߴ଎Խ͕Ͱ͖ͳ͍

    View full-size slide

  56. http/1.1 problems

    View full-size slide

  57. 4FSWFS
    GET /main.js
    GET /main.css
    GET /image0.png

    View full-size slide

  58. 4FSWFS
    #SPXTFSDBOTFOESFRVFTUT
    POMZ

    View full-size slide

  59. 4FSWFS
    OFFEUPXBJUUPpOJTIQSFWJPVTSFRVFTU

    View full-size slide

  60. 4FSWFS
    "OEJGSFRVFTUJTTMPX CSPXTFS
    DBOVTFPOMZSFRVFTUT

    View full-size slide

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

    View full-size slide

  62. http/2 solves HoL Blocking

    View full-size slide

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

    View full-size slide

  64. Multiplexing requests on 1 TCP
    connection
    4FSWFS
    *GTPNFSFRVFTUTBSFTMPX #65
    XIPMFSFRVFTUTBSFOPUB⒎FDUFE

    View full-size slide

  65. https://github.com/yosuke-furukawa/early-hints-demo

    View full-size slide

  66. https://github.com/yosuke-furukawa/early-hints-demo

    View full-size slide

  67. Summary ~2016
    • Bible:
    • High Performance Browser Networking
    • App:
    • Single Page Application
    • Performance Techniques:
    • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ
    • SPA Λ࡞ΓɺϢʔβʔϞχλϦϯά͠ͳ͕Βૢ࡞ͱॲཧΛ

    ࠷దԽ͢Δ
    • ϨΠςϯγΛ࡟Δ
    • HTTP/2 Λ࢖͏

    View full-size slide

  68. 2001 2009 2010 2016 2018
    8FC"QQT

    View full-size slide

  69. Web Performance
    2016-2018

    View full-size slide

  70. Performance Bible
    2016-2018

    View full-size slide

  71. Performance Bible 2016-2018

    View full-size slide

  72. Performance Bible 2016-2018
    ύϑΥʔϚϯε͸จԽ
    4FSWJDF8PSLFSΛ࢖͓͏

    View full-size slide

  73. Performance Bible 2016-2018
    • 7 principles of Rich Web Applications
    • Guillermo Rauch ࢯఏএ
    • ຋༁
    • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415

    View full-size slide

  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

    View full-size slide

  75. Web Performance 2016 ~ 2018
    • ΑΓ GUI ΞϓϦέʔγϣϯͱͯ͠Ϣʔβʔମ
    ݧΛ޲্ͤ͞ΔਐԽΛ͍ͯ͠Δ
    • ҰํͰɺJavaScriptͷαΠζ͕ͲΜͲΜ্͕ͬ
    ͍͍ͯͬͯΔɻ
    • ֤छϦΫΤετ͕૿͑ͯɺॳظදࣔͷ࣌ؒ΋
    Ԇͼ͍ͯΔɻ

    View full-size slide

  76. Service Worker
    • Service Worker is not optional.
    • Safari & Edge is already supported!
    • Offline & Cache is first class web features.

    View full-size slide

  77. Service Worker
    ϦΫΤετΛ4FSWJDF8PSLFSͰड͚औͬ
    ͯΩϟογϡ͔ΒϨεϙϯεΛฦ͢
    ΦϑϥΠϯͷ࣌͸4FSWJDF8PSLFS͔Βͷ
    Ωϟογϡ͕ฦΔࣄͰϩʔΧϧͰίϯςϯ
    π͕ݟΕΔɻ

    View full-size slide

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

    View full-size slide

  79. Server Side Rendering
    • Client Side Ͱ HTML ΛϨϯμϦϯά͢Δ͜ͱ
    ΛClient Side RenderingͱݺͿɻͦΕʹର͠
    ͯಉ͜͡ͱΛ Server Side Ͱ΋࣮ࢪ͢Δ͜ͱΛ
    Server Side Rendering ͱݺͿɻ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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"ͷྑ͍ॴͲΓΛ͢Δ

    View full-size slide

  83. First View Performance

    View full-size slide

  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

    View full-size slide

  85. First View Performance
    • SSR ʹ͓͚Δ First View ͷվળͱ͸ɺ͜ͷ
    First Meaningful Paint ·ͰΛࢦ͢ɻ
    /BWJHBUJPO4UBSU 'JSTU1BJOU
    'JSTU$POUFOUGVM
    1BJOU
    Loading..
    'JSTU.FBOJOHGVM
    1BJOU

    View full-size slide

  86. First View Performance
    • First Meaningful PaintҎ߱ͷվળ͸Service
    Worker΍HTTP2ͳͲผͳ΍Γํ͕͋Δɻ
    'JSTU.FBOJOHGVM
    1BJOU
    7JTVBMMZSFBEZ
    *NBHF
    5JNF5P
    *OUFSBDUJWF
    +4MPBEFE

    *NBHF
    'VMMZ-PBEFE
    BMMSFTPVSDFTBSF
    MPBEFE

    *NBHF

    View full-size slide

  87. Client Side Rendering
    ͷΈͰͷಈ͖

    View full-size slide

  88. Client Side Rendering ͷΈͷ
    ৔߹
    • First Meaningful Paint ͱ Time To Interact ͷ
    λΠϛϯά͕΄ͱΜͲಉ͡ɻ
    'JSTU.FBOJOHGVM1BJOU
    5JNF5P*OUFSBDUJWF
    +4MPBEFE

    'JSTU$POUFOUGVM
    1BJOU
    Loading..

    View full-size slide

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

    'JSTU$POUFOUGVM
    1BJOU
    Loading..

    View full-size slide

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

    'JSTU$POUFOUGVM
    1BJOU
    Loading..
    Ϣʔβʔ͸ݟ͔͑ͯΒૢ࡞͢Δ 'JSTU.FBOJOHGVM1BJOU͕ग़͔ͯΒ*OUFSBDU
    ͢Δ
    ͷͰɺ͜ͷ$MJFOU4JEF3FOEFSJOH͚ͩͰ͸࣌ؒతʹແବ͕ଟ͍ɻ

    View full-size slide

  91. ͦ͜Ͱ
    Server Side Rendering

    View full-size slide

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

    View full-size slide

  93. 2018೥·Ͱͷ·ͱΊ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  97. 'JSTU.FBOJOHGVM
    1BJOU
    7JTVBMMZSFBEZ 5JNF5P
    *OUFSBDUJWF
    +4MPBEFE

    'VMMZ-PBEFE
    BMMSFTPVSDFTBSF
    MPBEFE

    BCPWFUIFGPME֎ͷը૾ͷ஗ԆಡΈࠐΈ
    ޮ཰తͳϑΥʔϚοτͷબఆ

    View full-size slide

  98. 'JSTU.FBOJOHGVM
    1BJOU
    7JTVBMMZSFBEZ 5JNF5P
    *OUFSBDUJWF
    +4MPBEFE

    'VMMZ-PBEFE
    BMMSFTPVSDFTBSF
    MPBEFE

    +4ͷ஗Ԇϩʔυɺ+4DPEFTQMJUUJOHͳͲͰͷෆཁͳίʔυ
    ͷ࡟আ

    View full-size slide

  99. 'JSTU.FBOJOHGVM
    1BJOU
    7JTVBMMZSFBEZ 5JNF5P
    *OUFSBDUJWF
    +4MPBEFE

    'VMMZ-PBEFE
    BMMSFTPVSDFTBSF
    MPBEFE

    )551΍3FTPVSDF)JOUTʹΑΔϩʔυվળ

    View full-size slide

  100. Summary ~2018
    • Bible:
    • ௒଎! Webϖʔδ଎౓վળΨΠυ
    • 7 Principles for Rich Web Application
    • App:
    • Progressive Web Application
    • Performance Techniques:
    • Service Worker Λ࢖͏
    • Server Side Rendering Λ࢖ͬͯHTMLΛࣄલʹϨϯμϦϯά͢Δ

    View full-size slide

  101. 2001 2009 2010 2016 2018
    'VUVSFʜ

    View full-size slide

  102. Future Web Performance

    View full-size slide

  103. Future Web Prediction
    • ϢʔβʔΞΫγϣϯ͕ى͜Δલʹಈ͖Λ༧ଌ͠
    ͯ౤ػత࣮ߦ͢Δ
    • CDNΛ΋ͬͱΞΫςΟϒʹ࢖͏

    View full-size slide

  104. Ϣʔβʔͷಈ͖Λ༧ଌͨ͠
    ౤ػతͳઌಡΈ
    • ϨΠςϯγͷนΛ௒͑Δ
    • dev.to͸Ϣʔβʔ͕Ϛ΢εΦʔόʔͨ͠Βઌಡ
    Έͯ͠CacheʹೖΕͯΔ
    • ແݶεΫϩʔϧͰ࣍ͷϦετΛ൒෼·Ͱདྷͨ
    ΒಡΈࠐΉ

    View full-size slide

  105. Ϣʔβʔͷಈ͖Λ༧ଌͨ͠
    ౤ػతͳઌಡΈ
    • ౷ܭɾػցֶशʹΑΔϢʔβʔͷಈ͖༧ଌ
    • Personalized͞Εͨಈ͖༧ଌ
    • ϢʔβʔA͕a.htmlͱb.htmlΛݟΔ͜ͱ͕ଟͦ͏ͳ
    Β࠷ॳ͔ΒཪͰprefetch or prerender͓ͯ͘͠౳
    • https://dev.to/

    View full-size slide

  106. CDNΛ΋ͬͱΞΫςΟϒʹ࢖͏
    • Cloudinary
    • ը૾ͷ഑৴ͷ࠷దԽʹಛԽͨ͠CDN ݉ ը૾ม׵
    as a Service
    • Fastly & netlify
    • Instant Cache Purge΍APIͰͷCDNૢ࡞ͳͲɺ
    ϓϩάϥϚϑϨϯυϦʔͳCDN͕૿͑ͨɻ

    View full-size slide

  107. CDNΛ΋ͬͱΞΫςΟϒʹ࢖͏
    • Fastly ΍ NetlifyΛॳΊͱͯ͠ Instant Cache Purge
    Λ࣮૷͍ͯ͠ΔCDN͕૿͍͑ͯΔ
    • CDNʹಈతͳHTMLΛΩϟογϡͤ͞Δߦҝ΋૿͑
    ͦ͏ɻطʹdev.to͸fastlyΛ࢖ͬͯΩϟογϡͯ͠Δ
    • Cache͠ͳ͘ͱ΋ɺCDNΛ࢖͏ͱܦ࿏͕࠷దԽ͞Ε
    ΔͷͰɺܦ࿏࠷దʹΑͬͯߴ଎Խ͞ΕΔ

    View full-size slide

  108. Future Web Performance
    ·ͱΊ

    View full-size slide

  109. Web Performance 2018~
    • ͜Ε·Ͱ΍͖ͬͯͨ͜ͱ͸౰ͨΓલʹͳͬͯ
    ͍͘
    • ͞ΒʹࠩผԽΛ͍ͯ͘͠ඞཁ͕͋Δ
    • Ϣʔβʔͷಈ͖༧ଌ
    • CDNΛ΋ͬͱΞΫςΟϒʹ࢖͏

    View full-size slide

  110. ͡Ό͋๻Β͸Ͳ͏͢Δͷ͔

    View full-size slide

  111. ࠓޙͷWebͷύϑΥʔϚϯε
    ʹ௥ै͢ΔͨΊʹ͸Ͳ͏͋Δ
    ΂͖͔ɹ

    View full-size slide

  112. Ͳ͏͢Δ΂͖͔
    • ύϑΥʔϚϯε͸จԽͰ͋Δ
    • ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏
    • ࠓޙͷWebͷಈ͖Λ༧૝͠Α͏
    • Webͷ࢓༷ΛϑΥϩʔ͠Α͏

    View full-size slide

  113. ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏
    • ύϑΥʔϚϯε͸ੜ͖෺
    • ܭଌ͍ͯ͠ͳ͍ͱ͙͢ʹऑΔ
    • ύϑΥʔϚϯεʹහײͳਓΛҭͯΔඞཁ͕͋
    Δ

    View full-size slide

  114. ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏
    • ύϑΥʔϚϯεͷྼԽ΋ཱ೿ͳো֐
    • ҎԼͷͲͪΒͷຊͰ΋ύϑΥʔϚϯεͷ΢Υο
    νΛ͢Δਓͷॏཁੑʹ͍ͭͯݴٴ͍ͯ͠Δɻ

    View full-size slide

  115. ࠓޙͷWebͷಈ͖Λ༧ଌ͢Δ
    • Webͷඪ४Խ࢓༷ʹ΋৭ʑͳಈ͖͕ଟ͍
    • TC39
    • WHATWG / W3C
    • IETF
    • ͜ͷ͋ͨΓͷඪ४Խͷಈ͖Λ௥͓ͬͯ͘ͱະདྷ༧
    ૝ʹ໾ཱͭ

    View full-size slide

  116. ࠓޙͷWebͷಈ͖Λ༧ଌ͢Δ
    • ۩ମతʹ஫໨ͯ͠Δಈ͖
    • web packaging
    • QUIC
    • etc (async-dom, binary ast, observable etc)

    View full-size slide

  117. Ͳ͏͢Δ΂͖͔
    • ύϑΥʔϚϯε͸จԽͰ͋Δ
    • ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏
    • ࠓޙͷWebͷಈ͖Λ༧૝͠Α͏
    • Webͷ࢓༷ΛϑΥϩʔ͠Α͏

    View full-size slide

  118. Ͳ͏͢Δ΂͖͔
    • ύϑΥʔϚϯε͸จԽͰ͋Δ
    • ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏
    • ࠓޙͷWebͷಈ͖Λ༧૝͠Α͏
    • Webͷ࢓༷ΛϑΥϩʔ͠Α͏
    ͓ͦΒ͘͜ͷล͸֤ࣾରԠ͕ҧ͏ɺ

    ΈΜͳͷઓུ͸͜ͷޙͷΫϩετʔΫ
    ͰޠΓ߹͏༧ఆ

    View full-size slide

  119. ύϑΥʔϚϯενΣοΫϦετ
    • ύϑΥʔϚϯεͷจԽΛҭͯΔ
    • ύϑΥʔϚϯεܯ࡯Λ࡞Ζ͏
    • ਖ਼͍͠ܭଌϝτϦοΫεΛऔΔ
    • Webඪ४ԽΛϑΥϩʔ͢ΔਓΛ࡞Δ
    • ݱ࣮తͳύϑΥʔϚϯεΰʔϧΛ࡞Δ
    • RAIL
    • ύϑΥʔϚϯεͷϕʔεϥΠϯΛ࡞ΔʢԼճͬͨΒ
    ܯࠂ͢Δʣ
    • ༧ࢉʹԠͯ͡CDNͷར༻΋ݕ౼͢Δ
    • ॳظදࣔߴ଎Խ
    • JS/CSS/assetͷbundleͯ͠Δ͔Ͳ͏͔
    • asset͸ద੾ͳѹॖΛͯ͠Δ͔ʁ gzip, brotli, zopfli
    • image͸ద੾ͳϑΥʔϚοτΛͯ͠Δ͔ʁ jpg, gif,
    png, webp
    • ϨϯμϦϯάߴ଎Խ
    • SSRͷར༻Λݕ౼͢Δ
    • Code Split΋ߦ͏
    • ϨΠςϯγΛ࡟Δ
    • HTTP2Λ࢖͏
    • SPAʹ͢Δ
    • Service Workerͷར༻Λݕ౼͢Δ

    View full-size slide

  120. Ͳ͏͢Δ΂͖͔
    • ύϑΥʔϚϯε͸จԽͰ͋Δ
    • ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏
    • ࠓޙͷWebͷಈ͖Λ༧૝͠Α͏
    • Webͷ࢓༷ΛϑΥϩʔ͠Α͏
    8FCͷ໘ന͍ॴ͸
    ऴΘΓ͕ݟ͑ͳ͍ॴ

    View full-size slide

  121. Enjoy, web performance

    View full-size slide

  122. 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

    View full-size slide