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
Reactのパフォーマンス改善例
Search
rakus frontend
May 22, 2024
Technology
0
480
Reactのパフォーマンス改善例
rakus frontend
May 22, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
47
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
710
日付をもう少し真面目に勉強中
rakus_fe
0
41
React19 β をざっと見る
rakus_fe
0
300
Typescript5.4の新機能
rakus_fe
0
270
非破壊的な配列メソッド
rakus_fe
0
330
ココがすごいぜ!Playwright Component Test
rakus_fe
0
490
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
230
Other Decks in Technology
See All in Technology
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
420
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
210
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
210
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
3
330
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
AWS CDKの仕組み / how-aws-cdk-works
gotok365
9
440
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
250
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
920
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
140
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
130
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
KATA
mclloyd
30
14k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Gamification - CAS2011
davidbonilla
81
5.4k
A better future with KSS
kneath
238
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Transcript
ReactͷύϑΥʔϚϯεվળྫ
ࠓͷ͓ https://web.dev/articles/rail?hl=ja
RAILϞσϧͱ RAILGoogleࣾͷ։ൃऀͰ͋Δ Ilya Grigorik ࢯ͕ఏ এͨ͠ύϑΥʔϚϯεϞσϧͰ͢ɻ ग़యɿWebϑϩϯτΤϯυϋΠύϑΥʔϚϯενϡʔχϯά RAILɺResponse, Animation, Idle,
Loadͷ֤୯ޠͷ ಄จࣈΛऔ໊͚ͬͯΒΕ·ͨ͠ɻ RAILɺϢʔβʔΛத৺ͱͨ͠ύϑΥʔϚϯεϞσϧ Λඪᒗ͠·͢ɻ
ࠓͷ͓ https://web.dev/articles/rail?hl=ja 👉
Responseͱ ResponseɺϢʔβʔ͕ԿΒ͔ͷΞΫγϣϯʹର͠ ͯΣϒϖʔδ͕ϢʔβʔΠϯλʔϑΣΠε্ͷมԽ ΛҾ͖ىͯ͜͠ɺԠ͢Δ·Ͱͷ࣌ؒΛࢦ͠·͢ɻ
Responseͱ
Responseͱ 👉 Googleఏএඪ
Responseͱ 👉 ݱ࣮తͳඪ
ϥΫεϓϩμΫτʹ͓͚Δ 500ߦͷςʔϒϧ
ϥΫεϓϩμΫτʹ͓͚Δ (ms) 1ճ 2ճ 3ճ 4ճ 5ճ 6ճ 7ճ 8ճ
9ճ 10ճ res 2306 2698 2523 3122 2546 2472 2382 2872 2619 2465 2659ms 75ύʔηϯλΠϧ
ϘτϧωοΫௐࠪ React Developer Tools
ෆཁͳϨϯμϦϯάͷݮ ίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞Εͨཧ༝Λ ϩάग़ྗͯ͘͠ΕΔϥΠϒϥϦ https://github.com/welldone-software/why-did-you-render
ෆཁͳϨϯμϦϯάͷݮ install vite.config.ts main.tsx
ෆཁͳϨϯμϦϯάͷݮ
ෆཁͳϨϯμϦϯάͷݮ ؔςʔϒϧηϧίϯϙʔωϯτͷϝϞԽΛߦ͏
ෆཁͳϨϯμϦϯάͷݮ ͪΐͬͱͨ͠ίʔυͷॻ͖ํͷҧ͍Ͱ ϝϞԽ͕ޮ͔ͳ͘ͳΔͨΊҙ͢Δ 👎 👍
ෆཁͳϨϯμϦϯάͷݮ ͪΐͬͱͨ͠ίʔυͷॻ͖ํͷҧ͍Ͱ ϝϞԽ͕ޮ͔ͳ͘ͳΔͨΊҙ͢Δ
ෆཁͳϨϯμϦϯάͷݮ
ෆཁͳϨϯμϦϯάͷݮ վળલ վળޙ
ύϑΥʔϚϯεൺֱ (ms) 1ճ 2ճ 3ճ 4ճ 5ճ 6ճ 7ճ 8ճ
9ճ 10ճ վળલ 2306 2698 2523 3122 2546 2472 2382 2872 2619 2465 վળޙ 465 481 503 562 561 479 545 483 498 491 2659ms 524ms 🎉
վળલ վળޙ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠