「jsconf.eu 報告会 Performance Empathy 編」 @ノード学園34時限目

by tomonari_t

Slide 1

Slide 1 text

JSConfEU XࢀՃใࠂ 2019.06.27 ∁ڮ ஌੒ Performance Empathyฤ NodeֶԂ34࣌ݶ໨

Slide 2

Slide 2 text

w "JSγϑτͱ͍͏ϓϩμΫτͰಇ͍͍ͯ·͢ w ݸਓతʹؔ৺ͷ͋Δٕज़ w ࠓճ͕ॳͷւ֎ςοΫΧϯϑΝϨϯεࢀՃͰͨ͠ ∁ڮ ஌੒ (GitHub: tomonari-t)

Slide 3

Slide 3 text

+4$POGͷτʔΫ಺༰ w +4ͷ৽ύοέʔδϚωʔδϟʔ w 8FC"TTFNCMZ w 4UFODJMKT ٕज़த৺ͷτʔΫ͚ͩͰͳ͘ ৭ʑͳλΠϓͷτʔΫ͕͋ͬͨΧϯϑΝϨϯ εͰͨ͠ɻ w ଟ໘ମ w #BCZ%SJWFO%FWFMPQNFOU w 4IBQFPG8FC ͨ͘͞Μ঺հ͍ͨ͠ͷ͋Δ͚Ͳɾɾɾ

Slide 4

Slide 4 text

ʮళ௕͞Μͷ൑அҎ֎ͷ࣌ؒΛ̌ʹʯ "JSγϑτ

Slide 5

Slide 5 text

ύϑΥʔϚϯεͷݱঢ় ͳͥύϑΥʔϚϯε͸େࣄͳͷ͔ ྫ͑͹ .# ίϯςϯπ͕දࣔ͞ΕΔ·Ͱ ਺ඵ͔͔Δ͜ͱ΋ ཭୤ ৴པײΛଛͳ͏ Ϣʔβʔମݧʹ௚݁͢Δ $43

Slide 6

Slide 6 text

ύϑΥʔϚϯεͷݱঢ় ͳͥύϑΥʔϚϯε͸େࣄͳͷ͔ ྫ͑͹ .# ίϯςϯπ͕දࣔ͞ΕΔ·Ͱ ਺ඵ͔͔Δ͜ͱ΋ ݟΔલʹ཭୤ ৴པײΛଛͳ͏ ࢖͍ʹ͍͘ Ҏ্ͷαΠτ͕.#Ҏ্ͷ+4Λಧ͚͍ͯΔ CJUMZCZUFTKTRVFSZ PSJHJOT ࣌఺Ͱͷ3FBDU "OHVMBS 7VFΛ࢖͍ͬͯΔͷϞόΠϧαΠτͷ͢΂ͯͷεΫϦϓτ GSPN)551"SDIJWF

Slide 7

Slide 7 text

ύϑΥʔϚϯε͸̍൪ͷ༏ઌ ࣄ߲ͱͳ͍ͬͯͳ͍ ྫ͑͹̎ͭͷγφϦΦ ͋Δ೔ΞΠσΟΞΛࢥ͍ͭ͘ ࣮ݱํ๏ʹ͍ͭͯ͠Β΂Δ ࡞Γ࢝ΊΔ ৽νʔϜʹࢀՃ νʔϜͷίʔυΛಡΈղ͘ ύονλεΫΛ࣮૷͢Δ

Slide 8

Slide 8 text

ύϑΥʔϚϯε͸̍൪ͷ༏ઌ ࣄ߲ͱͳ͍ͬͯͳ͍ ྫ͑͹̎ͭͷγφϦΦ ৽νʔϜʹࢀՃ νʔϜͷίʔυΛಡΈղ͘ ύονλεΫΛ࣮૷͢Δ ࠷খͷ࿑ྗͰ͢͹΍͘࡞Δ͔͕ ༏ઌࣄ߲

Slide 9

Slide 9 text

ύϑΥʔϚϯε͸̍൪ͷ༏ઌ ࣄ߲ͱͳ͍ͬͯͳ͍ ྫ͑͹̎ͭͷγφϦΦ ࠷খͷ࿑ྗͰ͢͹΍͘࡞Δ͔͕ ༏ઌࣄ߲ ࠷ॳͷίϛοτ͕ͲΕ΄Ͳ ύϑΥʔϚϯεʹ౰ͯΔ͔ ߟ͑ͳ͍

Slide 10

Slide 10 text

ύϑΥʔϚϯε͸̍൪ͷ༏ઌ ࣄ߲ͱͳ͍ͬͯͳ͍ ࠷খͷ࿑ྗͰ͢͹΍͘࡞Δ͔ ࠷ॳͷύον͕ͲΕ΄Ͳ ύϑΥʔϚϯεʹ౰ͯΔ͔ ߟ͑ΒΕͯΔʁ ྫ͑͹̎ͭͷγφϦΦ ϓϩμΫτ͕੒௕͍ͯ͘͠தͰ ։ൃελʔτ Yճ໨ͷϦϦʔε ύϑΥʔϚϯε͸ޙճ͠ ໰୊ʹؾͮ͘ͷ͕ࣄޙ

Slide 11

Slide 11 text

ݱঢ়Λվળ͢ΔͨΊʹ w σϑΥϧτͳ΋ͷΛ࢖͏ʢ%FGBVMUʣ w ύϑΥʔϚϯεόδΣοτΛӡ༻͢Δʢ(VBSE3BJMTʣ w ύϑΥʔϚϯεφϨοδΛ֫ಘ͢Δ

Slide 12

Slide 12 text

σϑΥϧτʢσϑΝΫτʣ πʔϧΛ࢖͏

Slide 13

Slide 13 text

σϑΥϧτͷ"1* ϒϥ΢β͕σϑΥϧτͰ΍ͬͯ͘ΕΔʢΑ͏ʹʣͳΔ͜ͱ -B[ZMPBEJOH ը૾ɺJGSBNFΛඞཁʹͳͬͨͱ͖ʹಡΈࠐΉ ஗ԆಡΈࠐΈ දࣔྖҬ

Slide 14

Slide 14 text

σϑΥϧτͷ"1* ϒϥ΢β͕σϑΥϧτͰ΍ͬͯ͘ΕΔʢΑ͏ʹʣͳΔ͜ͱ WJSUVBMTDSPMMFS ඞཁͳ෦෼͚ͩϨϯμϦϯά

Slide 15

Slide 15 text

ύϑΥʔϚϯεόδΣοτΛ ӡ༻͢Δ Α͋͘Δͷ͕ վળͯ͠͠͹Β͘͢Δͱ ػೳ௥ՃʹΑΓ؇΍͔ʹѱԽ

Slide 16

Slide 16 text

ύϑΥʔϚϯεόδΣοτΛ ӡ༻͢Δ ύϑΥʔϚϯεόδΣοτ ύϑΥʔϚϯεʹؔ࿈ͨ͠ج४Λઃఆ͠ z஌Βͳ͍͏ͪʹѱԽzΛ๷͝͏ʢΨʔυʣ

Slide 17

Slide 17 text

ύϑΥʔϚϯε όδΣοτ • ύϑΥʔϚϯε͕डೖՄೳ͔Λ൑அ͢Δج४ IUUQTNFEJVNDPN!BEEZPTNBOJNFBTVSFPQUJNJ[FNPOJUPSFF • Ұఆͷൣғɺᮢ஋ʹ͓͞·͍ͬͯΔʢNJMFTUPOFʣ • ڝ߹ɾաڈൺֱͰѱԽ܏޲ʹͳ͍͔ʢSVMFTʣ • ύϑΥʔϚϯεείΞʢSVMFTʣ • ϖʔδͷαΠζʢ2VBOUJUZʣ IUUQTBEEZPTNBOJDPNCMPHQFSGPSNBODFCVEHFUT !T@BSBJ͞Μ͔Β͓आΓ͠·ͨ͠

Slide 18

Slide 18 text

ύϑΥʔϚϯε όδΣοτʢࢀߟ̍ʣ ͷ͜Γʢ,#ʣ ػೳ#ͷ௥Ճʹඞཁʢ,#ʣ ػೳ"Ͱར༻͍ͯ͠Δʢ,#ʣ ༧ࢉશମʢ,#ʣ શମ ,#ͷ༧ࢉ ػೳ"ͷͨΊʹ ,#ར༻ ػೳ#࣮ݱͷͨΊ ,#ඞཁ ,#Λࢧग़ͯ͠Ϣʔβʔମݧʹม͑Δ ༧ࢉͷ࢒Γ ,#͔Β ,# ࢖ͬͯػೳ#Λ࣮૷ ༧ࢉͷ࢒Γ͸ ,# !T@BSBJ͞Μ͔Β͓आΓ͠·ͨ͠

Slide 19

Slide 19 text

ύϑΥʔϚϯε όδΣοτʢࢀߟ̎ʣ ͷ͜Γʢ,#ʣ ػೳ#Ͱར༻தʢ,#ʣ ػೳ"Ͱར༻தʢ,#ʣ ༧ࢉશମʢ,#ʣ શମ ,#ͷ༧ࢉ ػೳ$ ͷ௥Ճʹ ,#ඞཁ ༧ࢉͷ࢒Γ͸,#ͳͷͰ ,# ෆ଍͍ͯ͠Δ • ػೳ"Λ΍Ίͯ༧ࢉΛ֬อ͢Δ • ·ͨ͸࠷దԽͯ͠ར༻αΠζΛݮΒ ͯ͠,#֬อ͢Δ • ·ͨ͸ ,#ෛ࠴ͱ࣮ͯ͠૷ • ·ͨ͸ ஗ԆಡΈࠐΈ͢Δ !T@BSBJ͞Μ͔Β͓आΓ͠·ͨ͠

Slide 20

Slide 20 text

https://web.dev/performance-budgets-101 ෳ਺ͷࢦඪΛઃఆ͢Δ

Slide 21

Slide 21 text

ྫ͑͹ ύϑΥʔϚϯεόδΣοτΛ,#ͱઃఆ ػೳ"ͷͨΊʹ,# ػೳ#ͷͨΊʹ,# ৽ػೳ௥ՃͰ,#ඞཁ ༧ࢉ,#௒ա " ύϑΥʔϚϯεվળΛͯ͠,#೧ग़ # ػೳ#Λ΍Ίͯ৽ػೳΛ͍ΕΔ $ ෛ࠴ͱͯ͠৽ػೳΛ͍ΕΔ ػೳ",# ػೳ#,# ࢒,# -JHIUIPVTF

Slide 22

Slide 22 text

φϨοδΛ֫ಘ͢Δ Ϟμϯͳ8FCΛߏங͢ΔͨΊ ͷυΩϡϝϯτ͕·ͱ·͍ͬͯ Δ 3FBDUͰ଎͍"QQΛߏங͢ Δํ๏ ΞΫηαϏϦςΟ ύϑΥʔϚϯεόδΣοτ ͷಋೖํ๏

Slide 23

Slide 23 text

φϨοδΛ֫ಘ͢Δ IUUQTHJUIVCDPN(PPHMF$ISPNFMJHIUIPVTFTUBDLQBDLT 4UBDL1BDL -JHIUIPVTF͕ɺͲΜͳٕज़ ελοΫͰ࡞ΒΕ͍ͯΔ͔Λ ݕ஌ͦ͠Εʹదͨ͠۩ମతͳ ղܾํ๏Λఏࣔͯ͘͠ΕΔ 8PSE1SFTT͕ 3FBDU ".1͕

Slide 24

Slide 24 text

·ͱΊ w σϑΥϧτͳ΋ͷΛ࢖͏ w ΨΠυͱͳΔࢦඪʢόδΣοτʣΛܾΊͯӡ༻͢Δ w ۩ମతͳ)PX͸zXFCEFWzͳͲΛ೷͍ͯΈΑ͏ w ύϑΥʔϚϯεʹରͯ͠ͷʮ৘ใൃ৴ΛڧΊ͍ͯͧ͘ʂʯ ͱͷ͜ͱͩͬͨͷͰzXFCEFWzͳͲΛ͜Ε͔Β஫ࢹͯ͠ ͍͘ͱ৘ใ͕ॆ࣮͍͖ͯͦ͠͏

Slide 25

Slide 25 text

ࢀՃͨ͠ײ૝ w +4$POG&6͸ྑ͔ͬͨʂʢདྷ೥͸͓ٳΈͳͷ͕࢒೦ʣ w μΠόʔγςΟʔ΁ͷҙ͕ࣝͱͯ΋ߴ͔ͬͨ w ొஃऀ΍ࢀՃऀͱͷڑ཭͕͔ۙͬͨ

Slide 26

Slide 26 text

JSConfEU XࢀՃใࠂ 2019.06.27 ∁ڮ ஌੒ Performance Empathyฤ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ JSConfEU XࢀՃใࠂ Performance Empathyฤ NodeֶԂ34࣌ݶ໨