Performance as a Product Feature

by Leonard Chin

Slide 1

Slide 1 text

Performance as Product Feature A Talk by Leonard Chin / ϨΦ @ Kaigi on Rails 2021

Slide 2

Slide 2 text

👋͜Μʹͪ͸ ϨΦ -FPOBSE$IJO 🇦🇺 3VCZJTU #BLFS $MJNCFS ΫοΫύουגࣜձࣾॴଐ ˠΫοΫύουϚʔτ5FDI-FBE 5XJUUFS!MDIJO(JU)VCMO

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ຖ೔ָ͕͘͠ͳΔɺ৯ࡐళɻ ࣄۀͷಛ௃ w ࣗલͰྲྀ௨ωοτϫʔΫΛఏڙ w ϚϯγϣϯɺίϯϏχͳͲੜ׆ ڌ఺ͷઐ༻ྫྷଂݿʹಧ͚Δ w ౦ژɾਆಸ઒Λத৺ʹల։ ΫοΫύουϚʔτ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ࠓ೔ͷ࿩ ϓϩμΫτ։ൃʹ͓͚ΔύϑΥʔϚϯεͱͷ෇͖߹͍ํ 8IZ ͳͥύϑΥʔϚϯεΛվળ͢Δͷ͔ 8IBU ԿͷύϑΥʔϚϯεΛվળ͢Δͷ͔ 8IFSF Ͳ͜ʹ౤ࢿ͢Δͷ͔ 8IFO ͍ͭύϑΥʔϚϯεΛߟ͑Δͷ͔ 8IP ύϑΥʔϚϯε͸୭ͷ੹೚ͳͷ͔

Slide 7

Slide 7 text

💁  HOWʹ͍ͭͯ஌Γ͍ͨํ͸ ڈ೥ͷKaigi on Rails 2020ͷ ࠇ༵͞ΜͷൃදΛ͝ཡ͍ͩ͘͞ ύϑΥʔϚϯεվળͷ)08ͷ࿩͸͠ͳ͍

Slide 8

Slide 8 text

ͳͥ ύϑΥʔϚϯεΛվળ͢Δͷ͔ 1

Slide 9

Slide 9 text

ϓϩμΫτ։ൃͷ໨త ʹ ϢʔβʔՁ஋ͷ࠷େԽ

Slide 10

Slide 10 text

w $73ɺ$53 w (.7 w %"6ɺ."6ɺ w ଺ࡏ࣌ؒ FUD ࣄۀʹΑ༷ͬͯʑ ϢʔβʔՁ஋ͷ݁Ռ͸ ࣄۀ,1*ʹ୅ସͯ͠ ܭଌͰ͖Δ

Slide 11

Slide 11 text

ࣗ໰ࣗ౴Ͱߟ͑Δ γεςϜɾػೳͷύϑΥʔϚϯεͱࣄۀKPIͷؔ܎Λ୳Δ ϢʔβʔମݧͷΫϦςΟΧϧύε͸͋Δͷ͔ʁ w FHϢʔβʔΦϯϘʔσΟϯάͷྲྀΕˠ৽نొ࿥$73 w FHϗʔϜը໘ىಈ࣌ؒˠ཭୤ɺϦςϯγϣϯ

Slide 12

Slide 12 text

ԿͷύϑΥʔϚϯεΛ վળ͢Δͷ͔ 2

Slide 13

Slide 13 text

4FSWJDF-FWFMఆٛ ࣄۀKPIͱ૬ؔੑͷ͋Δࢦඪʹམͱ͠ࠐΉ 4FSWJDF-FWFM*OEJDBUPS 4-* w αʔϏεϨϕϧͷࢦඪ 4FSWJDF-FWFM0CKFDUJWF 4-0 w 4-*ͷ໨ඪ஋   ҰൠతʹɺϨΠςϯγʔɺՄ༻ੑɺΤϥʔ ཰ɺεϧʔϓοτͳͲΛ4-*ͱ͢Δ

Slide 14

Slide 14 text

1FSGPSNBODF޲͚4-*4-0ͷఆٛ ϨΠςϯγʔ ࠷௿ݶͷఆٛ͸γεςϜͷϨΠςϯγʔ w ҰൠతʹฏۉͰ͸ͳ͘ɺQɺQ ࣄۀ,1*ͷʮΫϦςΟΧϧύεʯʹ͋ΔػೳʹߜΔͱͳ͓Α͍ w FHىಈ࣌"1*܊ͷQϨΠςϯγʔ w FHϢʔβʔΦϯϘʔσΟϯάؔ࿈FOEQPJOUͷQϨΠςϯγʔ

Slide 15

Slide 15 text

4-0%PDVNFOU ఏҊࢿྉ w ߹ҙܗ੒ΛಘΔͨΊʹɺࢿྉʹམͱ͠ ࠐΉ w ࣄۀ੒௕ʹ߹Θͤͯɺఆظతʹݟ௚͢ ςϯϓϨʔτɿ43&8PSLCPPL ʮ&YBNQMF4-0%PDVNFOUʯ https://sre.google/workbook/slo-document/

Slide 16

Slide 16 text

ͯ͞ɺ ଥ౰ͷϨΠςϯγʔSLO͸ͲΕ͘Β͍ʁ

Slide 17

Slide 17 text

from "Time Is Money", Tammy Everts (2016, O'Reilly) Almost half of all online shoppers say they will abandon a page that takes more than 2 seconds to load.

Slide 18

Slide 18 text

Steve Souders in "High Performance Web SItes" (2007, O'Reilly) 80%–90% of the end user response time is spent on the frontend. Start there.

Slide 19

Slide 19 text

&OEUP&OE͕େࣄ ϨΠςϯγʔSLO ϑϩϯτΤϯυ͔ΒݟͯɺαʔόʔଆͷΛٯࢉ͢ΔɻܭଌͰ͖Δͱϕετ͕ͩɺ ೉͍͠৔߹͸Ұൠ࿦Λग़ൃʹͰ͖Δ w 8FCͩͱׂϑϩϯτΤϯυଆɺׂ̎αʔόʔଆ w ඵҎ಺Λ໨ࢦ͢ͳΒɺϨΠςϯγʔ4-0͸໿NT

Slide 20

Slide 20 text

4-0Ԡ༻ύϑΥʔϚϯε໰୊ͷτϦΞʔδ ύϑΥʔϚϯεɾνϡʔχϯά࣮ࢪͷ൑அج४΁ ঢ়گ ରॲ 4-0ҧ൓ঢ়گʹؔΘΒͣ ػೳ͕࢖͍෺ʹͳ͍ͬͯͳ͍ ো֐ͱಉҰѻ͍ ࠓ͙͢௚͢ 4-0ҧ൓͍ͯ͠Δ ػೳ։ൃͱಉҰѻ͍ ༏ઌ౓ઃఆͯ͠मਖ਼ 4-0ҧ൓͍ͯ͠ͳ͍ ରԠ͠ͳͯ͘Α͍ ͋͘·ͰDIPSF

Slide 21

Slide 21 text

Ͳ͜ʹ౤ࢿ͢Δͷ͔ 3

Slide 22

Slide 22 text

ΤϯδχΞͷ࣌ؒʢਓ݅අʣΛͲ͏࢖͏ ৽نػೳ վળ τϨʔυΦϑ͕ൃੜ w ৽͍͠Ձ஋ʢֶͼʣΛੜΈग़͢ ͨΊͷ৽ن։ൃ͔ʁ w طଘͷՁ஋Λ૿΍ͨ͢Ίʹɺվ ળ͢Δ͔ʁ Ͱ͖Ε͹ɺલऀΛબͼ͍͕ͨʜ

Slide 23

Slide 23 text

ύϑΥʔϚϯεվળͷखஈ खஈ ಺༰ ΞϓϦέʔγϣϯमਖ਼ ҰൠతͳύϑΥʔϚϯεɾνϡʔχϯά ΞϧΰϦζϜվળɺ%#ΫΤϦʔͷվળɺ/ΫΤϦʔͷղফɺΩϟο γϡͳͲ ΞʔΩςΫνϟมߋ σʔλઃܭɺϛυϧ΢ΣΞͷมߋɺγεςϜશମͷΞʔΩςΫνϟΛม͑ Δ εέʔϧΞ΢τ ΞϓϦέʔγϣϯɾαʔόʔɺσʔλϕʔεͷ୆਺Λ૿΍͢ εέʔϧΞοϓ ΑΓߴ͍ੑೳʢ$16ɺϝϞϦʔʣͷαʔόʔɺσʔλϕʔεʹஔ͖׵͑Δ

Slide 24

Slide 24 text

ύϑΥʔϚϯεվળͷखஈ Ϋϥ΢υ࣌୅ͷίετൺֱ εέʔϧΞ΢τ εέʔϧΞοϓ ΞϓϦέʔγϣϯमਖ਼ ΞʔΩςΫνϟมߋ αʔόʔඅ ਓ݅අ ߴ͍ ߴ͍ ௿͍ ௿͍

Slide 25

Slide 25 text

ਓ݅අ͸αʔόʔඅΑΓߴ͍ ಛʹ৽نࣄۀͷ৔߹ WT ʙສԁ݄ "84ͷ৔߹ YSHYMBSHF %# YYMBSHF &$"QQ Ұਓ ʙສԁ݄

Slide 26

Slide 26 text

ద੾ͳΩϟύγςΟϓϥϯχϯά ҰൠతʹɺγεςϜͷΩϟύγςΟ͸ͲΕ΄Ͳͷεϧʔϓοτʹ଱͑ΒΕΔ͜ͱɻ w ඵؒϦΫΤετ਺Ͱܭଌ w ΞϓϦέʔγϣϯͷਐԽͰͲΜͲΜมΘΔ w Ϣʔβʔಈ޲ͷมԽͰͲΜͲΜมΘΔ w ࣄۀͷ੒௕ͰͲΜͲΜ଍Γͳ͘ͳΔ ࣮͸͚ͬ͜͏೉͍͠

Slide 27

Slide 27 text

ෛՙࢼݧ w ࣄલʹγεςϜߏ੒ͷΩϟύγςΟݶ քΛ஌Δ།Ұͷखஈ w ຊ൪؀ڥ͔ͦΕʹ͍ۙ؀ڥ w ϢʔβʔߦಈΛ೺Ѳͨ͠γφϦΦͮ͘ Γ w "SUJMMFSZ (BUMJOH ,ͳͲ044ଟ਺͋ Γ https://techlife.cookpad.com/entry/ 2020/10/22/180000

Slide 28

Slide 28 text

աڈ࣮੷͕ਅ࣮ w ຊ൪Ͱ͔͠ຊ౰ͷ͜ͱ͕Θ͔Βͳ͍ w ϨΠςϯγʔɺεϧʔϓοτͷաڈ࣮੷ΛݟΔ͜ͱ͸ෆՄܽ

Slide 29

Slide 29 text

https://twitter.com/dhh/status/1381637590055542789

Slide 30

Slide 30 text

͋Γ͕ͪͳΩϟύγςΟ൑அϛε w ϫʔΧʔΩϡʔ͕ແݶʹ৳ͼͯ͠ ·ͬͨ w ΞϓϦαʔόʔ૿΍͢ʂ

Slide 31

Slide 31 text

σʔλϕʔεͷঢ়گ͸࠷༏ઌ w ߹ซ঱ͷ৔߹͸ͳ͔ͳ͔൑அ͕ ೉͍͠ w %#ΫΤϦʔ͕஗͘ͳΔͱɺଞͷ ਺஋ʢϫʔΧʔچɺ3FBEFSͳ Ͳʣ΋ڰ͏

Slide 32

Slide 32 text

ΩϟύγςΟෆ଍ͷओͳ঱ঢ় ঱ঢ় ΩϟύγςΟͷมߋ ΞϓϦέʔγϣϯͷมߋ 8SJUFS%#$16 %#εέʔϧΞοϓ 8SJUFS΁ͷ༨ܭͳ3FBEΛݮΒ͢ ΞʔΩςΫνϟมߋ 3FBEFS%#$16 %#εέʔϧΞ΢τ ʢ3FBEFS୆਺Λ૿΍͢ʣ 4MPX2VFSZ /௵͠ 3FRVFTUTJO"QQ 8PSLFS2VFVF "QQεέʔϧΞ΢τ   ʢΞϓϦαʔόʔ୆਺Λ૿΍͢ʣ ύʔϑΥʔϚϯεվળશൠ "QQ$16 "QQεέʔϧΞ΢τ ϫʔΧʔ਺มߋ "QQ.FNPSZ "QQεέʔϧΞοϓ ϝϞϦʔϦʔΫ௵͠ɺ0CKFDUΛݮΒ͢ ϫʔΧʔ਺มߋ

Slide 33

Slide 33 text

αʔόʔ୆ϫʔΧʔ਺ͷܭࢉ Unicorn, PumaͳͲ ϫʔΧʔ਺͕ద੾Ͱͳ͍ͱɺΞϓϦ ୆਺ௐ੔͕೉͘͠ͳΔ w ݪଇɺ$16ɺϫʔΧʔ w *0଴ͪ %#ɺ௨৴ɺͳͲʣͰ $16͕JEMFʹͳͬͯ͠·͏ w *0଴ͪͰผͷϫʔΧʔʹ$16Λ ৡΕ͹ɺϫʔΧʔ਺$16਺ https://qiita.com/k5trismegistus/items/ d63b453f27981e7864e7

Slide 34

Slide 34 text

ϫʔΧʔ਺ͷܭࢉͷԠ༻ w *0WT$16࣌ؒ͸Ͳ͔͜Βʁ w "1. 4DPVU /FX3FMJDFUD w 3BJMTBQQMJDBUJPOMPH "DUJWF3FDPSEUJNFd*0 w ࣌ؒ࣠Ͱܭࢉͯ͠άϥϑʹग़͢ w ࣌ؒଳ΍ΞΫηεύλʔϯͰม ಈ͢ΔͨΊ

Slide 35

Slide 35 text

εϧʔϓοτͱαʔόʔ୆਺ͷ໨҆ DBϦιʔε͕५୔ͷ৔߹ w αʔόʔຖͷϫʔΧʔ਺ / ɺ໨ඪεϧʔϓοτ 5 w 8PSLFS͋ͨΓεϧʔϓοτ U ฏۉϨΠςϯγ - ߹ΘͤΔͱɺ "QQαʔόʔ୆਺5-/ FH5SFRT -T /ͷ৔߹͸୆

Slide 36

Slide 36 text

ΩϟύγςΟϓϥϯχϯάͷίπ w εέʔϧΞ΢τɺεέʔϧΞοϓʹ΋ίετ͕൐͏ w ಛʹεέʔϧΞοϓ w ΤϯδχΞϦιʔεʢਓ݅අʣΛ༏ઌͯ͠ɺͳΔ΂͘५୔ʹ w ༧ଌՄೳ࠷େ஋ͷ5ISPVHIQVUʹ଱͑Δ w ίετΛ཈͑Δͷ͸ඞཁͳͱ͖͚ͩʹ

Slide 37

Slide 37 text

ద੾ͳαʔόʔίετ w ࣄۀɺϓϩμΫτ࣍ୈ w ࣄۀͷࢦඪʹϚοϐϯά͢Δ w ίετWT%"6."6 w ίετWT(.7ɺച্ w ઈର਺ΑΓ͸ɺ૬ରࢦඪ w ΞϊϚϦʔΛݟΔ

Slide 38

Slide 38 text

͍ͭύϑΥʔϚϯεΛվળͷ͔ 4

Slide 39

Slide 39 text

ࣄલ͔ɺ ࣄޙ͔

Slide 40

Slide 40 text

ࣄޙ͸ফ໣ w Ͱ΋ɺճආ͸ͳ͔Μ͔೉͍͠

Slide 41

Slide 41 text

Ϣʔβʔ͸૿͑Δ σʔλ͸૿͑Δ ػೳ͸૿͑Δ ਓ͸૿͑Δ

Slide 42

Slide 42 text

ະવʹ๷͙։ൃϓϥΫςΟε w ఆظతͳෛՙࢼݧ w ৽نػೳͷϕϯνϚʔΫ w ͋Γ͕ͪͳϛεͷ๷ޚ w FH#VMMFU /ݕ஌ Λςετʹ࢓ࠐΉ w FHSVCPDPQQFSGPSNBODF

Slide 43

Slide 43 text

ύϑΥʔϚϯε͸୭ͷ੹೚ͳͷ͔ 5

Slide 44

Slide 44 text

ύϑΥʔϚϯε͸ϓϩμΫτ։ൃͷҰ؀ w ύϑΥʔϚϯεʹ͸༷ʑͳτϨʔυΦϑ͕ඞཁ w ਖ਼͘͠൑அͰ͖Δͷ͸ϓϩμΫτ։ൃऀͷΈ w ඞཁͳٕज़ྗΛ਎ʹண͚Α͏

Slide 45

Slide 45 text

ύϑΥʔϚϯεҙࣝͷࣗಈԽ w ڌΓॴΛ࡞Δ w ΈΜͳ͕Έ͑ΔμογϡϘʔυ w ϦϞʔτ࣌୅ͩͱ4MBDLͳͲͷνϟϯ ωϧΛઃஔ w ఆظϦϚΠϯυΛ׆༻ w 4-*4-0ͷ֬ೝɺ਺஋ΛݟΔͳͲ w ᮢ஋Λઃఆͯ͠ɺΞϥʔτΛઃஔ

Slide 46

Slide 46 text

ύϑΥʔϚϯε஌ݟΛڞ༗ w ύϑΥʔϚϯε஌ݟ͸αΠϩԽ͠΍͍͢ w ݟ͑Δ৔ॴͰύϑΥʔϚϯεվળΛ࣮ࢪ w ΤϏσϯεΛఴ෇͢Δ͚ͩͰͳ͘ɺ࠶ݱ ํ๏΋ w ຊ൪؀ڥͰ੒Ռ͕ग़ͨΒɺࣗຫ͢Δ w ๙Ί߹͍·͠ΐ͏ʂ

Slide 47

Slide 47 text

Thanks for Watching 📺 Stay Smart, Stay Fast 😃