Web Application 2018 From Performance Perspective

by Yosuke Furukawa

Slide 1

Slide 1 text

Web Application 2018 From Performance Perspective 2018/03/24 @ manabiya.tech Yosuke FURUKAWA

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

2001 2009 2010 2016 2018

Slide 4

Slide 4 text

2001 2009 2010 2016 2018 (PPE0ME8FC

Slide 5

Slide 5 text

2001 2009 2010 2016 2018 4JOHMF1BHF8FC "QQT

Slide 6

Slide 6 text

2001 2009 2010 2016 2018 &WPMWF4JOHMF1BHF "QQT

Slide 7

Slide 7 text

2001 2009 2010 2016 2018 'VUVSFʜ

Slide 8

Slide 8 text

2001 2009 2010 2016 2018 8FC"QQT9

Slide 9

Slide 9 text

Web Performance 200X

Slide 10

Slide 10 text

Performance Bible ~200X

Slide 11

Slide 11 text

Performance Bible ~200X

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Previous Web Applications

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ϦΫΤετճ਺ͷվળ • αΠτΛߴ଎ʹ͢ΔҰ൪ͷํ๏͸  ͦ΋ͦ΋ϦΫΤετ͠ͳ͍͜ͱ • ۃྗϦΫΤετ਺ΛݮΒ͢ • ex: CSSΛ1ϑΝΠϧʹɺJS΋ಉ༷ɻ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Ϩεϙϯε࣌ؒͷվળ • Improve Backend Performance • Indexing, Join, denomalize • Proper Middleware ΑΓྑ͍ϛυϧ΢ΣΞΛ࢖͏ 3FEJT NFNDBDIF %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ δϣΠϯ͢Δɺඇਖ਼نԽ͢ΔFUD

Slide 26

Slide 26 text

Ϩεϙϯε࣌ؒͷվળ • Improve Backend Performance • Indexing, Join, denomalize • Proper Middleware ΑΓྑ͍ϛυϧ΢ΣΞΛ࢖͏ 3FEJT NFNDBDIF %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ δϣΠϯ͢Δɺඇਖ਼نԽ͢ΔFUD ΞϓϦέʔγϣϯαʔόͷத਎Λ վળͯ͠ɺϨεϙϯεΛྑ͘͢Δ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Summary ~200X • Bible: • High Performance Web Sites • App: • جຊతʹϖʔδભҠ୯ҐͰ΍ΓऔΓ • Performance Techniques: • ϦΫΤετΛݮΒ͢ • JS/CSS/image Λ1ﬁleʹ͢Δɺ Inlineʹ͢ΔɺCache-ControlΛ࢖͏ • ϨεϙϯεΛվળ͢Δ • Backend ͷϨεϙϯεΛվળ͢ΔɺDBΑ͘͢Δɺద੾ͳMiddleware࢖͏ • Ϩεϙϯε͢ΔαΠζΛݮΒ͢ • ImageΛॖখ ͢ΔɺCSS/JSΛminify͢Δɺద੾ͳImage formatΛબͿɺѹॖ͢Δ

Slide 31

Slide 31 text

2001 2009 2010 2016 2018 8FC"QQT

Slide 32

Slide 32 text

Web Performance 2010-2016

Slide 33

Slide 33 text

Performance Bible 2010-2016

Slide 34

Slide 34 text

Performance Bible 2010-2016

Slide 35

Slide 35 text

Performance Bible 2010-2016 ॲཧͷத৺͕αʔό͔Βϒϥ΢β΁ ϨΠςϯγΛখ͘͞ɻ ϨΠςϯγΛԼ͛Δʹ͸ɿ ઀ଓίετΛԼ͛Δ 5$1'BTU0QFO )551 ඞཁͳσʔλ͚ͩऔͬͯࠩ෼Ͱߋ৽͢Δ 9)3 +4 ࣮ࡍͷϢʔβʔͷϞχλϦϯά݁ՌΛݟΔ 36.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

http/1.1 problems

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

4FSWFS #SPXTFSDBOTFOESFRVFTUT POMZ

Slide 59

Slide 59 text

4FSWFS OFFEUPXBJUUPpOJTIQSFWJPVTSFRVFTU

Slide 60

Slide 60 text

4FSWFS "OEJGSFRVFTUJTTMPX CSPXTFS DBOVTFPOMZSFRVFTUT

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

http/2 solves HoL Blocking

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

2001 2009 2010 2016 2018 8FC"QQT

Slide 69

Slide 69 text

Web Performance 2016-2018

Slide 70

Slide 70 text

Performance Bible 2016-2018

Slide 71

Slide 71 text

Performance Bible 2016-2018

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Service Worker • Service Worker is not optional. • Safari & Edge is already supported! • Ofﬂine & Cache is ﬁrst class web features.

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Slide 83

Slide 83 text

First View Performance

Slide 84

Slide 84 text

ͦ΋ͦ΋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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Client Side Rendering ͷΈͰͷಈ͖

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Client Side Rendering ͷΈͷ ৔߹ • ݴ͍׵͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful Paint ·Ͱ͕௕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading.. Ϣʔβʔ͸ݟ͔͑ͯΒૢ࡞͢Δ 'JSTU.FBOJOHGVM1BJOU͕ग़͔ͯΒ*OUFSBDU ͢Δ ͷͰɺ͜ͷ$MJFOU4JEF3FOEFSJOH͚ͩͰ͸࣌ؒతʹແବ͕ଟ͍ɻ

Slide 91

Slide 91 text

ͦ͜Ͱ Server Side Rendering

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

2018೥·Ͱͷ·ͱΊ

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE BCPWFUIFGPME֎ͷը૾ͷ஗ԆಡΈࠐΈ ޮ཰తͳϑΥʔϚοτͷબఆ

Slide 98

Slide 98 text

'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE +4ͷ஗Ԇϩʔυɺ+4DPEFTQMJUUJOHͳͲͰͷෆཁͳίʔυ ͷ࡟আ

Slide 99

Slide 99 text

'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE )551΍3FTPVSDF)JOUTʹΑΔϩʔυվળ

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

2001 2009 2010 2016 2018 'VUVSFʜ

Slide 102

Slide 102 text

Future Web Performance

Slide 103

Slide 103 text

ະ։ͷ஍

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

Future Web Performance ·ͱΊ

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

Ͳ͏͢Δ΂͖͔ • ύϑΥʔϚϯε͸จԽͰ͋Δ • ύϑΥʔϚϯεܯ࡯ΛҭͯΑ͏ • ࠓޙͷWebͷಈ͖Λ༧૝͠Α͏ • Webͷ࢓༷ΛϑΥϩʔ͠Α͏ ͓ͦΒ͘͜ͷล͸֤ࣾରԠ͕ҧ͏ɺ  ΈΜͳͷઓུ͸͜ͷޙͷΫϩετʔΫ ͰޠΓ߹͏༧ఆ

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

Enjoy, web performance

Slide 123

Slide 123 text

Thank you

Slide 124

Slide 124 text

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