ページ表示速度を上げるとコンバージョン率も上がる

ページ表示速度が大切

ページの表示速度が、コンバージョン率に影響することがわかっています。

・表示速度が１秒増えるごとに、コンバージョン率が７％減少する
・ECサイトへの訪問者のうち５７％が、ページ表示に３秒以上は待てない
（参照元）

これらの調査結果からも、ページ表示速度の大切さがわかります。
表示速度を上げることは、ユーザーを逃がさないことになります。つまり直帰率の減少につながるということです。

また、SEOの観点からも、表示速度を上げることは有利に働きます。2012年にGoogleは、ページ表示速度が検索ランキングを決めるひとつの要因であることを公表しています。

ページ表示速度は検索ランキングを決めるうえのひとつの要因で、ページ表示速度を上げただけで検索ランキングの大幅な向上は期待できないでしょう。しかし、コンバージョン率の向上も考えると、ページ表示速度の向上は、軽視できない大切な要因になります。

表示速度を上げるために、まずは現状の速度を把握することから始めましょう。
２つの速度計測ツールを紹介します。

PageSpeed Insights by Google
Googleが提供する計測ツールです。
URLを入力してボタンをクリックすることで表示速度を計測してくれます。

計測結果と速度向上のための対策が表示されます。

pingdom
スウェーデンのWEBモニタリングサービス企業が提供している無料ツールです。
こちらもGoogleのツール同様、URLを入力してボタンをクリックすることで表示速度を計測してくれます。

各ファイルごとの読み込み速度を棒グラフで表示されるので
どのファイルの読み込みがボトルネックになっているかが視覚的に確認できます。

ウェブページの表示時間の80％は、ページを構成する様々なパーツをダウンロードするのに費やされています。パーツというのは、画像、スタイルシート、スクリプト、Flashなどです。

これらのパーツそれぞれに対して1回ずつHTTPリクエストが送信されて、ダウンロード処理が行われています。サーバーの応答時間が、表示速度にダイレクトに影響します。

サーバーのスペックを上げるというのが、シンプルな対策ですが、予算の関係で難しいことが多いです。そういった場合は、どうしたら良いでしょうか。

表示速度を上げる最も手っ取り早い方法は、サイトデザインをシンプルにすることです。ダウンロードするパーツを減らすことによって、表示速度が上がります。

例えば以下のような対策が有効です。

・ページの要素数を減らす
・可能な場合は、画像の代わりにCSSを利用する
・複数のCSSを１つにまとめる
・スクリプトを最小限にし、ページ下部で読み込む

不必要に画像サイズが大きすぎたりしていると、それだけで表示速度が落ちる原因になってしまいます。ページ内で利用している画像を最適化することで、表示速度が改善されます。

画像サイズ
画像サイズを最適なサイズにトリミングしましょう。
例えばウェブページの幅が570ピクセルの場合、画像は同じ幅にリサイズすべきです。また、最低限のレベルまで画像の色深度を下げたり、画像のコメントを削除することでも表示速度を改善することができます。

画像フォーマット
JPEGが最適な画像フォーマットです。
PNGも良いですが、古いブラウザは完全にはサポートしていない可能性があります。また、BMPやTIFFは使わないようにしましょう。

CSSファイルは、２つの形式に分けられます。
「外部ファイル形式」と「インライン形式」です。

一般的には外部ファイル形式のCSSの方が望ましいです。コードのサイズを小さくし、重複も減らすことができるからです。外部ファイルCSSは、できるだけ少ないファイル数にまとめるようにしましょう。

１つのファイルにまとめられれば、サーバーからのダウンロードも１回で済むので、表示速度を上げることができます。

WordPressを利用しているサイトは、プラグインの数を減らすだけでも、表示速度が向上するケースがあります。

便利なプラグインがたくさんあるので、色々とインストールしてしまいがちですが、プラグインが多すぎると表示速度が落ちてしまいます。重要でないプラグインは削除しましょう。

Googleの公式サイトでも、表示速度を向上させるための情報がありますので、ぜひ参考にしてみてください。