夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio

by Eiji Hachiya

Slide 1

Slide 1 text

ՆٳΈWebΞϓϦ ύϑΥʔϚϯε૬ஊࣨ 2025/08/15(ۚ) perf.tokyo #1 @ϢχʔΫϏδϣϯגࣜձ༷ࣾ

Slide 2

Slide 2 text

ࣗݾ঺հ • ീ୩ ӳ࣏ʢ͸ͪ΍ ͍͑͡ʣ@hachi_eiji • WebΞϓϦέʔγϣϯΤϯδχΞ • RailsΛத৺ʹAWS,ϑϩϯτΤϯυͳͲԿͰ΋΍ͬͯ·͢ • ޷෺͸σʔλϕʔε • Ͱ͖ͳ͍΋ͷ͸ωΠςΟϒΞϓϦ։ൃ • Objective-CͷຊΛങͬͨ౰೔ʹSwift͕ൃද͞Εͯͦͬดͨ͡͠

Slide 3

Slide 3 text

ϥδΦͷՆٳΈ͓೰Έ૬ஊࣨܗࣜͰ ͕࣌ؒڐ͢ݶΓ͝঺հ NHKͷࢠڙՊֶి࿩૬ஊ͸40೥ࠓ΋΍ͬͯΔΒ͍͠

Slide 4

Slide 4 text

ͦͷલͷ͓໿ଋ • ͋͘·Ͱ΋ݸਓͷܦݧஊͰ͢ • ݱࡏɾաڈʹॴଐͨ͠اۀɾஂମͱ͸ແؔ܎Ͱ͢ • Ͳ͔͜Ͱಉ͡࿩͕͋ͬͨͱͯ͠΋ͦΕ͸ۮવͰ͢ • ͜ͷޙʹग़ͯ͘ΔϥδΦωʔϜ͸ChatGPT͕࡞੒ͯ͠·͢

Slide 5

Slide 5 text

ͦΕͰ͸͍ͬͯΈ·͠ΐ͏ʂ

Slide 6

Slide 6 text

͓೰Έᶃ N+1 ໰୊ αʔόͷಛఆͷAPIͰ଎౓͕ग़ͳ͍ΜͰ͢ɻ ౦ژ౎ 20ࡀ ੕ᷲγʔΧʔ

Slide 7

Slide 7 text

͓೰Έᶃ N+1 ໰୊ DJɿΞϓϦέʔγϣϯͷϩάΈ·͔ͨ͠ʁ ੕ᷲɿϩάʁϩάͬͯͳΜͰ͔͢ʁ

Slide 8

Slide 8 text

͓೰Έᶃ N+1 ໰୊ DJɿ ͋ͬ…

Slide 9

Slide 9 text

͓೰Έᶃ N+1 ໰୊ ·ͣϩάΛݟ·͠ΐ͏

Slide 10

Slide 10 text

͓೰Έᶃ N+1 ໰୊ • ։ൃ࣌ʹϩάΛݟ͍ͯͳ͍ਓ͸ҙ֎ʹଟ͍ • ։ൃ࣌͸σʔλྔ͕গͳ͍ͷͰϧʔϓͷதͰ SQLΛճͯ͠΋਺ճͳͷͰؾ͔ͮͳ͍ • ORMܦ༝ͩͱ࣮ߦ͞ΕΔSQL͕ΠϝʔδͰ͖ ͍ͯͳ͍ʁʢ͋͘·Ͱ΋ݸਓͷഽײͰ͢ʣ • ໰୊ʹؾ͍ͮͯ΋ຊ൪ϦϦʔε౰ॳ͸σʔλ ྔ͕গͳ͍ͷͰɺʮ࠷ॳ͸ʯ໰୊ʹͳΒͳ͍

Slide 11

Slide 11 text

͓೰Έᶃ N+1 ໰୊ • ։ൃऀ͸·ͣϩάΛݟΔʂʂʂ • ϩάΛඪ४ग़ྗʹग़͢ͱίϯιʔϧ͕੎͍ Α͘ಈ͘ͷͰؾ͖ͮ΍͍͢ • N+1໰୊ʹݶͬͨ࿩Ͱ͸ͳ͘ৗʹݟΔ • σʔλΛ100݅ఔೖΕͯ୯ମͰAPIΛ࣮ߦ͢Δ ͱϩά͕ಈ͘ͷͰΘ͔Γ΍͍͢ • N+1໰୊Λݕग़͢ΔϥΠϒϥϦΛར༻͢Δ ղܾʂ

Slide 12

Slide 12 text

͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ ͱ͖Ͳ͖͓٬͞Μ͔ΒαΠτ͕஗͍ͱΫϨʔϜ ͕དྷ·͢ɻͻͲ͍ͱ͖͸ෳ਺୆͋Δαʔόͷ಺ 1୆͕μ΢ϯ͠·͢ɻ ෱Ԭݝ 24ࡀ ͏ʹϘʔΠ

Slide 13

Slide 13 text

͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ DJɿΞϓϦ͸ͲͷΑ͏ͳػೳ͕͋Γ·͔͢ʁ ΢χɿސ٬͕࢖͏ػೳͱɺސ٬͕࢖͍࢝ΊΔͨΊʹ ηοτΞοϓ͢Δࣾ಺͔Β͔͠ΞΫηεͰ͖ͳ͍؅ ཧػೳͷ2͕ͭ͋Γ·͢ DJɿ؅ཧػೳͰϢʔβ࡞੒΍ϚελσʔλΛ࡞ΔΜ Ͱ͔͢ʁ ΢χɿͦ͏Ͱ͢ɻCSVΞοϓϩʔυͰҰ౓ʹ࡞Γ·͢

Slide 14

Slide 14 text

͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ ΢χɿ ͋ͬ…

Slide 15

Slide 15 text

͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ ؅ཧػೳͱސ٬͕৮͍ͬͯΔαʔό͕ಉ͡ͳͷ Ͱ؅ཧػೳͰෛՙΛ͔͚Δͱɺސ٬ଆʹ΋Өڹ ͕ग़Δ

Slide 16

Slide 16 text

͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ • ࣾ಺؅ཧػೳͱސ٬αΠτͷΞΫηεΛ෼཭ ͢ΔʢผυϝΠϯɺύεͷϧʔςΟϯάʣ • ॏ͍ϑΝΠϧؔ܎ͷॲཧ͸ඇಉظॲཧͰߦ͏

Slide 17

Slide 17 text

͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ ղܾʂ

Slide 18

Slide 18 text

͓೰Έᶅ େྔσʔλͷѻ͍ αʔϏεΛελʔτͯ͠5೥ʹͳΓ·͢ɻϢʔ β΁ͷ௨஌ςʔϒϧ͕਺ઍສϨίʔυʹͳΓͦ ͏ͰɺSELECTͳͲ͕஗ͯ͘ࠔ͍ͬͯ·͢ɻ index͸ద੾ʹషͬͯ·͢ɻ ಢ໦ݝ 30ࡀ φϚέϞϊͷޕޙ

Slide 19

Slide 19 text

͓೰Έᶅ େྔσʔλͷѻ͍ DJɿͲ͏͍͏௨஌͕͋ΔͷͰ͠ΐ͏ʁ ޕޙɿӡӦ͔Βͷ͓஌Βͤ΍ɺଞϢʔβ͔Β ͷϝϯγϣϯ΍ࣗ෼΍ܨ͕͍ͬͯΔਓͷߦಈཤ ྺͳͲ༷ʑͰ͢ DJɿ௨஌σʔλ͸ͣͬͱ࢒͓͖ͯ͠·͔͢ʁ ޕޙɿ͏ʔΜ… ଟ෼1೥෼͘Β͍͸ͳ͍ͱࠔΔ ͔ͳͱࢥ͍·͢

Slide 20

Slide 20 text

͓೰Έᶅ େྔσʔλͷѻ͍ • σʔλ͕ফͤΔͷͰ͋Ε͹࡟আ͢Δͷ͕Ұ൪Α͍ • ࡟আσʔλΛϩάͱͯ͠ετϨʔδʹอ؅͢Δͷ΋͋Γ ʢޙͰ໰͍߹Θ͕ͤ͋ͬͨͱ͖ͷରࡦʣ • ςʔϒϧͷύʔςΟγϣϯ෼ׂΛݕ౼͢Δ • ྫ͑͹ΩʔΛϢʔβID mod 10 ʹ͢Δͱ͔ • ςʔϒϧࣗମΛผ͚Δ(ྫ: ௨஌_<ϢʔβID mod 10>ͱ͔) • MySQL 5.6Ͱιγϟή࡞ͬͯͨ࣌͸࣮ࡍʹ͜ΕΛ΍ͬͯ ͍ͨ • ໨తຖͷ௨஌ςʔϒϧΛ࡞Δͷ΋৔߹ʹΑͬͯ͸͋Γ

Slide 21

Slide 21 text

͓೰Έᶅ େྔσʔλͷѻ͍ • σʔλͷੜଘظؒ͸௕͘มߋ͕೉͍͠ • τϥϒϧΛճආ͢Δʹ͸࠷ॳͷઃܭ͕উෛ • CRUDͷλΠϛϯάͱσʔλͷϥΠϑαΠΫ ϧΛҙࣝ͢ΔͱτϥϒϧΛճආ͠΍͍͢ ղܾʂ

Slide 22

Slide 22 text

͓೰Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ AWSͰApplication Load BalancerΛ࢖ͬͯෳ਺ ୆αʔόͷߏ੒Λऔ͍ͬͯ·͢ɻ ސ٬͔Βॲཧ͕஗͍͕࣌͋ΔͱݴΘΕ·͢ɻ ϩάΛݟΔͱΞΫηεྔ͸ଟ͘ͳ͍࣌ؒଳͰ΋ ॲཧ͕஗͍࣌ͱ଎͍͕࣌͋Γ·͢ɻ Ἒ৓ݝ 30ࡀ ͔Β͋͛෦௕

Slide 23

Slide 23 text

͓೰Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ DJɿಉ͡APIͰ΋ॲཧ͕มΘΔΜͰ͔͢ʁ ෦௕ɿಉ͡ސ٬ͷಉ͡APIͰ΋ॲཧ͕࣌ؒେ͖͘มΘΓ·͢ DJɿͦͷ࣌ͷଞαʔό΋ؚΊͨϦιʔε͸Ͳ͏͍͏࢖ΘΕ ํΛ͍ͯ͠·͔͢ʁ ෦௕ɿ໰୊ͷαʔό͚ͩCPU࢖༻཰ͳͲ্͕͕ͬͯɺଞͷ αʔό͸ۭ͍ͯ·͢ DJɿଞͷαʔόʹΞΫηεߦͬͯ·͔͢ʁ ෦௕ɿ͸͍ɺଞαʔόʹΞΫηε͸ۉ౳ʹߦ͍ͬͯ·͢

Slide 24

Slide 24 text

͓೰Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ ۉ౳ʹʁ ॏ͍ॲཧ΋͍ܰॲཧ΋ʁ

Slide 25

Slide 25 text

͓೰Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ AWS ALB (Application Load Balancer)ʹ͸ҎԼͷΞϧΰϦζϜ͕͋Δ • ϥ΢ϯυϩϏϯʢσϑΥϧτʣ • ࠷খͷະॲཧͷϦΫΤετ • ՃॏϥϯμϜ ʮϥ΢ϯυϩϏϯʯ͸ॲཧΛۉ౳ʹॱ൪௨ΓʹৼΓ෼͚Δઃఆɻ ͭ·Γɺॏ͍ॲཧΛ͍ͯ͠ΔαʔόʹϦΫΤετ͕ߦ͘ͱ଺ཹ͢Δɻ ઃఆΛʮ࠷খͷະॲཧͷϦΫΤετʯʹ͢ΔͱɺϦΫΤετͷ࠷΋গͳ͍ αʔό΁ϦΫΤετΛૹΔͷͰɺॲཧͷ଺ཹ͕ϥ΢ϯυϩϏϯͷ࣌ΑΓݮ Δɻ (ग़యɿALBϧʔςΟϯάΞϧΰϦζϜ) ղܾʂ

Slide 26

Slide 26 text

͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ SPAͰαΠτΛ࡞͍ͬͯ·͢ɻτοϓϖʔδʹ ΞΫηεͨ࣌͠ʹμ΢ϯϩʔυ͢ΔϑΝΠϧ͕ ॏͯ͘ɺදࣔʹ͕͔͔࣌ؒΔΜͰ͢ɻ େࡕ෎ 27ࡀ ϚάΧοϓ

Slide 27

Slide 27 text

͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ DJɿେ͖͍ϥΠϒϥϦͱ͔͔͍ͭͬͯΔͷͰ͔͢ʁ ϚάɿͳΜͱͳ͘ExcelΛ࡞ΔϥΠϒϥϦ͕ॏ͍ͷ͔ ͳʁͱࢥ͍ͬͯ·͢ɻͰ΋τοϓϖʔδͰ͸࢖ͬͯ ͍·ͤΜ DJɿ࢖͍ͬͯͳ͍ͷʹɺτοϓϖʔδͰμ΢ϯϩʔ υ͍ͯ͠ΔΜͰ͔͢ʁ Ϛάɿ͸͍ɻίʔυ্ͰExcelͱ͍͏จࣈ͸ݟ·ͨ͠

Slide 28

Slide 28 text

͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ • ॏ͍ϥΠϒϥϦΛಛఆ͢Δ • ಈతʹϥΠϒϥϦΛimportΛ͢Δ • ݸผʹϑΝΠϧμ΢ϯϩʔυ͢Δ

Slide 29

Slide 29 text

͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ rollup-plugin-visualizerͳͲΛ࢖ͬͯ ॏ͍ϥΠϒϥϦΛ֬ೝ͢Δ

Slide 30

Slide 30 text

ग़య: https://github.com/btd/rollup-plugin-visualizer ΛҰ෦Ճ޻ ͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ

Slide 31

Slide 31 text

͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ • ࠓճ͸τοϓϖʔδ͔Βμ΢ϯϩʔυͯ͘͠Δ JSʹExcelϑΝΠϧੜ੒ϥΠϒϥϦͱֆจࣈϥΠ ϒϥϦ͕͋ͬͨ • ͜ΕΒΛಈతʹimportͯ͠ɺvite(※1)ͷJSϑΝΠ ϧ෼ׂํ๏Ͱɺॏ͍JS͸୯ಠϑΝΠϧʹ͢Δɻ • ඞཁͳ࣌ʹͦͷϑΝΠϧ͚ͩμ΢ϯϩʔυͰ ͖Δ ※1 vite: ϑϩϯτΤϯυϏϧυπʔϧ https://ja.vite.dev/ ղܾʂ

Slide 32

Slide 32 text

ࠓճ͸͜͜·Ͱ

Slide 33

Slide 33 text

େ੾ͳͷ͸ܧଓͯ͠มԽΛܭଌ͢Δ͜ͱ • 1िؒ୯Ґɺ1ϲ݄୯ҐͳͲܧଓͯ͠มԽΛܭଌ͢Δ • ੑೳྼԽ͢Δͷ͸Ϣʔβ͕ར༻͍ͯ͠ΔূڌͰ͋Γɺܾͯ͠ѱ͍͜ͱ Ͱ͸ͳ͍ • ͦΕΛ์ஔ͍ͯ͠ΔͱΑΓ໽հͳ໰୊ʹͳΔ • νϡʔχϯάલޙͷܭଌΛ๨Εͣʹ΍Ζ͏

Slide 34

Slide 34 text

ͦͷݪҼɾमਖ਼͋ͬͯΔʁΛৗʹߟ͑Δ • मਖ਼͍ͯ͘͠ͱҶͮΔࣜʹ৭ʑग़͖ͯͯɺਅͷݪҼ͕ҧ͏͜ͱ͸͋Δ • νϡʔχϯάதʹ։ൃ͕ਐΜͰߦ͘ͱɺमਖ਼Ҋ͕มΘΔ͜ͱ͕͋Δ • मਖ਼͕όάʹͳΒͳ͍Α͏ʹςετ͕ॻ͚Δ΋ͷ͸ςετΛॻ͜͏ • मਖ਼͍ͯ͠Δ͜ͱΛυΩϡϝϯτʹͯ͠ΈΜͳʹڞ༗͠Α͏ • पΓ͔ΒͷϑΟʔυόοΫ΍εΩϧΞοϓ΋ظ଴