Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bonfire Backend #2 継続的なパフォーマンス改善

1,506 views

Published on

https://yj-meetup.connpass.com/event/107235/

Published in: Technology
  • Be the first to comment

Bonfire Backend #2 継続的なパフォーマンス改善

  1. 1. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 2018年12月6日 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. ヤフー株式会社 笹原 翼 継続的なパフォーマンス改善 〜 FEからみたBEのパフォーマンスについて 〜
  2. 2. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 自己紹介 ヤフー株式会社 ヤフーショッピング 技術部長 兼 サービスマネージャー 笹原 翼 7年くらいBE、最近3年はFE 2
  3. 3. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 技術 / サービス 両方の目線からみた パフォーマンスについて話します 3
  4. 4. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved . 今日の内容
  5. 5. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 今日の内容 パフォーマンス改善やりたいけど 当然工数かかるし進めさせてもらえない そんな方向け 5
  6. 6. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 目次 ・時間を確保して進めるためには ・継続するためには ・FEからみたBEのパフォーマンス 6
  7. 7. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved . 技術目線 / サービス目線 それぞれのパフォーマンス改善
  8. 8. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 技術目線でのパフォーマンス改善 (例) ・とにかく速くしたい ・新しい技術使って速くしたい ・やばいところの改善は依頼はくるが 速いところをもっと速くする時間はもらえない ・パフォーマンス改善に時間をくれ! 8
  9. 9. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. サービス目線でのパフォーマンス改善 9 (例) ・◯◯に時間がかかって苦情がくるので改善して欲しい ・ページ表示が速くなるとユーザが使いやすくなるだろう ・効果が分からない速度改善より他をやって欲しい
  10. 10. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 両者が納得をもって進められるやりかた 10
  11. 11. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 両者が納得をもって進められるやりかた サービスのKPIと パフォーマンスの因果関係を証明する 11
  12. 12. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 両者が納得をもって進められるやりかた KPIに貢献できるなら継続できる 「速い」はシンプルなため 証明した効果は出し続けやすい 12
  13. 13. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 表示速度が0.1秒減ると、売上が1%増加 (amazonさんの例) 13
  14. 14. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. KPIの例 (ショッピングサイトの例) 14 取扱高 訪問者数 注文単価 CVR KPI
  15. 15. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. KPIの例 (ショッピングサイトの例) 15 取扱高 訪問者数 注文単価 CVR KPI 例えばここと速度の因果関係を証明する
  16. 16. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. KPIの例 (ショッピングサイトの例) 16 取扱高 訪問者数 注文単価 CVR KPI 指標はたくさんある 訪問回数 滞在時間 離脱率取扱高 ・・・ ・・・ サブKPI
  17. 17. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. KPIの例 (ショッピングサイトの例) 17 取扱高 訪問者数 注文単価 CVR KPI 指標はたくさんある 訪問回数 滞在時間 離脱率取扱高 ・・・ ・・・ サブKPI 正直速くなって悪くなるものなんてない!
  18. 18. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. KPIの例 (ショッピングサイトの例) 18 取扱高 訪問者数 注文単価 CVR KPI これも 訪問回数 滞在時間 離脱率取扱高 ・・・ ・・・ サブKPI 正直速くなって悪くなるものなんてない! これも これも これも これも これも これも これも
  19. 19. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. ヤフーショッピングでは 速度とKPIの相関を証明できた結果 速度改善PJの立ち上げに成功しました 速度改善し放題です! 19
  20. 20. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. ABテストで 速度とKPIの相関を5戦5勝で証明 - 遅いAPIの非同期化 CVR +◯◯pt - 遅いAPIのキャッシュ化 CVR +◯◯pt - 画像最適化 クオリティ85へ CVR +◯◯pt - サーバサイド速くしてTTFB高速化 CVR +◯◯pt - レンダリングブロックしているcssやjsの軽量化 CVR +◯◯pt 20
  21. 21. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. どうやって証明するか 21
  22. 22. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. どうやって証明するか フロントがあるんだったら「ABテスト」 バックエンドだけでも「ABテスト」 → 前後比はトレンドに左右されすぎて説得力は低い 22
  23. 23. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. どうやって証明するか 継続的に安定した環境で測定し続けることが大事 施策がKPIに影響を与えたことを証明し続ける 23
  24. 24. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 安定した計測 SpeedCurveを使用してます 24
  25. 25. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. なんでSpeedCurve? ・かっこいい ・計測しただけで既に改善してる感 ・定期実行できる ・グラフ化できる ・色んな指標とれる ・競合と比較できる ・改善結果がすぐに出る ・説明しやすい 25
  26. 26. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved . FEからみたBEの パフォーマンス改善
  27. 27. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. FEからみててたまに思うこと 27
  28. 28. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 「そのAPI、速くしても意味ないのに」 28
  29. 29. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. フロントエンドの基本的な作り 29 ブラウザ FEサーバ (非同期用API) 様々なAPI RDB KVS ① ②,③,・・・ html js css img
  30. 30. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. フロントエンド処理の時系列(例) 30 クライアントサイド サーバサイド バックエンド html取得 API(遅い) 直列処理 DB(速い) API(速い) 並列処理 API(遅い) API(遅い) API(速い) 非同期取得 非同期取得 API(速い) API(遅い)
  31. 31. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. FEからみて改善しても効果が薄いところ 31 クライアントサイド サーバサイド バックエンド html取得 直列処理 並列処理 非同期取得 非同期取得 並列処理で他にもっと遅いAPIがいるAPI 非同期で叩いているところ API(遅い) DB(速い) API(速い) API(遅い) API(超遅い) API(速い) API(速い) API(遅い)
  32. 32. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. FEからみて改善して欲しいところ 32 クライアントサイド サーバサイド バックエンド html取得 直列処理 並列処理 非同期取得 非同期取得 直列のところならなんでも 並列で叩いていて一番遅いAPI API(遅い) DB(速い) API(速い) API(遅い) API(超遅い) API(速い) API(速い) API(遅い)
  33. 33. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. サービス全体を考えたとき、改善すべきはFE?BE? 33
  34. 34. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 34
  35. 35. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. ユーザが体感する速度 現在の状態を知って 改善すべき優先度 をつける 35
  36. 36. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. ユーザが体感する速度 現在の状態を知って 改善すべき優先度 をつける 36 サーバサイド、APIが遅いかも jsやcssでかいかも htmlでかいかも 画像が遅いかも js遅いかも
  37. 37. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. まとめ ・パフォーマンスとサービスKPIを紐付ける ・安定した測定環境をみつけ継続して証明する ・サービス全体から改善すべき優先度をつける 37
  38. 38. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. EOP

×