株式会社クイックのWebサービス開発blog

HAPPYなエンジニア&デザイナーのブログです

ページの表示速度を改善し、CVRを上げた話

こんにちは。夏バテ継続中のsatopiです。

Webサイト制作に関わる方は「表示速度が○秒遅いと離脱率が▲%上がる」という記事をよく目にすると思います。

今回は「それって本当?そんなに変わらないでしょう?」と疑いを持っている方に捧げます……ッ!

LPといえば、ABテスト

ある日、元となるスマホユーザー向けのLPからBパターンを作成し、時間をおいてから結果を確認したところ、BパターンのCVRが著しく低下していました。

A(元となるLP) B
CVR 0.59% 0.12%

なんと0.47ポイントも下がっています。

これは、一体……!?!? =͟͟͞͞( ´q` 三´q` =͟͟͞͞) エェェェ……

原因は表示速度

AとBの大きな違いは、元となるAでは画像メインでしたが、Bパターンで一部CSSコーディングし直し+αという点です。

思い当たる原因を調べてもそれらには問題なし。
様々な調査の最後にWebpageTestでページの表示速度を計測をしました。

A(元となるLP) B
Speed Index 1770 2085
Document Complete Time 3.528s 6.154s

LTE(12Mbps / 12Mbps 70ms RTT)を選択して計測しています。

  • Speed Index: ファーストビューがいかに早く表示されるかを表す新しい指標
  • Document Complete Time: HTMLコードにあるコンテンツをすべて読み込んだ時間

遅ッ…遅すぎる……。フロントエンドエンジニアとして、この計測結果は顔面蒼白ものです。Document Complete Timeが異常に遅い。

スマホユーザー向けのLPなので実機検証していましたが、Wi-Fi接続していて遅さを体感できておらず、気づくのが遅れてしまいました。

この遅さのせいでBパターンの離脱率が上がり、コンバージョンへ至らなかったに違いありません。

表示速度を改善

読み込みを遅くしていた要因を取り除き、改めて表示速度を計測。

A(元となるLP) B
Speed Index 1770 2023
Document Complete Time 3.528s 3.303s

元のLPよりも若干早くなり、いい感じですね。

では改めて、ABテストといきましょう!

       :
       :
       :

A(元となるLP) B
CVR 0.60% 0.85%

無事に、もともと比較したかった施策内容でのテスト結果を出すことができました!
(:3[___Ξ___]ε:)イェイイェイ!!ウォ!イェイイェイ!!!ウォウウォ!(:3[___Ξ___]ε:)イェ!!

表示速度が遅くなると離脱率が上がるのは事実」である。

二度と同じ失敗を繰り返さないぞ!!!!!と心に誓った2018年夏でした。


\\『明日のはたらくを創る』仲間を募集中です!! // 919.jp