Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
メタ・パフォーマンスチューニング
Yosuke Furukawa
PRO
December 15, 2020
Programming
15
6.4k
メタ・パフォーマンスチューニング
2020/12/15 @ FE Study #2
パフォーマンスチューニングの話です。
Yosuke Furukawa
PRO
December 15, 2020
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
yosuke_furukawa
PRO
1
540
yosuke_furukawa
PRO
59
18k
yosuke_furukawa
PRO
3
4k
yosuke_furukawa
PRO
69
24k
yosuke_furukawa
PRO
0
2.2k
yosuke_furukawa
PRO
0
88
yosuke_furukawa
PRO
0
39
yosuke_furukawa
PRO
0
2.1k
yosuke_furukawa
PRO
24
13k
Other Decks in Programming
See All in Programming
etagwerker
1
140
pco2699
0
100
dnskimo
8
1.5k
bosshawk
1
280
ykpythemind
0
160
ickx
3
650
hyodol2513
2
1.2k
karosuwindam
0
120
daiki_0816
0
190
ajstarks
2
760
patorash
0
150
shinnoki
0
1.1k
Featured
See All Featured
lynnandtonic
273
16k
myddelton
109
11k
erikaheidi
15
4.5k
lara
17
2.9k
bryan
100
11k
afnizarnur
178
14k
geeforr
333
29k
wjessup
340
16k
reverentgeek
167
7.3k
akmur
252
19k
shpigford
166
19k
kneath
220
15k
Transcript
ϝλɾύϑΥʔϚϯενϡʔ χϯά 2020/12/15 @FE Study #2
Twitter: @yosuke_furukawa Github: yosuke-furukawa ࠷ۙͷ׆ಈ $ISPNF"EWJTPSZ#PBSE +4$POG+1PSHBOJ[FSFUD
͜͜࠷ۙɺύϑΥʔϚϯεप Γͷߋ৽͕ଟ͍ɻ ಛʹ Web Vitals पΓɻ
Web Vitals • Google ͕ఏএ͢Δ৽͍͠ UX ͷࢦඪ • Largest Contentful
Paint • First Input Delay • Cumulative Layout Shift • ͷ3͔ͭΒͳΔɻ
Largest Contentful Paint • ϖʔδͷ࠷େͷ໘ੵΛද͖͔ࣔͬͨ͠Ͳ͏ ͔ • 2500 ms Ҏʹද͖ࣔ͠ΕͨΒ
Good • 4000 ms Ҏ্ͩͱ Poor
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF
5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF Կ͔දࣔ͞ ΕΔ·Ͱ ίϯςϯπͷதͰҰ൪େ͖͍ཁૉ͕ݟ͑Δ·Ͱ ݁ہϢʔβʔϝΠϯίϯςϯπ͕ಡ Έࠐ·ΕΔ·ͰಡΈਐΊͳ͍Ͱͬͯ Δࣄ͕ଟ͍ɻ Largest Contentful Paint
Largest Contentful Paint • LCP͕͍࣌ͷվળϙΠϯτ • αʔόͷϨεϙϯελΠϜ • JSCSSͳͲͷ render
blocking resource ͷ༗ແ • Client Side RenderingΛආ͚Δ (JS͕ϩʔυ͞Ε͔ͯΒ͡Ό ͳ͍ͱίϯςϯπ͕දࣔ͞Εͳ͍ͷͰ) • ώʔϩʔը૾ Preload ͢ΔͳͲɻ
Largest Contentful Paint • ώʔϩʔը૾ Preload ͓ͯ͘͠ͱྑ͍ɻ https://web.dev/optimize-lcp/#preload-important-resources
First Input Delay • ϖʔδ͕ೖྗʹԠͰ͖Δ·Ͱͷ࣌ؒ • 100ms Ͱ Good •
300ms ͩͱ Poor
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF
5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF දࣔͯ͠ಡΊΔΑ͏ʹͳΔ·Ͱ ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ૢ࡞த ͜ͷ࣌ؒͷဃ͕͚Ε͍΄Ͳૢ ࡞Ͱ͖ͣʹϢʔβʔͷετϨεʹͳΔ First Input Delay
First Input Delay • ͦͦಡΈࠐ·ΕͯΔJavaScriptΛݕ౼͢Δ • defer/async ͳͲͷಡΈࠐΈํͷվળ • code
split ͰJSΛ͚Δ • polyfill ͷར༻Λ߇͑ΔʢϞμϯϒϥβ͚ͷ Bundle JSΛ࡞Δ) • ΘΕͯͳ͍ JS ΛΔ • ͦΕͰͲ͏ʹͳΒͳ͍ͱ͖ WebWorker ΛͬͨΓ͢Δ ʢඈͼಓ۩ʣ
Cumulative Layout Shift • ϖʔδ͕ಡΈࠐ·Ε࢝Ί͔ͯΒྖҬ͕ͣΕͨ ߹ͷζϨ෯ͷ • 0.1 Ҏͷ Layout
Shift είΞͳΒ Good • 0.25 Ҏ্ͳΒ Poor
Cumulative Layout Shift • Layout Shift = impact friction(ͲΕ͚ͩͷେ͖ ͞ͷΤϨϝϯτ͔)
* distance friction (ͲΕͩ ͚ಈ͍͔ͨ) • Layout Shift ͷ૯͕CLS
Cumulative Layout Shift Layout Shift ϩʔυͨ͠ޙͰҐஔ͕ͣΕΔͱ༧ظ͠ ͳ͍ঢ়گʹͳΓɺϢʔβʔށ͏ɻ ϨΠΞτTUBCMFͰ͋Δ͖ɻ
Cumulative Layout Shift • Α͋͘Δͷը૾ͷॎԣ෯Λࢦఆͯ͠ͳ͍ • ಈըiframeॎ෯ԣ෯Λࢦఆͯ͠ͳ͍ • Webfont
FOUT FOIT ʹΑΓएׯϨΠΞ τγϑτ͕ى͖Δ͕࣌͋ΓɺͦΕݪҼͷ ҰͭʹͳΓ͑Δɻ
• Public CDN ͔Βαʔϒ͞ΕΔWebFont͏͍Βͳ͍͔ʁ • Cache Partitioning ʹΑΓɺ Public CDN
ͷࢫຯ͕མͪͯΔ Cumulative Layout Shift https://wicki.io/posts/2020-11-goodbye-google-fonts/
ͨͩ͜͠ΕΒͷࢦඪมΘΓಘΔ ࣄΛ࠷ॳ͔Βࣔࠦ͞Ε͍ͯΔɻ
Chrome Dev Summit Ͱૣม ΘΔ͜ͱ͕ൃද͞Ε͍ͯͨ
Web Vitals มߋ • Largest Contentful Paint: First Contentful Paintʢ࠷ॳʹCSSͷ͋ͨͬͨ
ྖҬ͕ग़Δ·Ͱͷ࣌ؒʣࢦඪʹೖΕΔɻ Progressive ͳϩʔυ͕Ͱ͖͍ͯΔ͜ͱΛݟ Δɻ
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·Ͱશ෦ૣ͘ͳΒͳ͍ͱ͍͚ͳ͍
Web Vitals มߋ • First Input Delay: γϯϓϧʹ͕࣌ؒݮΔ (50ms -
75ms) Λᮢ ͱ͢Δɻ
/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
Web Vitals มߋ • Cumulative Layout Shift: ϨϯμϦϯά࣌ͷΈͷγϑτͰͳ͘ɺظ ؒੜ͖ͯΔϖʔδ (SPAͷΑ͏ͳ)
ʹಉ͡ε ίΞΛద༻͍ͯ͘͠ɻ
Cumulative Layout Shift Layout Shift ϩʔυ͠ऴΘͬͨޙʹ-BZPVU4IJGU͕ ൃੜͨ͠߹Ͱ͋ͬͯదٓͦΕ͕ධ Ձ͞ΕΔɻ
ॳظදࣔ࣌ͰͷධՁ͔Β navigation scroll ͳͲͷ ૢ࡞ΛؚΊͨτʔλϧͷධՁ ͕伴ʹͳΔ
ͱɺ͜ͷΑ͏ʹ Core Web Vitals ͱҰޱʹݴͬͯࢦඪมΘ Δ͠ɺΔ͜ͱมΘΔɻ
աڈʹ͋ͬͨ(ࠓ͋Δ?)ࢦඪ PRPL / RAIL
WebύϑΥʔϚϯεੜ͖ ࢦඪมΘΕվળϙΠϯτ ৗʹมΘΓਐԽ͢Δ
୭ͷͨΊͷύϑΥʔϚϯεʁ
ຐ๏ͷݴ༿: ݕࡧΤϯδϯʹධՁ͞ΕΔ
ݕࡧΤϯδϯʹධՁ͞ΕΔ ͔ͩΒύϑΥʔϚϯενϡʔ χϯάΛΔɺͱ͍͏ͷख ஈͱత͕มΘͬͯΔ
ຊདྷϢʔβʔͷମݧΛ্ ͤ͞ΔͨΊʹύϑΥʔϚϯε Λ্͛Δɺͦͷ݁ՌݕࡧΤϯ δϯʹධՁ͞ΕΔ
ύϑΥʔϚϯε ϢʔβʔͷͨΊͷͷ
ύϑΥʔϚϯεੜ͖Ͱ͋ ΓɺϢʔβʔͷମݧΛ্͞ ͤΔͨΊʹߟ͑ͳ͍ͱ͍͚ͳ ͍ͷ
զʑͲ͏͢Δ͖͔ʁ
3ͭώϯτΛհ
1. ͳΔ͘ݟ͑ΔԽ͢Δɺطଘͷ ՄࢹԽπʔϧ͚ͩͰͳࣗ͘ Ͱ࡞Δ͜ͱࢹʹೖΕΔ
ݟ͑ͳ͍ͷଌΕͳ͍ ଌΕͳ͍ͷվળͰ͖ͳ͍
طଘͷπʔϧΛ͏ • SpeedCurve • Lighthouse CI • CrUX • Page
Speed Insights • etc
طଘͷπʔϧΛ͏ • ࠷ۙग़ͨͭ (AutoWebPerf)
ͪΖΜطଘͷπʔϧॏཁ ͚ͩͲɺ࠷ۙUI͕ߴԽ͠ ͍ͯΔࣄ͋Γɺ୯७ͳई ͚ͩͰΓͳ͍͜ͱ͋Δ
ՄࢹԽ͕ॏཁ • AirSHIFTͰɺϢʔβʔͷ࣮ࡍͷૢ࡞Λجʹ ͔͔ͬͨඵΛkibanaͰݟ͑ΔΑ͏ʹ͍ͯ͠ Δɻ
طଘͷπʔϧͰऔΕΔϝτϦΫε࠷ ݶඞཁͳͷͱͯ͠ɺϢʔβʔͷମݧͦ ͷͷͷύϑΥʔϚϯεΛՄࢹԽ͢Δ͜ ͱͰΑΓମݧʹ͕݁ͨ࣌ؒ͠औΕΔɻ
2. ͳΔ͘ϞμϯͳϑϨʔϜ ϫʔΫʹΔɺͰ͖ͳ͍ͳΒ ͬͯΔ͜ͱΛΔ
ϞμϯͳΑ͘ΘΕ͍ͯΔϑϨʔ ϜϫʔΫʹϕετϓϥΫςΟ εͬΆ͍͜ͱ͕٧·ͬͯΔɻ
Next.js / Nuxt.js
Next.js / Nuxt.js • JS ͷ Code Split Server
Side Rendering / Static Site Generation ͳͲͷݱͷϕετϓϥΫςΟεͬΆ͍͜ͱ ͍͍ͩͨͬͯ͘ΕΔɻ • next/link ͰಡΈࠐΈઌͷϖʔδ͕ݟ͑ͨΒɺઌಡΈ (prefetch)ͱ͔ͯ͘͠ΕΔɻ • AMP͕ built-inͰΈࠐ·Ε͍ͯͯɺ AMP ʹ͢Δ͜ͱͰ ͖Δɻ
Next.js • next/image ॎ෯ɾԣ෯Λࢦఆͤ͞Δ͜ͱͰ Layout Shift Λى͜͞ͳ͘͢Δɻ͞Βʹը૾ͷ࠷దԽΛߦ͏ ΈҰॹʹఏڙ͍ͯ͠Δ • reportWebVitals
ͰWebVitalsͷϝτϦΫε͕औΕΔɻ
3. ύϑΥʔϚϯεվળΛ ઐՈʹΑΔ৬ਓܳʹ͠ͳ͍
ύϑΥʔϚϯεվળ͕৬ਓܳ ʹͳΔͱ৬ਓ్͕ઈ͑ͨॠؒ ʹվળݟࠐΊͳ͘ͳΔɻ
εϐʔυϋοΧιϯ/ISUCON
ΣϒϑϩϯτΤϯυ͚ͩͰ Ͳ͜·ͰLighthouseͷείΞ Λ্͛ΒΕΔ͔ڝ͏େձ
ظతʹੑೳʹؔ͢ΔφϨο δΛ࣮ઓܗࣜͰஷΊΒΕΔɻ
ͳΔ͘ݟΛڞ༗͢Δɻ ͬͱݴ͏ͱจԽʹ͢Δɻ
·ͱΊ
·ͱΊ • ύϑΥʔϚϯεੜ͖ɺࢦඪมΘΕվળϙΠϯτมΘ͍ͬͯ͘ɻ • ύϑΥʔϚϯεϢʔβʔͷͨΊͷͷɻχʔζʹΑͬͯݟΔ͖ϙΠϯ τมΘΔɻ • զʑ͕Ͱ͖Δ͜ͱ • ͳΔ͘ݟ͑ΔԽ͢Δ
• ϞμϯͳϑϨʔϜϫʔΫʹΔ • ύϑΥʔϚϯεվળΛจԽʹ͢Δ
ࢀߟࢿྉ • https://web.dev/lcp/ • https://web.dev/fid/ • 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/
͋Γ͕ͱ͏͍͟͝·ͨ͠