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.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
170
Removing Corepack
yosuke_furukawa
PRO
9
1.3k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.5k
Strip Types と Storage
yosuke_furukawa
PRO
4
350
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.2k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
720
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.4k
Other Decks in Programming
See All in Programming
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
250
Go の GC の不得意な部分を克服したい
taiyow
2
770
CSC305 Lecture 26
javiergs
PRO
0
140
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
920
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
Symfony Mapper Component
soyuka
2
730
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
130
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
良いユニットテストを書こう
mototakatsu
5
1.9k
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
1k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
A Philosophy of Restraint
colly
203
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Git: the NoSQL Database
bkeepers
PRO
427
64k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Docker and Python
trallard
42
3.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
GitHub's CSS Performance
jonrohan
1030
460k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
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/
͋Γ͕ͱ͏͍͟͝·ͨ͠