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
470
夏休み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
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
様々なファイルシステム
sat
PRO
0
260
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
150
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
4
1.8k
SOTA競争から人間を超える画像認識へ
shinya7y
0
610
Retrospectiveを振り返ろう
nakasho
0
130
AI時代、“平均値”ではいられない
uhyo
8
2.7k
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
190
生成AI時代のPythonセキュリティとガバナンス
abenben
0
150
serverless team topology
_kensh
3
240
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
320
abema-trace-sampling-observability-cost-optimization
tetsuya28
0
360
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Balancing Empowerment & Direction
lara
5
700
Building Adaptive Systems
keathley
44
2.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Six Lessons from altMBA
skipperchong
29
4k
Speed Design
sergeychernyshev
32
1.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Fireside Chat
paigeccino
41
3.7k
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