ショッピングサイトは対策必須！直帰率を下げるためのサイト表示速度を高速化する３つの方法

  1. HOME
  2. コラムショッピングサイトは対策必須！直帰率を下げるためのサイト表示速度を高速化する３つの方法

いまやインターネット上でお買い物をするのは当たり前の時代。多くの人が、数多くあるWEBサイトの中から自分に最適な商品を探して商品購入・検討しています。
そして、多くのショップでショッピングサイトを保有しており、販売する側の競争は日々激しさを増しています。そしてインターネットユーザーのリテラシーも上がっており、そのような中で、価格の競争などに苦慮しているショップの方も多いかと思いますが、まずはページを見てもらえないと意味がありません。見てもらうための対策としてSEO（検索エンジン最適化）などの集客面も大切ですが、今回はページの表示速度について整理させていただきます。

1.なぜサイト表示速度が必要なのか？表示速度改善のメリット

サイトの「表示速度」「読込速度」とも言われるものですが、その表示速度がなぜ重要なのは直帰率に関わるからです。
サイトの表示に時間がかかってしまうと、直帰率が上がります。インターネットユーザーはせっかちなので、期待通りにページが表示されないとすぐに「戻る」ボタンやブラウザーの「閉じる」ボタンを押してしまうのですね。
そのユーザーがページを読み進めるかどうかを判断する時間は、たったの2.6秒と言われています。2.6秒。。。なんと短い時間でしょう。
私なんて、ちょっと考え事をしていたら10秒くらいあっという間に過ぎてしまうのに、、、インターネットユーザーのせっかち度合いがわかりますね。
上記の数値は、アメリカの大学での調査結果なのですが、その他にもサイトの表示速度に関わる数値はいろいろ発表されています。
その表示速度が遅い事による影響には下記の様なものがあります。

  • ページの表示に3秒以上かかると、ユーザーの約40%以上が離脱する。（Google）
  • スマホの表示スピードに5秒以上かかるとユーザーの74％が離脱してしまい、２度とそのサイトには訪れなくなる（Google）
  • Googleではページの表示速度が検索に影響している。（Google）
  • 表示が1秒遅れるごとにコンバージョン率が7%落ちる。（AMAZON）
  • 表示が1秒遅くなると売上が1%下がる。（AMAZON）
  • 読み込み時間を9秒から4秒に減らしたところ広告収入が3%上がり、1訪問あたりのページビュー数が17%上がった。（edmunds）
  • 待機時間を7秒から2秒に減らしたら収益が12%アップしページビュー数が25%上がった。さらにハードウェアのコストを50%削減できた。（Shopzilla）

１秒表示が遅れて、7%もコンバージョン率が下がるなんて、、、ショッピングサイトを運営している方が見たら、驚くような数値ばかりですよね。
逆を言うと、サイト表示速度が１秒速くなれば7%コンバージョン率が上がるということ。
サイト表示速度の重要さと、改善することによるメリットをお分かりいただけましたでしょうか？
それでは、まずは自社のサイトの速度を調べてみましょう。

2.サイトの表示速度を調べる

実際に自社のサイトの読み込み速度がどのくらいなのか調べた事はありますか？
今回の表示速度を考える上で、自社のサイトがどの程度の表示速度なのかを知っていた方が、表示速度を高速化するための施策も理解しやすいと思いますので、まずは計測してみましょう！

2-1.GTmetrixでサイト表示速度を確認する

ページの読み込み速度を計測してくれる便利なサイトをご紹介します。
GTmetrix
https://gtmetrix.com/
このサイトでは、サイトのURLを入れるだけで、簡単に計測してくれます。
img_web_speed01
Googleの表示速度計測ツール「Page Spead」の評価や、
Yahooの表示速度計測ツール「YSlow」の評価がA〜Fのランクが表示され、
他のサイトと比較する際にも便利です。
ちなみに当サイトのTOPぺージを計測してみたところ
img_web_speed02
EやD判定でした、、、Page Load Timeは、3.8秒、、、
これでは、すぐに離脱されてしまいますね。。。
このサイトを改善した例を、当記事の最後に整理します。

2-2.PageSpeed Insightsでサイト表示速度を確認する

こちらもURLを入力するだけで、簡単に現状のサイトの表示を確認することができ、さらには改善案まで提案してくれます。
Googleからの提案の改善方法なので、こちらの情報に対応すると検索の上位表示にも影響がありそうですね。
https://developers.google.com/speed/pagespeed/insights/
img_web_speed08
img_web_speed09
 

2-3.Googleアナリティクスでサイト表示速度を確認する

img_web_speed10

2-3-1.サイトの速度（サマリー）

サイト全体の平均表示速度（平均読み込み時間）など、が把握できます。
こちらは当社のとあるサイトの結果ですが、「6.69秒」かかってしまっていますので、、、改善が必要ですね。

2-3-2.ページ速度

こちらはサイト内のページごとの表示速度が、サイト全体の表示速度と比較してどの程度速いのか、遅いのかが把握できます。
img_web_speed11

2-3-3.速度の提案

こちらでは、ページごとに表示速度を改善する際の改善案を提案してくれます。
その改善案は先程紹介させていただいた「PageSpeed Insights」での提案なので、やはりここで提案されることをその通りに対応しておくことが、SEO（検索エンジン対策）的にも最善策のようですね！
img_web_speed12
これを改善するための方法をA判定にするための
ページの表示を遅らせない（早くする）ための5つの方法を下記に整理しましたので、ぜひご覧下さい。

3.サイト表示速度を速くするための３つの改善方法

3-1.HTTPリクエスト数を減らす

ページにアクセスすると、最初にHTMLファイルが読み込まれて、そこからスタイルシートや画像ファイルの順番で読み込まれます。
そのため読み込むCSS、Javascritp、画像ファイルの数を減らすだけでも、ページ全体の読み込み速度は速くなります。

3-1-1.CSSスプライトで表示させる

スプライトでの表示とは、アイコンやボタンの画像を１つの画像にしておき、
その画像のどの部分を読み込むかによって表示させるものをしている方法です。
よくボタンなどのロールオーバーの加工で使われますが、アイコンなどに使うのも効果的でしょう。
サイト内で使用する画像をまとめて1枚画像にすることで、サーバーへのリクエスト回数を減らし、読み込み速度を速くすることができます。
下図の様なイメージです。
img_web_speed13

3-1-2.CSSやJavascriptのファイル数を減らす

ある特定のページでは使用しているCSS、Javascriptも、そのページで使用していないのにheader部分に埋め込みっぱなしの場合があります。
無駄なファイルを読み込まれないようにしましょう。

3-2.画像を軽量化する（容量を減らす）

そもそも読み込む画像が重いものだと

3-2-1.PNG画像の軽量化

PNG画像を軽量化するためのサイトがあります。
tinypng
https://tinypng.com/

上記のリンクをクリックすると下記の様なページが表示されます。
img_web_speed03
ページ上部の点線内に軽量化したい画像をドロップすればOK！
結構簡単に軽量化が可能になります。

3-2-2.JPG画像の軽量化

JPG画像を軽量化するためのサイト・アプリがあります。
JPEGmini
http://www.jpegmini.com/
上記のリンクをクリックすると下記の様なページが表示されます。
img_web_speed04
上記ページの「TRY IT NOW」のというページ右上の赤いボタンをクリックすると、
アプリのダウンロード画面が開きます。
そこからダウンロードの手順に従って行くと、
itunesを開いて、下記の様なダウンロード画面が開きます。
img_web_speed05
ダウンロード後、アプリを起動すると下記の様な画面が開きます。
img_web_speed06
この画面に、サイズを軽量化したい画像ファイルのドロップするだけで、軽量化が完了します。
ぜひ使ってみてください。

3-3.画像の表示を遅らせる「Lazy Load」の導入

「Lazy Load」は、ページを読み込む際に全ての画像を読み込ませないプラグインの事です。今回はjQueryプラグインのLazy Loadを使ってみました。
私の場合、画像を多く使うランディングページなどのページを作らせて頂く事が多いので、このLazy Loadはとても重宝しております。

3-3-1.Lazy Load Plugin for jQueryをダウンロード

Lazy Load Plugin for jQuery
https://github.com/tuupola/jquery_lazyload

上記ページ（github）にある「Download  ZIP」の部分をクリックして、ファイル一式ダウンロードします。
ダウンロードしたjquery_lazyload-master.zipを解凍すると、jquery_lazyload-masterというフォルダの中に、様々なファイルが含まれていますが、その中で利用するのは、jquery.lazyload.js、またはjquery.lazyload.min.js(軽量版)のどちらか1つだけでOKです。
img_web_speed14

3-3-2.ライブラリの読み込み

そして当該ページからそのファイルを含む「javascript」のファイルを読み込みます。
読み込みには、下記のソースを<head></head>内にて読み込みます。

<head>
<!-- jQueryライブラリの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- ライブラリの読み込み -->
<script src="./jquery.lazyload.js"></script>
</head>

3-3-3.Lazy Loadを起動

次に実際に「Lazy Load」を起動させるスクリプトをページ内に書き込みます。
今回はページ中の全ての要素を対象としますので、「’img’」を指定します。
実際のタグは下記になります。
下記のタグをそのままページの内に書き込みます。

<script>
     $('img').lazyload({
         effect: 'fadeIn',
        effectspeed: 2000
     });
</script>

img要素を対象にしてeffectオプションに「fadeIn」を指定して、その読み込み速度をミリ秒で指定します。

3-3-4.HTMLへの書き込み

ここまで出来たら後は簡単です。
遅れて読み込みたい対象となる画像に対して、「data-original」を指定します。
「data-original」の値に、本来の画像のソースを書き込みます。
それとは別に本来の「src」の値では、ダミーの画像を読み込むようにしておきます。
その画像には軽い透過gifなどを読み込むようにしておくと良いでしょう。
ここまでの設定が終了しましたら、表示領域に入った時に「data-original」の画像が表示されるようになります。
実際に画像に埋め込むタグは下記のようになります。
通常の画像の読み込み：
<src=”img/title1.jpg”>
↓
Lazy Loadを利用する場合の読み込み：

<src="img/sp.gif" data-original="img/title1.jpg">

デモ画面
http://seeds-create.co.jp/blog-header/

4.まとめ

ページの表示速度を速めるための方法をいろいろ整理してみましたが、あなたのサイトではどこまで最適化できていますか？
最適化する方法は、大きく分けて下記の３つです。

  • HTTPリクエスト数を減らす
  • 画像を軽量化する（容量を減らす）
  • 画像の表示を遅らせる「Lazy Load」の導入

まずはご自身・自社のサイトの表示速度を計測してみましょう！
 
ちなみに最初に表示速度を調べた当サイトでも、このページで紹介した「画像の軽量化」など対応したところ、下記のように変わりました！
img_web_speed02-2
「Page Speed Score」はAランクになりましたよ^^
その他も、もっと徹底的に対策をすれば、改善されること間違いなしですね。
ぜひ皆様も試してみてください！

こちらの記事もよく読まれています

【WordPress】画像データを遅延読込するプラグイン「Lazy Load」

WordPressを高速化してコンバージョン率アップ！導入すべき３つのプラグインまとめ

【Ajax】本をめくるような効果が簡単に作れる『Moleskine Notebook with jQuery Booklet』

コンテンツSEO成功のためのキーワードの選び方２ステップ


無料PDFダウンロード

当社のWEBマーケティングメールマガジンにご登録いただきますと、下記の５つのPDFを無料でプレゼント！

  • コンテンツマーケティングの教科書
  • メールマーケティングの教科書
  • LP（ランディングページ）制作の教科書
  • WEBアクセス解析の教科書
  • サーチコンソールの使い方

詳細はこちら