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
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
Search
Eiji Hachiya
August 15, 2025
Technology
2
430
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
2025/08/15(金) の perf.tokyo #1 で発表した資料です
Eiji Hachiya
August 15, 2025
Tweet
Share
More Decks by Eiji Hachiya
See All by Eiji Hachiya
Angular Elementsにハマってみた/I use the Angular Elements
hachi_eiji
0
1.1k
なぜClassiはReactが盛り上がってる2017年にAngularを選択したのか?/why we use angular
hachi_eiji
2
1.7k
【Real Tech Night #2】学校教育を支えるマルチテナント/multi-tenant_in_edtech
hachi_eiji
1
290
レガシー業界の社内を変える /realtech
hachi_eiji
0
510
Other Decks in Technology
See All in Technology
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
490
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
210
o11yで育てる、強い内製開発組織
_awache
3
120
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
25
17k
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
3.7k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
200
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
2
120
20250929_QaaS_vol20
mura_shin
0
130
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
130
Azure Well-Architected Framework入門
tomokusaba
1
330
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
290
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Practical Orchestrator
shlominoach
190
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Producing Creativity
orderedlist
PRO
347
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
A better future with KSS
kneath
239
17k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Transcript
ՆٳΈWebΞϓϦ ύϑΥʔϚϯε૬ஊࣨ 2025/08/15(ۚ) perf.tokyo #1 @ϢχʔΫϏδϣϯגࣜձ༷ࣾ
ࣗݾհ • ീ୩ ӳ࣏ʢͪ ͍͑͡ʣ@hachi_eiji • WebΞϓϦέʔγϣϯΤϯδχΞ • RailsΛத৺ʹAWS,ϑϩϯτΤϯυͳͲԿͰͬͯ·͢ •
σʔλϕʔε • Ͱ͖ͳ͍ͷωΠςΟϒΞϓϦ։ൃ • Objective-CͷຊΛങͬͨʹSwift͕ൃද͞Εͯͦͬดͨ͡͠
ϥδΦͷՆٳΈ͓Έ૬ஊࣨܗࣜͰ ͕࣌ؒڐ͢ݶΓ͝հ NHKͷࢠڙՊֶి૬ஊ40ࠓͬͯΔΒ͍͠
ͦͷલͷ͓ଋ • ͋͘·ͰݸਓͷܦݧஊͰ͢ • ݱࡏɾաڈʹॴଐͨ͠اۀɾஂମͱແؔͰ͢ • Ͳ͔͜Ͱಉ͕͋ͬͨ͡ͱͯͦ͠ΕۮવͰ͢ • ͜ͷޙʹग़ͯ͘ΔϥδΦωʔϜChatGPT͕࡞ͯ͠·͢
ͦΕͰ͍ͬͯΈ·͠ΐ͏ʂ
͓Έᶃ N+1 αʔόͷಛఆͷAPIͰ͕ग़ͳ͍ΜͰ͢ɻ ౦ژ 20ࡀ ᷲγʔΧʔ
͓Έᶃ N+1 DJɿΞϓϦέʔγϣϯͷϩάΈ·͔ͨ͠ʁ ᷲɿϩάʁϩάͬͯͳΜͰ͔͢ʁ
͓Έᶃ N+1 DJɿ ͋ͬ…
͓Έᶃ N+1 ·ͣϩάΛݟ·͠ΐ͏
͓Έᶃ N+1 • ։ൃ࣌ʹϩάΛݟ͍ͯͳ͍ਓҙ֎ʹଟ͍ • ։ൃ࣌σʔλྔ͕গͳ͍ͷͰϧʔϓͷதͰ SQLΛճͯ͠ճͳͷͰؾ͔ͮͳ͍ • ORMܦ༝ͩͱ࣮ߦ͞ΕΔSQL͕ΠϝʔδͰ͖
͍ͯͳ͍ʁʢ͋͘·ͰݸਓͷഽײͰ͢ʣ • ʹؾ͍ͮͯຊ൪ϦϦʔεॳσʔλ ྔ͕গͳ͍ͷͰɺʮ࠷ॳʯʹͳΒͳ͍
͓Έᶃ N+1 • ։ൃऀ·ͣϩάΛݟΔʂʂʂ • ϩάΛඪ४ग़ྗʹग़͢ͱίϯιʔϧ͕͍ Α͘ಈ͘ͷͰؾ͖͍ͮ͢ • N+1ʹݶͬͨͰͳ͘ৗʹݟΔ
• σʔλΛ100݅ఔೖΕͯ୯ମͰAPIΛ࣮ߦ͢Δ ͱϩά͕ಈ͘ͷͰΘ͔Γ͍͢ • N+1Λݕग़͢ΔϥΠϒϥϦΛར༻͢Δ ղܾʂ
͓Έᶄ ࣾཧػೳWebΞϓϦ ͱ͖Ͳ͖͓٬͞Μ͔ΒαΠτ͕͍ͱΫϨʔϜ ͕དྷ·͢ɻͻͲ͍ͱ͖ෳ͋Δαʔόͷ 1͕μϯ͠·͢ɻ Ԭݝ 24ࡀ ͏ʹϘʔΠ
͓Έᶄ ࣾཧػೳWebΞϓϦ DJɿΞϓϦͲͷΑ͏ͳػೳ͕͋Γ·͔͢ʁ χɿސ٬͕͏ػೳͱɺސ٬͕͍࢝ΊΔͨΊʹ ηοτΞοϓ͢Δ͔ࣾΒ͔͠ΞΫηεͰ͖ͳ͍ ཧػೳͷ2͕ͭ͋Γ·͢ DJɿཧػೳͰϢʔβ࡞ϚελσʔλΛ࡞ΔΜ Ͱ͔͢ʁ χɿͦ͏Ͱ͢ɻCSVΞοϓϩʔυͰҰʹ࡞Γ·͢
͓Έᶄ ࣾཧػೳWebΞϓϦ χɿ ͋ͬ…
͓Έᶄ ࣾཧػೳWebΞϓϦ ཧػೳͱސ٬͕৮͍ͬͯΔαʔό͕ಉ͡ͳͷ ͰཧػೳͰෛՙΛ͔͚Δͱɺސ٬ଆʹӨڹ ͕ग़Δ
͓Έᶄ ࣾཧػೳWebΞϓϦ • ࣾཧػೳͱސ٬αΠτͷΞΫηεΛ ͢ΔʢผυϝΠϯɺύεͷϧʔςΟϯάʣ • ॏ͍ϑΝΠϧؔͷॲཧඇಉظॲཧͰߦ͏
͓Έᶄ ࣾཧػೳWebΞϓϦ ղܾʂ
͓Έᶅ େྔσʔλͷѻ͍ αʔϏεΛελʔτͯ͠5ʹͳΓ·͢ɻϢʔ βͷ௨ςʔϒϧ͕ઍສϨίʔυʹͳΓͦ ͏ͰɺSELECTͳͲ͕ͯ͘ࠔ͍ͬͯ·͢ɻ indexదʹషͬͯ·͢ɻ ಢݝ 30ࡀ φϚέϞϊͷޕޙ
͓Έᶅ େྔσʔλͷѻ͍ DJɿͲ͏͍͏௨͕͋ΔͷͰ͠ΐ͏ʁ ޕޙɿӡӦ͔Βͷ͓ΒͤɺଞϢʔβ͔Β ͷϝϯγϣϯࣗܨ͕͍ͬͯΔਓͷߦಈཤ ྺͳͲ༷ʑͰ͢ DJɿ௨σʔλͣͬͱ͓͖ͯ͠·͔͢ʁ ޕޙɿ͏ʔΜ… ଟ1͘Β͍ͳ͍ͱࠔΔ ͔ͳͱࢥ͍·͢
͓Έᶅ େྔσʔλͷѻ͍ • σʔλ͕ফͤΔͷͰ͋Εআ͢Δͷ͕Ұ൪Α͍ • আσʔλΛϩάͱͯ͠ετϨʔδʹอ͢Δͷ͋Γ ʢޙͰ͍߹Θ͕ͤ͋ͬͨͱ͖ͷରࡦʣ • ςʔϒϧͷύʔςΟγϣϯׂΛݕ౼͢Δ •
ྫ͑ΩʔΛϢʔβID mod 10 ʹ͢Δͱ͔ • ςʔϒϧࣗମΛผ͚Δ(ྫ: ௨_<ϢʔβID mod 10>ͱ͔) • MySQL 5.6Ͱιγϟή࡞࣮ͬͯͨ࣌ࡍʹ͜ΕΛͬͯ ͍ͨ • తຖͷ௨ςʔϒϧΛ࡞Δͷ߹ʹΑͬͯ͋Γ
͓Έᶅ େྔσʔλͷѻ͍ • σʔλͷੜଘظؒ͘มߋ͕͍͠ • τϥϒϧΛճආ͢Δʹ࠷ॳͷઃܭ͕উෛ • CRUDͷλΠϛϯάͱσʔλͷϥΠϑαΠΫ ϧΛҙࣝ͢ΔͱτϥϒϧΛճආ͍͢͠ ղܾʂ
͓Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ AWSͰApplication Load BalancerΛͬͯෳ αʔόͷߏΛऔ͍ͬͯ·͢ɻ ސ٬͔Βॲཧ͕͍͕࣌͋ΔͱݴΘΕ·͢ɻ ϩάΛݟΔͱΞΫηεྔଟ͘ͳ͍࣌ؒଳͰ ॲཧ͕͍࣌ͱ͍͕࣌͋Γ·͢ɻ Ἒݝ
30ࡀ ͔Β͋͛෦
͓Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ DJɿಉ͡APIͰॲཧ͕มΘΔΜͰ͔͢ʁ ෦ɿಉ͡ސ٬ͷಉ͡APIͰॲཧ͕࣌ؒେ͖͘มΘΓ·͢ DJɿͦͷ࣌ͷଞαʔόؚΊͨϦιʔεͲ͏͍͏ΘΕ ํΛ͍ͯ͠·͔͢ʁ ෦ɿͷαʔό͚ͩCPU༻ͳͲ্͕͕ͬͯɺଞͷ αʔόۭ͍ͯ·͢ DJɿଞͷαʔόʹΞΫηεߦͬͯ·͔͢ʁ ෦ɿ͍ɺଞαʔόʹΞΫηεۉʹߦ͍ͬͯ·͢
͓Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ ۉʹʁ ॏ͍ॲཧ͍ܰॲཧʁ
͓Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ AWS ALB (Application Load Balancer)ʹҎԼͷΞϧΰϦζϜ͕͋Δ • ϥϯυϩϏϯʢσϑΥϧτʣ •
࠷খͷະॲཧͷϦΫΤετ • ՃॏϥϯμϜ ʮϥϯυϩϏϯʯॲཧΛۉʹॱ൪௨ΓʹৼΓ͚Δઃఆɻ ͭ·Γɺॏ͍ॲཧΛ͍ͯ͠ΔαʔόʹϦΫΤετ͕ߦ͘ͱཹ͢Δɻ ઃఆΛʮ࠷খͷະॲཧͷϦΫΤετʯʹ͢ΔͱɺϦΫΤετͷ࠷গͳ͍ αʔόϦΫΤετΛૹΔͷͰɺॲཧͷཹ͕ϥϯυϩϏϯͷ࣌ΑΓݮ Δɻ (ग़యɿALBϧʔςΟϯάΞϧΰϦζϜ) ղܾʂ
͓Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμϯϩʔυ SPAͰαΠτΛ࡞͍ͬͯ·͢ɻτοϓϖʔδʹ ΞΫηεͨ࣌͠ʹμϯϩʔυ͢ΔϑΝΠϧ͕ ॏͯ͘ɺදࣔʹ͕͔͔࣌ؒΔΜͰ͢ɻ େࡕ 27ࡀ ϚάΧοϓ
͓Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμϯϩʔυ DJɿେ͖͍ϥΠϒϥϦͱ͔͔͍ͭͬͯΔͷͰ͔͢ʁ ϚάɿͳΜͱͳ͘ExcelΛ࡞ΔϥΠϒϥϦ͕ॏ͍ͷ͔ ͳʁͱࢥ͍ͬͯ·͢ɻͰτοϓϖʔδͰͬͯ ͍·ͤΜ DJɿ͍ͬͯͳ͍ͷʹɺτοϓϖʔδͰμϯϩʔ υ͍ͯ͠ΔΜͰ͔͢ʁ Ϛάɿ͍ɻίʔυ্ͰExcelͱ͍͏จࣈݟ·ͨ͠
͓Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμϯϩʔυ • ॏ͍ϥΠϒϥϦΛಛఆ͢Δ • ಈతʹϥΠϒϥϦΛimportΛ͢Δ • ݸผʹϑΝΠϧμϯϩʔυ͢Δ
͓Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμϯϩʔυ rollup-plugin-visualizerͳͲΛͬͯ ॏ͍ϥΠϒϥϦΛ֬ೝ͢Δ
ग़య: https://github.com/btd/rollup-plugin-visualizer ΛҰ෦Ճ ͓Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμϯϩʔυ
͓Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμϯϩʔυ • ࠓճτοϓϖʔδ͔Βμϯϩʔυͯ͘͠Δ JSʹExcelϑΝΠϧੜϥΠϒϥϦͱֆจࣈϥΠ ϒϥϦ͕͋ͬͨ • ͜ΕΒΛಈతʹimportͯ͠ɺvite(※1)ͷJSϑΝΠ ϧׂํ๏Ͱɺॏ͍JS୯ಠϑΝΠϧʹ͢Δɻ •
ඞཁͳ࣌ʹͦͷϑΝΠϧ͚ͩμϯϩʔυͰ ͖Δ ※1 vite: ϑϩϯτΤϯυϏϧυπʔϧ https://ja.vite.dev/ ղܾʂ
ࠓճ͜͜·Ͱ
େͳͷܧଓͯ͠มԽΛܭଌ͢Δ͜ͱ • 1िؒ୯Ґɺ1ϲ݄୯ҐͳͲܧଓͯ͠มԽΛܭଌ͢Δ • ੑೳྼԽ͢ΔͷϢʔβ͕ར༻͍ͯ͠ΔূڌͰ͋Γɺܾͯ͠ѱ͍͜ͱ Ͱͳ͍ • ͦΕΛ์ஔ͍ͯ͠ΔͱΑΓհͳʹͳΔ • νϡʔχϯάલޙͷܭଌΛΕͣʹΖ͏
ͦͷݪҼɾमਖ਼͋ͬͯΔʁΛৗʹߟ͑Δ • मਖ਼͍ͯ͘͠ͱҶͮΔࣜʹ৭ʑग़͖ͯͯɺਅͷݪҼ͕ҧ͏͜ͱ͋Δ • νϡʔχϯάதʹ։ൃ͕ਐΜͰߦ͘ͱɺमਖ਼Ҋ͕มΘΔ͜ͱ͕͋Δ • मਖ਼͕όάʹͳΒͳ͍Α͏ʹςετ͕ॻ͚ΔͷςετΛॻ͜͏ • मਖ਼͍ͯ͠Δ͜ͱΛυΩϡϝϯτʹͯ͠ΈΜͳʹڞ༗͠Α͏ •
पΓ͔ΒͷϑΟʔυόοΫεΩϧΞοϓظ
None
࠷ޙʹΈͳ͞Μ
None