Web パフォーマンスとメディア数値との相関図を作成してみた

フロントエンドエンジニアやっております謝花です。

本記事は [mediba Advent カレンダー2021](https://qiita.com/advent-calendar/2021/mediba) の22日目の記事になります。
わたくし、一応エンジニアとして働いていますが、最近はコードなんてほとんど書いておらずピープルマネジメントや体制の整理なんかをしています。

# はじめに

突然ですが
「こんな機能を追加してみたらちょっとページ表示速度低下したみたいだけど、微々たるもんだしこのくらいならいいかリリースしよう！！」
このような経験はありませんでしょうか？

特に売り上げに直結するような機能であればスピードを追い求めるがあまり、他の項目を妥協したり少々目を瞑ることもあったりなかったり。
確かに微々たるものであればそこまで影響はないかもですが、それが度重なるとサービス自体に影響が出たりします。

ページの表示速度って **速ければ速いほど良いし、遅ければ遅いほど悪い** っていうのは誰もが共通認識として持ってるものだと思いますが、ただ実際どのくらいパフォーマンスが良く（悪く）なればどのくらいサービスに影響があるのかって意外と分かってなかったりするかと思います。

前置きが長くなりましたが、今日はそれを簡単に可視化してみたよーというお話になります。


# 事前準備
弊社データアナリスト（新卒 T さん）にご協力いただきどのような指標で､観点で見ていくのかを決めていきます。

## 仮設立て
- Webパフォーマンスが落ち込むと、ユーザー数が減るのではないか

## 要件定義
- Webパフォーマンスが変わるグループ分け
    - ブラウザ別
        - 日別の要因、コンテンツの要因を除外するため
- 指標
    - Webパフォーマンス⇒GA：平均読み込み時間（秒）
    - ユーザーあたりのセッション数
    - ユーザーあたりのPV数
    - ユーザーあたりのセッション時間
    - 直帰率
- グラフ
    - 散布図で可視化
    - 縦軸と横軸
        - 縦軸（目的変数）⇒指標
        - 横軸（説明変数）⇒平均読み込み時間


指標やアウトプットイメージが決まったので、実際に結果を見ていきたいと思います。


# 分析結果
## 平均読み込み時間（秒）が落ち込めばユーザーあたりのセッション数に影響があるか
- 指標
    - 平均読み込み時間（秒）
    - ユーザーあたりのセッション数
- ディメンション
    - ブラウザ
- 相関係数：0.1479718291

![_平均読み込み時間（秒）とユーザーあたりのセッション数 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290538/0276436d-bfc2-acfe-dea0-549877980f1f.png)

### 結果
んーこれは特に有意差でなかったので相関関係にないといえそうです。




## 平均読み込み時間（秒）が落ち込めばユーザーあたりのPV数に影響があるか
- 指標
    - 平均読み込み時間（秒）
    - ユーザーあたりのセッション数
- ディメンション
    - ブラウザ
- 相関係数：-0.2575862502


![平均読み込み時間（秒）とユーザーあたりのPV数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290538/ae1820eb-0310-7fdc-3344-3ebf270639bc.png)

### 結果
こちらも同様に相関関係になさそう。。。

## 平均読み込み時間（秒）が落ち込めばユーザーあたりのセッション時間に影響があるか
- 指標
    - 平均読み込み時間（秒）
    - ユーザーあたりのセッション時間
- ディメンション
    - ブラウザ
- 相関係数：-0.271255217

![_平均読み込み時間（秒）と平均セッション時間 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290538/ec0371a0-f945-6e61-83a4-2c78a34e636e.png)

### 結果
これもだ。。。（予想していた結果が出ないと不安になる）


## 平均読み込み時間（秒）が落ち込めば直帰率に影響があるか
- 指標
    - 平均読み込み時間（秒）
    - 直帰率
- ディメンション
    - ブラウザ
- 相関係数：**0.5925693608**

![_平均読み込み時間（秒）と直帰率 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290538/9323e7c5-a4d6-8954-1ff3-1636bfbe06b0.png)

### 結果
**平均読み込み時間の4秒⇒7秒で直帰率が10%上昇すると言える**
おお！結果が出た！
ページ表示スピードと直帰率には相関関係があることがわかったのでもう少し深ぼってみる。


## 直帰率の深堀り
- 指標
    - 平均読み込み時間（秒）
    - 直帰率
- ディメンション
    - 日付（期間3か月）
- フィルタ
    - Chrome & safari

![平均読み込み時間（秒）と直帰率.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290538/5fdf4a92-2847-b094-41e4-d833dc337d30.png)

### 結果
日毎で見ても読み込み時間が遅くなれば直帰率も上昇していることがわかった。
ただ思っていたほど綺麗な斜め線を描かなかった。
読み込みが早くても直帰率高かったり逆もまた然りで、もっと詳しく見てみる必要ありそうだなと感じた。

## 調査してみて分かったことまとめ
- Webパフォーマンスと直帰率に相関がある
    - 平均読み込み時間が遅くなることにより、直帰率が上昇する
        - 4秒から7秒に増えることで、直帰率が10％上昇
- 平均読み込み時間が遅くなる（Webパフォーマンスが落ち込む）ことによりメディア数値において、落ち込む数値もあれば変化のみられない数値もある
    - セッション数、セッション時間や PV においては変化は見られなかった
        - 読み込みが遅いまま継続されると下降傾向にあるのではないか
            - 本件では未調査
- 平均読み込み時間が遅くなるその時点で影響がある数値と、時差によって影響がある数値もある
    - 直帰率は表示スピードが遅くなれば顕著に数字に表れる
- 表示スピードが遅くても直帰率が低かったりする日やブラウザもあった
    - ユーザー的に少数で除外して良い数字なのかも改めて調査の必要あるかも


## 最後に
パフォーマンスが落ち込めばどのくらい影響があるのかずっとモヤっとしていたので可視化してみて気づきがいっぱいあるなと感じました。
もっと深ぼればさらに色々と見えてくるかもと思いましたがそれはまた次回の機会に。
やっぱり web パフォーマンスは大事なので常に優先度高く意識していきたいですね。

余談ですが、本日は息子の4歳の誕生日です。あっという間に4度目の誕生日となりました。
子供の成長は本当に早く、こんな感じですぐ大人になるんだろうなと思うと少し(すごく)寂しく感じてしまいます。
さらに余談ですが、365日の中で一番誕生日の人が多い日は本日 12/22 らしいです。
そう言われてみると確かに周りにも 12/22 誕生日の方多かった気がしたりしなかったり。


以上となります。ありがとうございました。