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

継続的なパフォーマンス改善 〜 FEからみたBEのパフォーマンスについて 〜 2018年12月6日 ヤフー株式会社 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 笹原 翼 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.

自己紹介 ヤフー株式会社 ヤフーショッピング 技術部長 兼 サービスマネージャー 笹原 翼 7年くらいBE、最近3年はFE Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 2

技術 / サービス 両方の目線からみた パフォーマンスについて話します Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 3

今日の内容 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. Co p y rig ht © 2 0 1 7 Ya ho o Ja p a n Co rp o ra tio n. A ll R ig hts R eserv ed .

今日の内容 パフォーマンス改善やりたいけど 当然工数かかるし進めさせてもらえない そんな方向け Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 5

目次 ・時間を確保して進めるためには ・継続するためには ・FEからみたBEのパフォーマンス Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 6

技術目線 / サービス目線 それぞれのパフォーマンス改善 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. Co p y rig ht © 2 0 1 7 Ya ho o Ja p a n Co rp o ra tio n. A ll R ig hts R eserv ed .

技術目線でのパフォーマンス改善 (例) ・とにかく速くしたい ・新しい技術使って速くしたい ・やばいところの改善は依頼はくるが 速いところをもっと速くする時間はもらえない ・パフォーマンス改善に時間をくれ！ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 8

サービス目線でのパフォーマンス改善 (例) ・◯◯に時間がかかって苦情がくるので改善して欲しい ・ページ表示が速くなるとユーザが使いやすくなるだろう ・効果が分からない速度改善より他をやって欲しい Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 9

両者が納得をもって進められるやりかた Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 10

両者が納得をもって進められるやりかた サービスのKPIと パフォーマンスの因果関係を証明する Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 11

両者が納得をもって進められるやりかた KPIに貢献できるなら継続できる 「速い」はシンプルなため 証明した効果は出し続けやすい Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 12

表示速度が0.1秒減ると、売上が1%増加 (amazonさんの例) Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 13

KPIの例 (ショッピングサイトの例) 訪問者数 取扱高 注文単価 CVR KPI Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 14

KPIの例 (ショッピングサイトの例) 訪問者数 取扱高 注文単価 CVR 例えばここと速度の因果関係を証明する KPI Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 15

KPIの例 (ショッピングサイトの例) 訪問者数 訪問回数 滞在時間 取扱高 取扱高 注文単価 CVR KPI Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 離脱率 指標はたくさんある ・・・ ・・・ サブKPI 16

KPIの例 (ショッピングサイトの例) 訪問者数 訪問回数 滞在時間 取扱高 取扱高 注文単価 CVR KPI 離脱率 指標はたくさんある ・・・ ・・・ サブKPI 正直速くなって悪くなるものなんてない！ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 17

KPIの例 (ショッピングサイトの例) 訪問者数 取扱高 取扱高 注文単価 CVR KPI これも これも これも 訪問回数 これも 滞在時間 これも 離脱率 これも ・・・ これも ・・・ これも サブKPI 正直速くなって悪くなるものなんてない！ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 18

ヤフーショッピングでは 速度とKPIの相関を証明できた結果 速度改善PJの立ち上げに成功しました 速度改善し放題です！ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 19

ABテストで 速度とKPIの相関を5戦5勝で証明 - 遅いAPIの非同期化 CVR +◯◯pt - 遅いAPIのキャッシュ化 CVR +◯◯pt - 画像最適化 クオリティ85へ CVR +◯◯pt - サーバサイド速くしてTTFB高速化 CVR +◯◯pt - レンダリングブロックしているcssやjsの軽量化 CVR +◯◯pt Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 20

どうやって証明するか Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 21

どうやって証明するか フロントがあるんだったら「ABテスト」 バックエンドだけでも「ABテスト」 → 前後比はトレンドに左右されすぎて説得力は低い Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 22

どうやって証明するか 継続的に安定した環境で測定し続けることが大事 施策がKPIに影響を与えたことを証明し続ける Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 23

安定した計測 SpeedCurveを使用してます Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 24

なんでSpeedCurve？ ・かっこいい ・計測しただけで既に改善してる感 ・定期実行できる ・グラフ化できる ・色んな指標とれる ・競合と比較できる ・改善結果がすぐに出る ・説明しやすい Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 25

FEからみたBEの パフォーマンス改善 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. Co p y rig ht © 2 0 1 7 Ya ho o Ja p a n Co rp o ra tio n. A ll R ig hts R eserv ed .

FEからみててたまに思うこと Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 27

「そのAPI、速くしても意味ないのに」 Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 28

フロントエンドの基本的な作り FEサーバ ブラウザ 様々なAPI ① ②,③,・・・ html RDB js KVS css img (非同期用API) Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 29

フロントエンド処理の時系列（例） html取得 API（速い） API（遅い） DB（速い） 直列処理 API（速い） API（遅い） API（遅い） 非同期取得 API（速い） 非同期取得 API（遅い） クライアントサイド Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. サーバサイド 並列処理 バックエンド 30

FEからみて改善しても効果が薄いところ html取得 API（速い） API（遅い） 直列処理 DB（速い） API（速い） API（遅い） 並列処理 API（超遅い） 並列処理で他にもっと遅いAPIがいるAPI 非同期取得 API（速い） 非同期取得 API（遅い） 非同期で叩いているところ クライアントサイド Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. サーバサイド バックエンド 31

FEからみて改善して欲しいところ html取得 API（速い） API（遅い） DB（速い） 直列処理 直列のところならなんでも API（速い） API（遅い） API（超遅い） 並列処理 並列で叩いていて一番遅いAPI 非同期取得 API（速い） 非同期取得 API（遅い） クライアントサイド Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. サーバサイド バックエンド 32

サービス全体を考えたとき、改善すべきはFE？BE？ Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 33

Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 34

ユーザが体感する速度 現在の状態を知って 改善すべき優先度 をつける Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 35

ユーザが体感する速度 サーバサイド、APIが遅いかも jsやcssでかいかも htmlでかいかも 画像が遅いかも js遅いかも Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 現在の状態を知って 改善すべき優先度 をつける 36

まとめ ・パフォーマンスとサービスKPIを紐付ける ・安定した測定環境をみつけ継続して証明する ・サービス全体から改善すべき優先度をつける Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. 37

EOP Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved. Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.