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
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
290
CSC305 Lecture 06
javiergs
PRO
0
250
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
320
品質ワークショップをやってみた
nealle
0
570
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
490
Six and a half ridiculous things to do with Quarkus
hollycummins
0
190
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
620
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
740
Leading Effective Engineering Teams in the AI Era
addyosmani
7
510
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
310
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Rails Girls Zürich Keynote
gr2m
95
14k
The Cult of Friendly URLs
andyhume
79
6.6k
Optimizing for Happiness
mojombo
379
70k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Speed Design
sergeychernyshev
32
1.2k
Statistics for Hackers
jakevdp
799
220k
Producing Creativity
orderedlist
PRO
347
40k
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/
͋Γ͕ͱ͏͍͟͝·ͨ͠