Performance as a Product Feature

Kaigi on Rails 2021の発表

https://kaigionrails.org/2021/talks/lchin/

"Performance is a feature"と言われています。

スピードは機能だとしたら、それはプロダクトの様々な機能の一つに数えるということになる。その機能のオーナーとして、どのように事業にとって価値のある投資にできるのか？

このトークでは、パフォーマンスをプロダクト開発として捉えて改善に取り組むアプローチについて紹介します。

Transcript

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

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

5. View Slide

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

   View Slide

7. 💁

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. 4FSWJDF-FWFMఆٛ
    ࣄۀKPIͱ૬ؔੑͷ͋Δࢦඪʹམͱ͠ࠐΉ
    4FSWJDF-FWFM*OEJDBUPS 4-*
    
    w αʔϏεϨϕϧͷࢦඪ
    4FSWJDF-FWFM0CKFDUJWF 4-0
    
    w 4-*ͷ໨ඪ஋
    

    ҰൠతʹɺϨΠςϯγʔɺՄ༻ੑɺΤϥʔ
    ཰ɺεϧʔϓοτͳͲΛ4-*ͱ͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. 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.
    

    View Slide

18. 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.
    

    View Slide

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

    View Slide

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

    View Slide

21. Ͳ͜ʹ౤ࢿ͢Δͷ͔
    3
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. ΩϟύγςΟෆ଍ͷओͳ঱ঢ়
    ঱ঢ় ΩϟύγςΟͷมߋ ΞϓϦέʔγϣϯͷมߋ
    8SJUFS%#$16
    %#εέʔϧΞοϓ 8SJUFS΁ͷ༨ܭͳ3FBEΛݮΒ͢
    ΞʔΩςΫνϟมߋ
    3FBEFS%#$16
    %#εέʔϧΞ΢τ
    ʢ3FBEFS୆਺Λ૿΍͢ʣ
    4MPX2VFSZ /௵͠
    3FRVFTUTJO"QQ
    8PSLFS2VFVF
    "QQεέʔϧΞ΢τ
    

    ʢΞϓϦαʔόʔ୆਺Λ૿΍͢ʣ
    ύʔϑΥʔϚϯεվળશൠ
    "QQ$16 "QQεέʔϧΞ΢τ ϫʔΧʔ਺มߋ
    "QQ.FNPSZ "QQεέʔϧΞοϓ
    ϝϞϦʔϦʔΫ௵͠ɺ0CKFDUΛݮΒ͢
    ϫʔΧʔ਺มߋ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. ࣄલ͔ɺ
    
    
    ࣄޙ͔
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. Thanks for Watching 📺
    
    
    Stay Smart, Stay Fast 😃
    

    View Slide