Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
メタ・パフォーマンスチューニング
Search
Yosuke Furukawa
PRO
December 15, 2020
Programming
15
13k
メタ・パフォーマンスチューニング
2020/12/15 @ FE Study #2
パフォーマンスチューニングの話です。
Yosuke Furukawa
PRO
December 15, 2020
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.8k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
190
Removing Corepack
yosuke_furukawa
PRO
9
1.5k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.6k
Strip Types と Storage
yosuke_furukawa
PRO
4
370
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.4k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
750
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.8k
Other Decks in Programming
See All in Programming
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
color-scheme: light dark; を完全に理解する
uhyo
7
480
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
890
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
2.9k
Software Architecture
hschwentner
6
2.1k
Ruby on cygwin 2025-02
fd0
0
170
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Formの複雑さに立ち向かう
bmthd
1
900
CI改善もDatadogとともに
taumu
0
180
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
100
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
How to Ace a Technical Interview
jacobian
276
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Being A Developer After 40
akosma
89
590k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
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/
͋Γ͕ͱ͏͍͟͝·ͨ͠