---
title: Bonfire Backend #2 継続的なパフォーマンス改善
tags:  #yjbonfire  
author: [Yahoo!デベロッパーネットワーク](https://convert.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/V9J28VKRJR.jpg?width=480
description: https://yj-meetup.connpass.com/event/107235/
published: December 06, 18
canonical: https://convert.docswell.com/s/ydnjp/KXDY35-2018-12-06-160045
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/V9J28VKRJR.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/5DEY63N57M.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/2VJNZVX4J8.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GYE9Z684E3.jpg)

今日の内容
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 .


# Page. 5

![Page Image](https://bcdn.docswell.com/page/5GE81Z8VJD.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/MLELQDRRJR.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/54JM1PRP7W.jpg)

技術目線 / サービス目線
それぞれのパフォーマンス改善
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 .


# Page. 8

![Page Image](https://bcdn.docswell.com/page/ZPJRL1RYJ9.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/NPEXWYR4JX.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/63EKV3RPJD.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4L73MG84E5.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/V87D61M5JG.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4VJPYQRDJ8.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/L2EVG5RGEQ.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/Z57G866D7L.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/V4EQ944XEP.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/DKJ4XQQ2J1.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/PLE1NPPKJG.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/8GEW422P72.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/W47Z2DD6E3.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/KYJ6V11L7V.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/5GJ5D44MJ4.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4LE3MGG9J5.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/V8ED61187G.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/4V7PYQQW78.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/L2JVG559JQ.jpg)

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 .


# Page. 27

![Page Image](https://bcdn.docswell.com/page/Z5EG8664EL.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/V4JQ944RJP.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/DK74XQQQ71.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/PLJ1NPPL7G.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/8GJW422QE2.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/W4EZ2DD3J3.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/KY76V11ZEV.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/5G75D44974.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/V9J28VV5JR.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/5DEY63367M.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/2VJNZVK1J8.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/GYE9Z6VYE3.jpg)

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


