サイト改善

”売上”を大きく左右する「Webページ読み込み速度・表示速度」

SEO対策だけではなく、サイトのCVRを改善するためには、「Webページ表示速度・読み込み速度」の存在を無視できません。本コラムでは、Webページ表示速度・読み込み速度の調査方法、改善方法を簡単に解説します。

【目次】
1.Webページの読み込み速度・表示速度とは?
2.3つの調査・分析方法
3.今すぐ実践できる改善方法5選
4.まとめ

1.Webページの読み込み速度・表示速度とは?

【Webページの読み込み速度・表示速度とは?】
Webページにアクセス後、読み込みを開始してから、データの読み込みを完了するまでの時間を「読み込み速度」と言い、表示完了までの時間のことを「表示速度」と言います。

【Webページの読み込み速度・表示速度の重要性】
Webページの「読み込み速度」はユーザーにとっての利便性アップにつながる指標の1つであり、「直帰率」や「CV」に影響します。そのため、UX(ユーザー体験) に深く関連している重要な指標と言えます。

そして、Webページの「読み込み速度」は、Googleが検索順位を決定付ける指標の1つでもあります。そのため、Webページの「読み込み速度」が遅くなると、検索順位が落ち、PVやセッション数などに悪影響を与えてしまいます。

【補足①】
2018年に、Googleはモバイル検索のページ読み込み速度をランキング要素に加える「スピードアップデート」の正式導入を発表しました。

※詳細はこちらをご参照ください。

ただし、「スピードアップデート」はWebページの「読み込み速度」が遅いと検索エンジンからの評価が低くなるアルゴリズムであり、表示速度が速いときに検索エンジンからの評価が上がるわけではありません。

【補足②】
GoogleはWebページの「表示速度」と「直帰率」の関係について下記のように発表をしています。

● 表示速度が1秒から3秒に落ちると、直帰率は32%上昇する
● 表示速度が1秒から5秒に落ちると、直帰率は90%上昇する
● 表示速度が1秒から6秒に落ちると、直帰率は106%上昇する
● 表示速度が1秒から10秒に落ちると、直帰率は123%上昇する

また、Amazonは以下の調査結果を発表しています。

ページの表示速度が0.1秒遅くなると、売り上げが1%低下し、1秒高速化すると10%の売上が向上する。

2.3つの調査・分析方法

ここでは、以下の3つの調査方法を紹介します。

1) PageSpeed Insights
2) Google Analytics
3) 各ブラウザの「デベロッパーツール」

【➀PageSpeed Insights】
Googleが提供している「ページパフォーマンスを測定するツール」です。

測定したい対象URLを入力することで、PC版・モバイル版の両方をリアルタイムで調査することができます。

Webページの「表示速度」を100点満点で評価してくれる他、改善内容を提案してくれるため、技術面で不安な方にはおススメです。
※任意のURLを指定するだけで利用できるため、自社サイトに限らず、競合サイトを含めた調査が可能になっている点も魅力です。

● スコアは100点満点で表示されます。
 100点に近いほど、高い評価となります。

● 評価は信号のように、3段階に分けられます。
 ―  0~49点   赤(Low)
 ―  50~89点   黄色(Medium)
 ―  90~100点   緑(Good)

● 目指すべきは、90点以上の評価“緑”です。
 赤く表示された方は、提案内容を参考に積極的な改善を検討しましょう。

【②Google Analytics】
多くの方が利用している「GoogleAnalytics」でも、計測が可能です。

過去の「読み込み速度」と比較することができる点が特徴です。
例えば、週末に行ったプロモーション時の状況をチェックすることができます。

GoogleAnalyticsのレポート画面を開き、「行動」➡「サイトの速度」➡「概要」にて確認できます。

● 確認できるレポートは以下になります。
 ・平均読み込み時間
 ・平均リダイレクト時間
 ・ドメインの平均ルックアップ時間
 ・サーバーの平均接続時間
 ・サーバーの平均応答時間
 ・ページの平均ダウンロード時間

【③各ブラウザの「デベロッパーツール」】
各ブラウザに実装されている「デベロッパーツール」や「Web開発ツール」、「開発者ツール」で確認できます。

本コラムでは、GoogleChromeの「デベロッパーツール」をベースに説明します。

「PageSpeed Insights」に類似していますが、「デベロッパーツール」の場合、調査する人の環境(ネットワークなど)に左右されます。

一方で、インフラ関連(ハードウェア、ネットワークなど)のボトルネック特定には役立ちますので、エンジニアの方にはおススメです。

※参考)「デベロッパーツール」の起動は以下のショートカットが便利です。
 Windows ➡ ctrl + shift + I、
 Mac   ➡ command +option + I

Webページの「表示速度」を確認する際には「Network」タブを開きます。
ページ表示完了後、下部に表示されるFinishの時間が、ページが表示完了するまでの時間です。(JSなどの非同期ファイルが含まれている場合は表示が完了していても、読み込みが続く場合があります。)

※注意)
キャッシュが残っていると正確な表示速度を計測できません。必ず、キャッシュデータを削除、もしくはブラウザのシークレットモードを有効にした状態で調査してください。

▼ STEP1:キャッシュ(一時ファイル)を削除します。

▼ STEP2:ページを再読み込みさせてください。(ctrl + r が便利です。)

▼ STEP3:読み込み時間・表示時間を確認してください。

3.今すぐ実践できる改善方法5選

ここでは、前述の「Google PageSpeed Insights」の調査をベースに解説します。
同ツール内の「改善できる項目」を確認のうえ、参考にしてください。

Webページの読み込み速度・表示速度を改善する方法として、以下の5パターンをご紹介します。

1) コンテンツのサイズを縮小化(圧縮)
2) ブラウザ上の描画プロセス(レンダリング)の最適化
3) 使用していないJavaScriptの削減
4) テキスト圧縮の有効化
5) その他の改善方法

1つ1つ確認していきましょう。

【➀コンテンツのサイズを縮小化(圧縮)】
サイト訪問者の回線および帯域は必ずしも十分ではないケースがあります。
そこで、読み込みサイズを縮小化(圧縮)することで読み込み速度を改善させることができます。

※補足)
「Adobe PhotoShop」から、画像の圧縮に役立つ無料ツールがいくつか提供されています。
ex.「Optimizilla」

【②ブラウザ上の描画プロセス(レンダリング)の最適化】
HTMLの記述によりブラウザの処理に遅延が生じてしまうケースがあります。

原因の1つとして、CSSファイル、JavaScriptファイルの読み込みなどのレンダリングブロックによる表示の遅延があります。

「Google PageSpeed Insights」の「改善できる項目」より、「レンダリングを妨げるリソースの除外」を押下することで、改善対象として優先度の高い画像一覧を確認することができます。

レンダリングのブロックを発生させているファイルの読み込みを最適化させ、ブロックしているファイルを非同期で読み込ませる方法で解決させるのが一般的です。

【③使用していないJavaScriptの削減】
表示対象のWebページに使用していないJavaScriptがHTMLに残っているケースがあります。表示に不要なJavaScriptを読み込んでいることで、無駄なレンダリング時間が発生してしまいます。

不要なファイルの記述は省くなどの改善が適切です。

「Google PageSpeed Insights」の「改善できる項目」より、「使用していないJavaScriptの削減」を押下することで改善対象の候補となるJavaScriptを確認できます。

なお、Wordpressを利用しているサイトではプラグイン「Flying Scripts」を利用することで任意のJavaScriptの読み込みをスキップさせることができます。

また、上記対策後はページの表示に異常がないことを目視確認するようにしましょう。

【④テキスト圧縮の有効化】
テキストベースのリソースを圧縮させることで、通信量を削減することができます。

「Google PageSpeed Insights」の「改善できる項目」より、「テキスト圧縮の有効化」を押下することで改善対象の候補となるテキストファイルを確認できます。

【⑤その他の改善方法】
その他、細かい改善方法は色々ありますが、技術的な解決方法をもう少しご紹介します。

● ブラウザキャッシュの活用
 ・表示頻度の高いページ、共通で読み込まれることが多いエリア(ヘッダーなど)の一部コンテンツ(画像、CSS、JSなど)をキャッシュさせるように設定します。

 ・一般的なサーバー環境、ユーザー環境ではキャッシュが有効活用されているのですが、意図的にキャッシュが有効化されていない、もしくはキャッシュ保持期間を短く設定しているケースがあります。

 ・そこで、Webサーバー側で.htaccessが設定可能な場合、ExpiresヘッダーやCache-Control ヘッダーを使って、キャッシュの有効期限を設定するのが望ましいです。

 ・Expiresヘッダーでは有効期限を年月日時で指定します。一方Cache-Controlヘッダーの場合は、日時指定ではなく、サーバーがレスポンスを受け取ってからキャッシュを削除するまでの期間を秒数で指定します。

 ・また、「.htaccess」ファイルで設定せずとも、HTMLソースのhead内にmetaタグとしてcache-controlやexpireを設定することで、有効期限を設定することもできます。

● サーバー・ネットワークの遅延
 ・上記で紹介した問題以外に、インフラがボトルネックになっている場合があります。Webサーバー、ネットワーク回線、アプリケーションなど、ボトルネックの場所は様々です。この問題をきちんと調査し、解決させるのはかなり大変なことです。

 ・社内の担当技術者か専門の対策会社に相談することをおススメします。

 ※なお、共用レンタルサーバーを格安で利用している場合、アクセス数が多い時間帯に同居している他社の影響でトラフィック制限(帯域制限)がかかることがあります。

4.まとめ

いかがでしたか?最後に、ポイントを整理します。

  • 売上に影響するWebページの「読み込み速度」、「表示速度」は改善する。
  • Google提供の「PageSpeed Insights」を利用すれば、パフォーマンス分析と同時に改善のアドバイスがもらえる。
  • アドバイス通りにサイズ圧縮、レンダリングの改善、不要情報の削除を行う。
  • 上記で改善できない場合はインフラの問題の可能性があるので、専門のエンジニアに相談する。

以上となります。


ご案内

最後までお読みくださり、ありがとうございました。弊社では、広告運用や成果報酬型ABテストなど、各企業様の課題に応じたWebマーケティングの施策をカスタマイズでご提案できます。また、弊社内で蓄積・体系化されたノウハウを活用した体制・仕組みづくりまで、総合的なご支援が可能です。お悩み・ご相談などございましたら、お気軽にご相談ください。

▼ ABテストに関するセミナー動画を無料配信中です!

※詳細コンテンツはこちらをクリックしてください。

▼ Web広告のマネジメントに関するセミナー動画を無料配信中です!

※詳細コンテンツはこちらをクリックしてください。

ABテストの分析方法【カイ二乗検定】前のページ

ABテストツールの設定方法【Googleオプティマイズ】次のページ

関連記事

  1. ABテスト 基本編

    ABテストの進め方・やり方_概要編

    ABテストを進めるにあたり、スタート地点で最も重視したいのは「伝える…

  2. ABテスト 実践編

    ABテストの方法【Google:リスティング広告編】

    「誰に」「何を」「どうやって」自社の製品・サービスの魅力を伝え、利用…

  3. ABテスト 実践編

    ABテストの方法【LP(ランディングページ編)】

    「誰に」「何を」「どうやって」自社の製品・サービスの魅力を伝え、利用…

  4. ABテスト 基本編

    今さら聞けない!「ABテスト」

    ネット事業を活用する企業にとって「サイト改善」は永遠のテーマ。なかで…

  5. ABテスト 実践編

    ABテストの方法【メルマガ編】

    「誰に」「何を」「どうやって」自社の製品・サービスの魅力を伝え、利用…

  6. ABテスト 実践編

    ABテストツールの設定方法【Googleオプティマイズ】

    ABテストを行う際、A案・B案・C案など複数のクリエイティブを自動で…

おススメのコラム

  1. 今さら聞けない!「ABテスト」
  2. ABテストの進め方・やり方_概要編
  3. ABテストの分析方法【カイ二乗検定】
  4. ”売上”を大きく左右する「Webページ読み込み速度・表示速度…
  5. ABテストの事例【CTA:購入ボタンの色編】

書籍のご案内

ECの総合支援サービス『ECフルポート』

PAGE TOP