メタ・パフォーマンスチューニング

by Yosuke Furukawa

Slide 1

Slide 1 text

ϝλɾύϑΥʔϚϯενϡʔ χϯά 2020/12/15 @FE Study #2

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa ࠷ۙͷ׆ಈ $ISPNF"EWJTPSZ#PBSE +4$POG+1PSHBOJ[FSFUD

Slide 3

Slide 3 text

͜͜࠷ۙɺύϑΥʔϚϯεप Γͷߋ৽͕ଟ͍ɻ ಛʹ Web Vitals पΓɻ

Slide 4

Slide 4 text

Web Vitals • Google ͕ఏএ͢Δ৽͍͠ UX ͷࢦඪ • Largest Contentful Paint • First Input Delay • Cumulative Layout Shift • ͷ3͔ͭΒͳΔɻ

Slide 5

Slide 5 text

Largest Contentful Paint • ϖʔδ಺ͷ࠷େͷ໘ੵΛද͖͔ࣔͬͨ͠Ͳ͏ ͔ • 2500 ms Ҏ಺ʹද͖ࣔ͠ΕͨΒ Good • 4000 ms Ҏ্ͩͱ Poor

Slide 6

Slide 6 text

/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF 5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF Կ͔දࣔ͞ ΕΔ·Ͱ ίϯςϯπͷதͰҰ൪େ͖͍ཁૉ͕ݟ͑Δ·Ͱ ݁ہϢʔβʔ͸ϝΠϯίϯςϯπ͕ಡ Έࠐ·ΕΔ·ͰಡΈਐΊͳ͍Ͱ଴ͬͯ Δࣄ͕ଟ͍ɻ Largest Contentful Paint

Slide 7

Slide 7 text

Largest Contentful Paint • LCP͕஗͍࣌ͷվળϙΠϯτ • αʔόͷϨεϙϯελΠϜ • JS΍CSSͳͲͷ render blocking resource ͷ༗ແ • Client Side RenderingΛආ͚Δ (JS͕ϩʔυ͞Ε͔ͯΒ͡Ό ͳ͍ͱίϯςϯπ͕දࣔ͞Εͳ͍ͷͰ) • ώʔϩʔը૾͸ Preload ͢ΔͳͲɻ

Slide 8

Slide 8 text

Largest Contentful Paint • ώʔϩʔը૾͸ Preload ͓ͯ͘͠ͱྑ͍ɻ https://web.dev/optimize-lcp/#preload-important-resources

Slide 9

Slide 9 text

First Input Delay • ϖʔδ͕ೖྗʹ൓ԠͰ͖Δ·Ͱͷ࣌ؒ • 100ms Ͱ Good • 300ms ͩͱ Poor

Slide 10

Slide 10 text

/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF 5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF දࣔͯ͠ಡΊΔΑ͏ʹͳΔ·Ͱ ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ૢ࡞த ͜ͷ࣌ؒͷဃ཭͕௕͚Ε͹௕͍΄Ͳૢ ࡞Ͱ͖ͣʹϢʔβʔͷετϨεʹͳΔ First Input Delay

Slide 11

Slide 11 text

First Input Delay • ͦ΋ͦ΋ಡΈࠐ·ΕͯΔJavaScriptΛݕ౼͢Δ • defer/async ͳͲͷಡΈࠐΈํͷվળ • code split ͰJSΛ෼͚Δ • polyﬁll ͷར༻Λ߇͑ΔʢϞμϯϒϥ΢β޲͚ͷ Bundle JSΛ࡞Δ) • ࢖ΘΕͯͳ͍ JS Λ࡟Δ • ͦΕͰ΋Ͳ͏ʹ΋ͳΒͳ͍ͱ͖͸ WebWorker Λ࢖ͬͨΓ͢Δ ʢඈͼಓ۩ʣ

Slide 12

Slide 12 text

Cumulative Layout Shift • ϖʔδ͕ಡΈࠐ·Ε࢝Ί͔ͯΒྖҬ͕ͣΕͨ ৔߹ͷζϨ෯ͷ࿨ • 0.1 Ҏ಺ͷ Layout Shift είΞͳΒ Good • 0.25 Ҏ্ͳΒ Poor

Slide 13

Slide 13 text

Cumulative Layout Shift • Layout Shift = impact friction(ͲΕ͚ͩͷେ͖ ͞ͷΤϨϝϯτ͔) * distance friction (ͲΕͩ ͚ಈ͍͔ͨ) • Layout Shift ͷ૯࿨͕CLS

Slide 14

Slide 14 text

Cumulative Layout Shift Layout Shift ϩʔυͨ͠ޙͰҐஔ͕ͣΕΔͱ༧ظ͠ ͳ͍ঢ়گʹͳΓɺϢʔβʔ͸ށ࿭͏ɻ ϨΠΞ΢τ͸TUBCMFͰ͋Δ΂͖ɻ

Slide 15

Slide 15 text

Cumulative Layout Shift • Α͋͘Δͷ͸ը૾ͷॎԣ෯Λࢦఆͯ͠ͳ͍ • ಈը΍iframe΋ॎ෯΍ԣ෯Λࢦఆͯ͠ͳ͍ • Webfont ΋ FOUT ΍ FOIT ʹΑΓएׯϨΠΞ ΢τγϑτ͕ى͖Δ͕࣌͋ΓɺͦΕ΋ݪҼͷ ҰͭʹͳΓ͑Δɻ

Slide 16

Slide 16 text

• Public CDN ͔Βαʔϒ͞ΕΔWebFont͸΋͏͍Βͳ͍͔΋ʁ • Cache Partitioning ʹΑΓɺ Public CDN ͷࢫຯ͕མͪͯΔ Cumulative Layout Shift https://wicki.io/posts/2020-11-goodbye-google-fonts/

Slide 17

Slide 17 text

ͨͩ͜͠ΕΒͷࢦඪ͸มΘΓಘΔ ࣄΛ࠷ॳ͔Βࣔࠦ͞Ε͍ͯΔɻ

Slide 18

Slide 18 text

Chrome Dev Summit Ͱ΋ૣ଎ม ΘΔ͜ͱ͕ൃද͞Ε͍ͯͨ

Slide 19

Slide 19 text

Web Vitals มߋ఺ • Largest Contentful Paint: First Contentful Paintʢ࠷ॳʹCSSͷ͋ͨͬͨ ྖҬ͕ग़Δ·Ͱͷ࣌ؒʣ΋ࢦඪʹೖΕΔɻ Progressive ͳϩʔυ͕Ͱ͖͍ͯΔ͜ͱΛݟ Δɻ

Slide 20

Slide 20 text

Web Vitals มߋ఺ • Progressive Loading /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF 5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF Կ͔දࣔ͞ΕΔ·Ͱ ίϯςϯπͷதͰҰ൪େ͖͍ཁૉ͕ݟ͑Δ·Ͱ શମͰධՁ͞ΕΔΑ͏ʹͳΔɻ-$1͚ͩ ૣ͚Ε͹Α͍Θ͚Ͱ͸ͳ͘ɺ࠷ॳ͔Β -$1·Ͱશ෦ૣ͘ͳΒͳ͍ͱ͍͚ͳ͍

Slide 21

Slide 21 text

Web Vitals มߋ఺ • First Input Delay: γϯϓϧʹ͕࣌ؒݮΔ (50ms - 75ms) Λᮢ஋ ͱ͢Δɻ

Slide 22

Slide 22 text

/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF 5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF දࣔͯ͠ಡΊΔΑ͏ʹͳΔ·Ͱ ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ૢ࡞த NT͸௕͗ͨ͢ɻ UJMFͰNTͰ΋໰୊ͳͦ͞͏ ͳͷͰɺͦͪΒʹϑΥʔΧεΛ౰ͯΔ First Input Delay

Slide 23

Slide 23 text

Web Vitals มߋ఺ • Cumulative Layout Shift: ϨϯμϦϯά࣌ͷΈͷγϑτͰ͸ͳ͘ɺ௕ظ ؒੜ͖ͯΔϖʔδ (SPAͷΑ͏ͳ) ʹ΋ಉ͡ε ίΞΛద༻͍ͯ͘͠ɻ

Slide 24

Slide 24 text

Cumulative Layout Shift Layout Shift ϩʔυ͠ऴΘͬͨޙʹ-BZPVU4IJGU͕ ൃੜͨ͠৔߹Ͱ͋ͬͯ΋దٓͦΕ͕ධ Ձ͞ΕΔɻ

Slide 25

Slide 25 text

ॳظදࣔ࣌఺ͰͷධՁ͔Β navigation ΍ scroll ͳͲͷ ૢ࡞ΛؚΊͨτʔλϧͷධՁ ͕伴ʹͳΔ

Slide 26

Slide 26 text

ͱɺ͜ͷΑ͏ʹ Core Web Vitals ͱҰޱʹݴͬͯ΋ࢦඪ΋มΘ Δ͠ɺ΍Δ͜ͱ΋มΘΔɻ

Slide 27

Slide 27 text

աڈʹ͋ͬͨ(ࠓ΋͋Δ?)ࢦඪ PRPL / RAIL

Slide 28

Slide 28 text

WebύϑΥʔϚϯε͸ੜ͖෺ ࢦඪ΋มΘΕ͹վળϙΠϯτ ΋ৗʹมΘΓਐԽ͢Δ

Slide 29

Slide 29 text

୭ͷͨΊͷύϑΥʔϚϯεʁ

Slide 30

Slide 30 text

ຐ๏ͷݴ༿: ݕࡧΤϯδϯʹධՁ͞ΕΔ

Slide 31

Slide 31 text

ݕࡧΤϯδϯʹධՁ͞ΕΔ ͔ͩΒύϑΥʔϚϯενϡʔ χϯάΛ΍Δɺͱ͍͏ͷ͸ख ஈͱ໨త͕มΘͬͯΔ

Slide 32

Slide 32 text

ຊདྷ͸ϢʔβʔͷମݧΛ޲্ ͤ͞ΔͨΊʹύϑΥʔϚϯε Λ্͛Δɺͦͷ݁ՌݕࡧΤϯ δϯʹ΋ධՁ͞ΕΔ

Slide 33

Slide 33 text

ύϑΥʔϚϯε͸ ϢʔβʔͷͨΊͷ΋ͷ

Slide 34

Slide 34 text

ύϑΥʔϚϯε͸ੜ͖෺Ͱ͋ ΓɺϢʔβʔͷମݧΛ޲্͞ ͤΔͨΊʹߟ͑ͳ͍ͱ͍͚ͳ ͍΋ͷ

Slide 35

Slide 35 text

զʑ͸Ͳ͏͢Δ΂͖͔ʁ

Slide 36

Slide 36 text

3ͭώϯτΛ঺հ

Slide 37

Slide 37 text

1. ͳΔ΂͘ݟ͑ΔԽ͢Δɺطଘͷ ՄࢹԽπʔϧ͚ͩͰ͸ͳࣗ͘෼ Ͱ࡞Δ͜ͱ΋ࢹ໺ʹೖΕΔ

Slide 38

Slide 38 text

ݟ͑ͳ͍΋ͷ͸ଌΕͳ͍ ଌΕͳ͍΋ͷ͸վળͰ͖ͳ͍

Slide 39

Slide 39 text

طଘͷπʔϧΛ࢖͏ • SpeedCurve • Lighthouse CI • CrUX • Page Speed Insights • etc

Slide 40

Slide 40 text

طଘͷπʔϧΛ࢖͏ • ࠷ۙग़ͨ΍ͭ (AutoWebPerf)

Slide 41

Slide 41 text

΋ͪΖΜطଘͷπʔϧ΋ॏཁ ͚ͩͲɺ࠷ۙ͸UI͕ߴ౓Խ͠ ͍ͯΔࣄ΋͋Γɺ୯७ͳई౓ ͚ͩͰ͸଍Γͳ͍͜ͱ΋͋Δ

Slide 42

Slide 42 text

ՄࢹԽ͕ॏཁ • AirSHIFTͰ͸ɺϢʔβʔͷ࣮ࡍͷૢ࡞Λجʹ ͔͔ͬͨඵ਺ΛkibanaͰݟ͑ΔΑ͏ʹ͍ͯ͠ Δɻ

Slide 43

Slide 43 text

طଘͷπʔϧͰऔΕΔϝτϦΫε͸࠷௿ ݶඞཁͳ΋ͷͱͯ͠ɺϢʔβʔͷମݧͦ ͷ΋ͷͷύϑΥʔϚϯεΛՄࢹԽ͢Δ͜ ͱͰΑΓମݧʹ௚͕݁ͨ࣌ؒ͠औΕΔɻ

Slide 44

Slide 44 text

2. ͳΔ΂͘ϞμϯͳϑϨʔϜ ϫʔΫʹ৐ΔɺͰ͖ͳ͍ͳΒ ΍ͬͯΔ͜ͱΛ஌Δ

Slide 45

Slide 45 text

ϞμϯͳΑ͘࢖ΘΕ͍ͯΔϑϨʔ ϜϫʔΫʹ͸ϕετϓϥΫςΟ εͬΆ͍͜ͱ͕٧·ͬͯΔɻ

Slide 46

Slide 46 text

Next.js / Nuxt.js

Slide 47

Slide 47 text

Next.js / Nuxt.js • JS ͷ Code Split ΍ Server Side Rendering / Static Site Generation ͳͲͷݱ୅ͷϕετϓϥΫςΟεͬΆ͍͜ͱ͸ ͍͍ͩͨ΍ͬͯ͘ΕΔɻ • next/link ͰಡΈࠐΈઌͷϖʔδ͕ݟ͑ͨΒɺઌಡΈ (prefetch)ͱ͔΋ͯ͘͠ΕΔɻ • AMP͕ built-inͰ૊Έࠐ·Ε͍ͯͯɺ AMP ʹ͢Δ͜ͱ΋Ͱ ͖Δɻ

Slide 48

Slide 48 text

Next.js • next/image ॎ෯ɾԣ෯Λࢦఆͤ͞Δ͜ͱͰ Layout Shift Λى͜͞ͳ͘͢Δɻ͞Βʹը૾ͷ࠷దԽΛߦ͏࢓ ૊Έ΋Ұॹʹఏڙ͍ͯ͠Δ • reportWebVitals ͰWebVitalsͷϝτϦΫε͕औΕΔɻ

Slide 49

Slide 49 text

3. ύϑΥʔϚϯεվળΛ ઐ໳ՈʹΑΔ৬ਓܳʹ͠ͳ͍

Slide 50

Slide 50 text

ύϑΥʔϚϯεվળ͕৬ਓܳ ʹͳΔͱ৬ਓ్͕ઈ͑ͨॠؒ ʹվળ͸ݟࠐΊͳ͘ͳΔɻ

Slide 51

Slide 51 text

εϐʔυϋοΧιϯ/ISUCON

Slide 52

Slide 52 text

΢ΣϒϑϩϯτΤϯυ͚ͩͰ Ͳ͜·ͰLighthouseͷείΞ Λ্͛ΒΕΔ͔ڝ͏େձ

Slide 53

Slide 53 text

୹ظతʹੑೳʹؔ͢ΔφϨο δΛ࣮ઓܗࣜͰஷΊΒΕΔɻ

Slide 54

Slide 54 text

ͳΔ΂͘஌ݟΛڞ༗͢Δɻ ΋ͬͱݴ͏ͱจԽʹ͢Δɻ

Slide 55

Slide 55 text

·ͱΊ

Slide 56

Slide 56 text

·ͱΊ • ύϑΥʔϚϯε͸ੜ͖෺ɺࢦඪ΋มΘΕ͹վળϙΠϯτ΋มΘ͍ͬͯ͘ɻ • ύϑΥʔϚϯε͸ϢʔβʔͷͨΊͷ΋ͷɻχʔζʹΑͬͯݟΔ΂͖ϙΠϯ τ΋มΘΔɻ • զʑ͕Ͱ͖Δ͜ͱ • ͳΔ΂͘ݟ͑ΔԽ͢Δ • ϞμϯͳϑϨʔϜϫʔΫʹ৐Δ • ύϑΥʔϚϯεվળΛจԽʹ͢Δ

Slide 57

Slide 57 text

ࢀߟࢿྉ • https://web.dev/lcp/ • https://web.dev/ﬁd/ • https://web.dev/cls/ • https://web.dev/optimize-lcp/#preload-important-resources • https://wicki.io/posts/2020-11-goodbye-google-fonts/ • https://ja.nuxtjs.org/ • https://nextjs.org/ • https://nextjs.org/docs/advanced-features/measuring-performance • https://nextjs.org/docs/basic-features/image-optimization • https://recruit-tech.co.jp/blog/2020/01/29/wow-the-beauty-speed-hackathon/ • http://isucon.net/

Slide 58

Slide 58 text

͋Γ͕ͱ͏͍͟͝·ͨ͠