ferret編集部:2015年4月17日に公開された記事を再編集しています。

目的があってホームページに訪れても、表示までの時間が長くてページを見ることなく閉じてしまったという経験はありますか?
ページが表示されるまでの速度は、ユーザーの閲覧行動に大きく影響します。
特に、スマホを使って閲覧するユーザーは、PCを使うユーザーに比べて電波状況も関係するためシビアに判断することが多くなります。

今回は、スマホ用のLP(ランディングページ)の表示速度を改善した結果、CVRが即日2倍にアップした事例をご紹介します。

事例対象ホームページ

事例ホームページ:かてきょNAVI
なんのホームページか:家庭教師センターの一括資料請求サイト
URLhttp://katekyo-navi.net/

改善結果

スマホ用LPの表示速度を改善した結果、CVRが即日2倍に上昇

施策前 4秒

施策前 1.4秒

ホームページの表示速度が0.1秒遅れるだけで売上の1%が減る!?

ホームページの表示速度は、売上に深刻な影響を与える可能性を秘めています。
Amazonの調査データによれば、ページの表示速度が0.1秒遅くなると、売り上げが1%低下したと報告されています。

また、SEOにおいてもページの表示速度は検索順位に影響を与える要因として明言されているため、表示速度が遅いことでの悪影響は、ユーザーにストレスを与えるだけでなく、SEOにおいてもマイナス要因になります。

参考:http://web-tan.forum.impressrd.jp/e/2014/01/15/16689
参考:http://www.suzukikenichi.com/blog/is-page-speed-a-ranking-factor-in-mobile-search/

表示速度が遅くなる原因と特定方法

ホームページの表示速度が遅くなる原因は多岐にわたります。
多いのは、「画像容量の大きさやCSS・JavaScriptなどのソースコードが複雑になっている」等のサーバの問題によるものです。
特定するためには専門の知識や技術が必要になります。

そのような表示速度に関する問題は、グーグルが提供するPageSpeed Insightsを使えば問題の把握や解決策のヒントが見つかります。

PageSpeed Insights

参考:PageSpeed Insights

PageSpeed Insightsの使い方

PageSpeed Insightsの使い方は、とても簡単です。計測したいページURLを入力し、分析をクリックするだけで、スマホとPCで閲覧した際の表示速度が点数化されます。

点数が悪い場合、マイナスとなっている原因と修正案も記載されているため簡単に調査できます。

PageSpeed Insightsの使い方

スマホ用LPの表示速度を改善

実際、かてきょNAVIのスマホ用LPを調べると速度は50点を下回る点数となり、ロード秒数(表示までにかかる時間)は約4秒かかることが分かりました。
そこで、最も取り掛かりやすい画像ファイルの圧縮から始めることにしました。

ロード速度、ページサイズの目安

▼モバイルサイト▼
ロード速度:1~2秒
ページサイズ:1MB以下(できれば500キロバイト以下)

▼PCサイト▼
ロード速度:1~2秒
ページサイズ:2MB以下

※あくまで目安です

画像を圧縮する際は、このTinypngが有名です。使い方は簡単で、Web上で圧縮したい画像をドラッグ&ドロップするだけで圧縮できるのでオススメです。

ロード速度、ページサイズの目安

参考:Tinypng

ページ内で使われる画像ファイルを圧縮することで、読み込みにかかる負担を軽減し、ページ容量としては4メガバイト程あったページ容量が400キロバイト(1/10の削減)まで減らすことができました。(速度が40点⇒73点まで上昇!)

改善結果

その結果、ロード秒数4秒から1.4秒まで短く(約2.5秒の短縮)することができただけでなく、スマホ用LPのCVR2倍上昇に成功しました。

0.1秒遅れるだけで売上の1%が減るというAmazonの調査からも見てもわかるように、2.5秒の改善で2倍の成果がでました。つまり、表示速度が遅いことはユーザーにストレスを与えているということが実感できた事例となったわけです。