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
700
日付をもう少し真面目に勉強中
rakus_fe
0
35
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
220
Other Decks in Technology
See All in Technology
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
110
本が全く読めなかった過去の自分へ
genshun9
0
710
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
510
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
0
110
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
230
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
120
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
370
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
590
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
180
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
250
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
600
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Embracing the Ebb and Flow
colly
86
4.7k
A designer walks into a library…
pauljervisheath
207
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Scaling GitHub
holman
459
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
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 🎉
վળલ վળޙ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠