PayPayフリマの速度改善

Transcript

1. ©2021 Yahoo Japan Corporation All rights reserved. Update 起動体験 PayPayフリマの速度改善

   ヤフー株式会社 CTO室アプリ統括部iOSアプリWG 平松亮介

2. ©2021 Yahoo Japan Corporation All rights reserved. iOSエンジニア 前期まで︓PayPayフリマ iOS

   今期から︓CTO室 / Core ML Twitter: @himara2 ⾃⼰紹介 2 平松 亮介

3. ©2021 Yahoo Japan Corporation All rights reserved. このLTは PayPayフリマの起動速度を改善した話 3

4. ©2021 Yahoo Japan Corporation All rights reserved. • ヤフーの各サービスで起動速度の改善に取り組んでいる •

   PayPayフリマで実施した取り組みを紹介 • 起動速度のメンテナンスにCIを利⽤ 速度改善の取り組み 4

5. ©2021 Yahoo Japan Corporation All rights reserved. PayPayフリマのホーム画⾯ 5

6. ©2021 Yahoo Japan Corporation All rights reserved. PayPayフリマのホーム画⾯ 6 ݕࡧ૭

7. ©2021 Yahoo Japan Corporation All rights reserved. PayPayフリマのホーム画⾯ 7 ݕࡧ૭

   ԣεΫϩʔϧλϒ

8. ©2021 Yahoo Japan Corporation All rights reserved. PayPayフリマのホーム画⾯ 8 ݕࡧ૭

   ԣεΫϩʔϧλϒ Ωϟϯϖʔϯόφʔ

9. ©2021 Yahoo Japan Corporation All rights reserved. PayPayフリマのホーム画⾯ 9 ݕࡧ૭

   ԣεΫϩʔϧλϒ Ωϟϯϖʔϯόφʔ ϋογϡλάϦϯά ϑΥϩʔͯ͠Δλάͷ৽ண঎඼

10. ©2021 Yahoo Japan Corporation All rights reserved. PayPayフリマのホーム画⾯ 10 ݕࡧ૭

    ԣεΫϩʔϧλϒ Ωϟϯϖʔϯόφʔ ϋογϡλάϦϯά ϑΥϩʔͯ͠Δλάͷ৽ண঎඼ ͓͢͢Ί঎඼

11. ©2021 Yahoo Japan Corporation All rights reserved. 起動速度の計測（Watchful） 11

12. ©2021 Yahoo Japan Corporation All rights reserved. 起動速度の計測（Watchful） 12 起動⾃体は

    そこそこ速い

13. ©2021 Yahoo Japan Corporation All rights reserved. 起動速度の計測（Watchful） 13 起動⾃体は

    そこそこ速い コンテンツ表⽰に時間がかかっている

14. ©2021 Yahoo Japan Corporation All rights reserved. APIリクエストの⾒直し 14

15. ©2021 Yahoo Japan Corporation All rights reserved. • リリースから1年半で様々な機能が追加されてきた •

    ボトルネックはどこか︖まずはグラフにしてみる 複雑化するホーム画⾯ 15

16. ©2021 Yahoo Japan Corporation All rights reserved. 起動時に叩いているAPI 16 各種APIのendpoint

    endpoint/api/1 endpoint/api/2 endpoint/api/3 …

17. ©2021 Yahoo Japan Corporation All rights reserved. 17 起動時に叩いているAPI（主要API）

18. ©2021 Yahoo Japan Corporation All rights reserved. 18 起動時に叩いているAPI（主要API） 直列に叩いてる部分

    を⼯夫できそう

19. ©2021 Yahoo Japan Corporation All rights reserved. • 0.5秒の短縮（17%の改善） APIリクエストを⾒直した結果

    19

20. ©2021 Yahoo Japan Corporation All rights reserved. コンテンツキャッシュ 20

21. ©2021 Yahoo Japan Corporation All rights reserved. 21 コンテンツキャッシュ 初回

    2回⽬ 以降 -BVODI $BDIFE
    DPOUFOUT /FUXPSL
    DPOUFOUT

22. ©2021 Yahoo Japan Corporation All rights reserved. 22 コンテンツキャッシュ 初回

    2回⽬ 以降 -BVODI $BDIFE
    DPOUFOUT /FUXPSL
    DPOUFOUT

23. ©2021 Yahoo Japan Corporation All rights reserved. 23 コンテンツキャッシュ 初回

    2回⽬ 以降 -BVODI $BDIFE
    DPOUFOUT /FUXPSL
    DPOUFOUT

24. ©2021 Yahoo Japan Corporation All rights reserved. 24 コンテンツキャッシュ 初回

    2回⽬ 以降 -BVODI $BDIFE
    DPOUFOUT /FUXPSL
    DPOUFOUT

25. ©2021 Yahoo Japan Corporation All rights reserved. 25 コンテンツキャッシュ 初回

    2回⽬ 以降 -BVODI $BDIFE
    DPOUFOUT /FUXPSL
    DPOUFOUT

26. ©2021 Yahoo Japan Corporation All rights reserved. 26 コンテンツキャッシュ 初回

    2回⽬ 以降 -BVODI $BDIFE
    DPOUFOUT /FUXPSL
    DPOUFOUT

27. ©2021 Yahoo Japan Corporation All rights reserved. 27 コンテンツキャッシュ 初回

    2回⽬ 以降 -BVODI $BDIFE
    DPOUFOUT /FUXPSL
    DPOUFOUT

28. ©2021 Yahoo Japan Corporation All rights reserved. 28 コンテンツキャッシュ 初回

    2回⽬ 以降 -BVODI $BDIFE
    DPOUFOUT /FUXPSL
    DPOUFOUT

29. ©2021 Yahoo Japan Corporation All rights reserved. 29 コンテンツキャッシュ 初回

    2回⽬ 以降 -BVODI $BDIFE
    DPOUFOUT /FUXPSL
    DPOUFOUT

30. ©2021 Yahoo Japan Corporation All rights reserved. • ハッシュタグリング •

    おすすめ商品 • ブランドランキング ※ログがおかしくならないように注意 キャッシュするもの 30

31. ©2021 Yahoo Japan Corporation All rights reserved. • iOS 12+で使えるパフォーマンス測定のAPI

    • Instruments や UI Testing で測定 計測︓OS Signpost 31

32. ©2021 Yahoo Japan Corporation All rights reserved. • iOS 12+で使えるパフォーマンス測定のAPI

    • Instruments や UI Testing で測定 • 今回の計測︓「最初の画像が表⽰されるまで」 計測︓OS Signpost 32

33. ©2021 Yahoo Japan Corporation All rights reserved. 時間計測のコード

34. ©2021 Yahoo Japan Corporation All rights reserved. 時間計測のコード

35. ©2021 Yahoo Japan Corporation All rights reserved. 時間計測のコード

36. ©2021 Yahoo Japan Corporation All rights reserved. UITestingで計測

37. ©2021 Yahoo Japan Corporation All rights reserved. UITestingで計測

38. ©2021 Yahoo Japan Corporation All rights reserved. 結果︓コンテンツキャッシュで⼤幅に改善 38 Wi-Fi

    3G 2.13 5.45 Before After Improve 0.91 0.92 -1.22 -4.53 （単位︓秒 / iPhone 12 Pro 実機 / ⾃宅） • 「最初の画像が表⽰されるまで」の時間

39. ©2021 Yahoo Japan Corporation All rights reserved. （動画）

40. ©2021 Yahoo Japan Corporation All rights reserved. Static frameworksの利⽤ 40

41. ©2021 Yahoo Japan Corporation All rights reserved. • Dynamic frameworks

    → Static frameworks • Podfileを⼀⾏変更 Static frameworksの利⽤ 41

42. ©2021 Yahoo Japan Corporation All rights reserved. 起動時間の計測 42

43. ©2021 Yahoo Japan Corporation All rights reserved. 起動時間の計測 43 Xcode

    console

44. ©2021 Yahoo Japan Corporation All rights reserved. 起動時間の計測 44 Xcode

    console

45. ©2021 Yahoo Japan Corporation All rights reserved. Static frameworksの利⽤で改善 45

    Dynamic Static 1.2 Improve -0.2 1.0 （単位︓秒 / iPhone 12 Pro 実機 / ⾃宅） Dynamic, Static それぞれ3回の平均値

46. ©2021 Yahoo Japan Corporation All rights reserved. • 本番環境では改善が⾒られず Xcode

    OrganizerでMetricsを確認 46

47. ©2021 Yahoo Japan Corporation All rights reserved. 1. APIリクエストの⾒直し 2.

    コンテンツキャッシュ 3. Sta*c frameworksの利⽤ ここまで ある程度の速度改善ができた 47

48. ©2021 Yahoo Japan Corporation All rights reserved. 1. APIリクエストの⾒直し 2.

    コンテンツキャッシュ 3. Static frameworksの利⽤ ここまで ある程度の速度改善ができた 48 起動速度が遅くなった時に気づける仕組みが欲しい

49. ©2021 Yahoo Japan Corporation All rights reserved. 1. 起動速度をUIテストで計測 2.

    そのUIテストをCIで定期的に実⾏ 3. 速度の低下を検知したらSlackに投稿 速度の定期的な計測 49

50. ©2021 Yahoo Japan Corporation All rights reserved. ワークフロー 50 コミット

    GitHub 定期実⾏ CI上でUIテストで計測 遅くなったら Slackへの通知

51. ©2021 Yahoo Japan Corporation All rights reserved. UITestingで起動速度を計測

52. ©2021 Yahoo Japan Corporation All rights reserved. UITestingで起動速度を計測

53. ©2021 Yahoo Japan Corporation All rights reserved. Slack通知

54. ©2021 Yahoo Japan Corporation All rights reserved. • 計測と改善を繰り返し、起動速度を改善 •

    起動速度が低下した時に検知する仕組みづくり • UITesting、Metrics周りのアップデートも楽しみですね︕ おわりに 54

55. ©2021 Yahoo Japan Corporation All rights reserved.