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

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

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

技術 / サービス
両方の目線からみた
パフォーマンスについて話します
3

Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .
今日の内容

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

目次
・時間を確保して進めるためには
・継続するためには
・FEからみたBEのパフォーマンス
6

技術目線 / サービス目線
それぞれのパフォーマンス改善

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

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

両者が納得をもって進められるやりかた
10

サービスのKPIと
パフォーマンスの因果関係を証明する
11

KPIに貢献できるなら継続できる
「速い」はシンプルなため
証明した効果は出し続けやすい
12

表示速度が0.1秒減ると、売上が1%増加
(amazonさんの例)
13

KPIの例
(ショッピングサイトの例)
14
取扱高
訪問者数
注文単価
CVR
KPI

KPIの例
15
取扱高
訪問者数
注文単価
CVR
KPI
例えばここと速度の因果関係を証明する

KPIの例
16
取扱高
訪問者数
注文単価
CVR
KPI
指標はたくさんある
訪問回数
滞在時間
離脱率取扱高
・・・
・・・
サブKPI

KPIの例
17
取扱高
訪問者数
注文単価
CVR
KPI
指標はたくさんある
訪問回数
滞在時間
離脱率取扱高
・・・
・・・
サブKPI
正直速くなって悪くなるものなんてない！

KPIの例
18
取扱高
訪問者数
注文単価
CVR
KPI
これも
訪問回数
滞在時間
離脱率取扱高
・・・
・・・
サブKPI
正直速くなって悪くなるものなんてない！
これも
これも
これも
これも
これも
これも
これも

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

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

どうやって証明するか
21

フロントがあるんだったら「ABテスト」
バックエンドだけでも「ABテスト」
→ 前後比はトレンドに左右されすぎて説得力は低い
22

継続的に安定した環境で測定し続けることが大事
施策がKPIに影響を与えたことを証明し続ける
23

安定した計測
SpeedCurveを使用してます
24

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

FEからみたBEの
パフォーマンス改善

FEからみててたまに思うこと
27

「そのAPI、速くしても意味ないのに」
28

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

フロントエンド処理の時系列（例）
30
クライアントサイドサーバサイドバックエンド
html取得
API（遅い）
直列処理
DB（速い）
API（速い）
並列処理
API（遅い）
API（遅い）
API（速い）
非同期取得
非同期取得
API（速い）
API（遅い）

FEからみて改善しても効果が薄いところ
31
html取得
直列処理
並列処理
非同期取得
非同期取得
並列処理で他にもっと遅いAPIがいるAPI
非同期で叩いているところ
API（遅い）
DB（速い）
API（速い）
API（遅い）
API（超遅い）
API（速い）
API（速い）
API（遅い）

FEからみて改善して欲しいところ
32
html取得
直列処理
並列処理
非同期取得
非同期取得
直列のところならなんでも
並列で叩いていて一番遅いAPI
API（遅い）
DB（速い）
API（速い）
API（遅い）
API（超遅い）
API（速い）
API（速い）
API（遅い）

サービス全体を考えたとき、改善すべきはFE？BE？
33

ユーザが体感する速度
現在の状態を知って
改善すべき優先度
をつける
35

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

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

EOP

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

Recomendados

Recomendados

Mais conteúdo relacionado

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

Semelhante a Bonfire Backend #2 継続的なパフォーマンス改善 (20)

Mais de Yahoo!デベロッパーネットワーク

Mais de Yahoo!デベロッパーネットワーク (20)

Último

Último (12)

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