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
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
150
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.4k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.3k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
270
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.9k
Strip Types と Storage
yosuke_furukawa
PRO
4
430
Module Harmony について
yosuke_furukawa
PRO
3
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
Cursorハンズオン実践!
eltociear
1
390
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
350
止められない医療アプリ、そっと Swift 6 へ
medley
1
130
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
160
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
210
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
210
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
790
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
960
Serena MCPのすすめ
wadakatu
4
930
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Documentation Writing (for coders)
carmenintech
75
5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Statistics for Hackers
jakevdp
799
220k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
BBQ
matthewcrist
89
9.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Rails Girls Zürich Keynote
gr2m
95
14k
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/
͋Γ͕ͱ͏͍͟͝·ͨ͠