SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

サイトのページ表示速度の測定と改善方法【PageSpeed Insights(ページスピードインサイト)の使い方まで解説!】

サイトのページ表示速度を測定(計測)し、必要に応じて改善しながら、ホームページ(ブログ記事)のパフォーマンスを高めることが大切です。

そのためには、主に、Google PageSpeed Insights(ページスピードインサイト)という専用ツールを活用します。

今回は、サイトのページ表示速度の測定方法と改善方法について中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

サイトのページ表示速度の測定と改善方法【PageSpeed Insights(ページスピードインサイト)の使い方まで解説!】【Google PageSpeed Insights(ページスピードインサイト)の使い方まで解説!】

サイトのページ表示速度とは?

サイトのページ表示速度とは、ホームページにアクセスしたときにサイトのページが表示される速さのことを意味します。

サイトのページ表示速度は、主に時間(秒など)やスコア(点数)の指標が使われます。

公式では、以下のように定義されてます。

「サイトの速度」カテゴリのレポートには、コンテンツの読み込み速度や応答速度が表示されます。

「サイトの速度」カテゴリのレポートでは、以下の 3 種類の反応時間を測定します。

  • サイト上でサンプルに設定したページビューの表示時間。
  • トラッキングの対象にしている個々のクリック、イベント、ユーザー操作の実行速度または読み込み時間(画像の表示時間やボタンのクリックの反応時間など)。
  • ブラウザがドキュメントを解析し、ユーザーの操作が可能になるまでの時間。

※引用元:サイトの速度について – アナリティクス ヘルプ

サイトのページ表示速度を測定(計測・チェック・分析)する方法

サイトのページ表示速度は、以下のようなツールを使うことで測定できます。

これらのツールで測定する方法を、以下それぞれ紹介します。

Google PageSpeed Insights(ページスピードインサイト)

PageSpeed Insights(ページスピードインサイト)の概要と使い方について、解説します。

PageSpeed Insightsとは?

PageSpeed Insightsとは、入力したURLのページ速度スコア(点数)とWebページの表示速度改善に必要なアドバイスをしてくれるGoogle公式提供の無料ツールです。
別名、「Googleスピードチェック」「サイトスピードインサイト」「Google速度テスト」「Googleスピードインサイト」「Googleスピードテスト」ツールなどとも言われてます。

また、Google Chrome拡張機能(アドオン)であるPageSpeed Insights (with PNaCl)を入れることで、Basic認証をかけて開発している途中のサイトでもPageSpeed Insightsのページ表示速度解析ができるようです。

PageSpeed Insightsの使い方について

PageSpeed Insightsのサイトにアクセス後、「ウェブページのURLを入力」し、「分析」ボタンをクリックします。

PageSpeed Insightsの使い方 イメージ①

②モバイルの点数が表示され「速度」「ユーザーエクスペリエンス」それぞれ確認できます。
表示された「修正が必要」「修正を考慮」「合格項目」に沿って対策を検討しましょう。

PageSpeed Insightsの使い方 イメージ②

③パソコンタブに切り替えると、パソコンの点数が表示され「提案の概要」が確認できます。
表示された「修正が必要」「修正を考慮」「合格項目」に沿って対策を検討しましょう。

PageSpeed Insightsの使い方 イメージ③

PageSpeed Insightsでは、主に以下のような修正項目を提案してくれます。

  • 圧縮を有効にする
  • ブラウザのキャッシュを活用する
  • 画像を最適化する
  • HTML/CSS/JavaScriptを縮小する
  • リンク先ページのリダイレクトを使用しない
  • スクロールせずに見えるコンテンツのレタリングをブロックしているJavaScript/CSSを排除する
  • サーバーの応答時間を短縮する

Test My Site(テストマイサイト)

Test My Site(テストマイサイト)は、モバイルサイトの速度をテストできるGoogleの無料ツールです。

Test My Siteにアクセス後、ページURLを入力し、「矢印ボタン」をクリックします。

Test My Site(テストマイサイト)でサイトのページ表示速度を測定する方法①

②「評価が終了するまで1分ほどかかる場合があります」のメッセージと共に、分析中の画面が表示されます。

Test My Site(テストマイサイト)でサイトのページ表示速度を測定する方法②

③読み込み時間が「●秒」と表示され、サイトのページ表示速度を簡単に測定できます。

Test My Site(テストマイサイト)でサイトのページ表示速度を測定する方法③

Googleアナリティクスのサイト速度

Googleアナリティクスの「サイト速度」は、アクセス解析ができるGoogleの無料ツール「Googleアナリティクス」の分析項目の一つで、サイトへのアクセスに要した時間をあらゆる視点で分析できるレポートです。

Googleアナリティクスにログイン後、左メニューの「行動」⇒「サイト速度」⇒「概要」をクリックします。

Googleアナリティクスのサイト速度でサイトのページ表示速度を測定する方法①

上記のように、「平均読み込み時間(秒)」「平均リダイレクト時間(秒)」「ドメインの平均ルックアップ時間(秒)」「サーバーの平均接続時間(秒)」「サーバーの平均応答時間(秒)」「ページの平均ダウンロード時間(秒)」の指標が表示され、自動で測定されたサイト速度が簡単に確認できます。

また、左メニューの「行動」⇒「サイト速度」⇒「ページ速度」をクリックすると、ページごとに表示速度が確認できます。

Googleアナリティクスのサイト速度でサイトのページ表示速度を測定する方法②

上記は、サイトに対する各ページの平均読み込み時間の割合です。
サイト全体平均より遅ければ「赤」、早ければ「緑」で表示され、各ページのパフォーマンスが割合で把握できます。

各ページのリンクをクリックすれば、実際の読み込み時間が確認できます。

平均読み込み時間は、ページの読み込みにかかった平均時間(秒数)。
ページビューの開始(ページへのリンクがクリックされたときなど)から、ブラウザで読み込みが完了するまでの時間です。

サイトのページ表示速度を改善する方法と事例

サイトのページ表示速度を改善する方法と実際に改善した事例について、解説したいと思います。

サイトのページ表示速度を改善する方法について

サイトのページ表示速度を改善するには、主にPageSpeed Insightsを使って表示される、モバイル「速度」とパソコン「提案の概要」のアドバイス項目を修正します。

ブラウザのキャッシュを活用する

サーバーでブラウザのキャッシュを有効にし、静的なリソースのキャッシュの有効期間は1週間以上、広告やウィジェットなどのサードパーティリソースの場合は、キャッシュの有効期間を1日以上にする
※参考:ブラウザのキャッシュを活用する | PageSpeed Insights | Google Developers

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

スクロールせずに見える範囲の表示に必要なJavaScriptはインライン化し、ページに機能を追加するのに必要なJavaScriptは、スクロールせずに見える範囲のコンテンツが配信されるまで遅延させる。また、この方法で読み込み時間を改善するためには、CSS の配信を最適化する必要あり。
※参考:レンダリングを妨げる JavaScript を削除する | PageSpeed Insights | Google Developers

圧縮を有効にする

ウェブサーバーで圧縮を有効にし、一般的なウェブサーバーで圧縮を有効にするには、「Apache: mod_deflate を使用する」「Nginx: HttpGzipModule を使用する」「IIS: HTTP 圧縮を設定する」の方法があります。
※参考:圧縮を有効にする | PageSpeed Insights | Google Developers

画像を最適化する

すべての画像に対して基本的な最適化(不要なスペースの削除、色深度の最小許容レベルへの低減、画像のコメントの削除、適切なフォーマットでの画像の保存)と高度な最適化(JPEG や PNG ファイルの高度な(ロスレス)圧縮)の両方を行う。
※参考:画像を最適化する | PageSpeed Insights | Google Developers

CSS、HTML、JavaScriptを縮小する

余分なスペース、改行、インデントなどの不要なバイトを取り除き、HTML、CSS、JavaScript を圧縮する。
HTMLの圧縮は「PageSpeed Insights の Chrome 拡張機能」、CSSの圧縮は「YUI Compressor と cssmin.js 」、JavaScriptの圧縮は「Closure Compiler、JSMin、YUI Compressor 」が使用可能です。
※参考:リソース(HTML、CSS、JavaScript)を圧縮する | PageSpeed Insights | Google Developers

サーバーの応答時間を短縮する

速度の遅いアプリケーション ロジック、遅いデータベース クエリ、遅いルーティング、フレームワーク、ライブラリ、リソースによる CPU の消費、メモリ不足など改善し、サーバーの応答時間は 200 ミリ秒以下に減らす必要がある。
※参考:サーバーの応答時間を改善する | PageSpeed Insights | Google Developers

リンク先ページのリダイレクトを使用しない

Googleの推奨事項に従ってレスポンシブなウェブデザインを使用する。
※参考:リンク先ページでリダイレクトを使用しない | PageSpeed Insights | Google Developers

表示可能コンテンツの優先順位を決定する

ページのスクロールせずに見える範囲のコンテンツの表示に必要なデータ(HTML マークアップ、画像、CSS、JavaScript)のサイズを制限する。
※参考:スクロールせずに見える範囲のコンテンツのサイズを削減する | PageSpeed Insights | Google Developers

上記のような項目を修正し、モバイル「速度」、パソコン「提案の概要」の点数を上げながら、サイトのページ表示速度を改善しましょう。

ちなみに、別途表示されるモバイル「ユーザーエクスペリエンス」では、モバイルフレンドリー対応に必要な修正項目が表示されます。
なので、基本的にサイトのページ表示速度の改善ではなく、主に、モバイルファーストインデックスの対応に向けた修正項目となります。

サイトのページ表示速度の改善事例

サイトのページ表示速度を改善する方法を、弊社の事例を参考にご紹介します。

pho04

上記は、平均読み込み時間が最大117.35秒の不安定な状況から、スムーズにサイト閲覧できるよう改善した事例です。

主な対策としては、サーバースペックを変更し、ファイル容量を増やしました。

その他、サイトのページ表示速度を改善するには以下のような方法があります。

ページ速度レポートを分析すると、ページの表示時間で特に影響の大きい要素を把握できます。たとえば、サイトのターゲット ユーザーのいる地域でインターネットの接続速度が通常よりも遅いことや、ブラウザの種類によってページの表示時間が大きく変動するといったことがわかる場合もあります。こうした分析結果を活用すれば、サイトのパフォーマンスを改善するうえで的を絞った対策を採ることができます。たとえば、次のように指定します。

  • 特定のブラウザで表示時間が長いページがある場合は、ブラウザ関連の問題を調べ、該当のブラウザ向けにより最適化したページを作成します。
  • 主要な地域や ISP での表示時間が長い場合は、帯域幅の狭い環境に適した別のページを作成します。
  • 表示時間の長いランディング ページが複数ある場合は、ページビュー数の最も多いページを選んで重点的に改善します。
  • 平均表示時間が非常に長い場合は、[ページ読み込み時間バケット] の分布を確認して問題の重要度を評価します。

速度の改善を図る場合は、最も速度の遅い指標(表示時間の値が最も大きい指標)から優先的に改善します。たとえば、次のような改善を図ります。

  • 平均リダイレクト時間が長い: リダイレクトが必要かどうか調べます。また、平均リダイレクト時間が長くなる原因となっている参照 URL がないかどうかも確認します。
  • ドメインの平均ルックアップ時間が長い: 応答時間が安定して短くなる DNS プロバイダへの変更を検討します。
  • サーバーの平均応答時間が長い: バックエンドの処理時間を短縮するか、ユーザーから近い場所にサーバーを配置します。
  • ページの平均ダウンロード時間が長い: 初期データのサイズを小さくします。

※引用元:サイトの速度レポートの分析 – アナリティクス ヘルプ

ページ読み込み速度の目安と平均

ページ読み込み速度の目安と平均について、弊社サイトの平均読み込み時間を例に以下紹介したいと思います。
以下全てトップページの数値となります。(※2018年1月1日~31日時点のGoogleアナリティクスデータ参考)

これら3サイトの読み込み時間の平均を計算すると、「(5.9秒 + 4.6秒 + 6.09秒) /3 = 5.53秒 」となります。

今回の事例だけから見れば、「5.53秒」がページ読み込み速度の平均であり、目安の一つと言えます。

重要なのは、サーバーやファイル、HTMLコードのリソース改善に最善を尽くし、ページごとかつサイト全体の読み込み時間の平均を常に下げるように対策することです。

サイトのページ表示速度とSEOの関係

サイトのページ表示速度は、検索ランキングのシグナルとして導入されてるため、SEOと深い関係があります。

PC検索では2010年4月にすでに導入されてます。

原文:
As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.

翻訳:
この取り組みの一環として、今日では検索ランキングアルゴリズムにサイトのスピードという新しいシグナルが追加されています。 サイトの速度は、ウェブサイトがウェブリクエストにどのくらい迅速に応答するかを反映します。

※引用元:Official Google Webmaster Central Blog: Using site speed in web search ranking

また、モバイル検索では2018年7月に検索ランキングのシグナルとして導入予定です。

読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

※引用元:Google ウェブマスター向け公式ブログ: ページの読み込み速度をモバイル検索のランキング要素に使用します

つまり、ユーザーの利便性を向上させるために、サイトのページ表示速度が重要な要素となります。

PC向けページ、モバイル向けページともに、サイトにアクセスしてからページが表示されるまでの時間を早めるようなSEO対策を施すことで、上位表示が期待できます。

サイトのページ表示速度と離脱率について

サイトのページ表示速度と離脱率の関係についての分析結果と見解を、Googleが以下のように公開してます。

原文:
Yet 53% of visits are abandoned if a mobile site takes longer than three seconds to load.2 That’s a big problem.

翻訳:
モバイルサイトの読み込みに3秒以上かかる場合は、訪問の53%が放棄されます。 それは大きな問題です。

※引用元:New Industry Benchmarks for Mobile Page Speed – Think With Google

つまり、ページ表示速度が遅いと離脱率が高まり、サイトのパフォーマンスに悪影響が及ぶということです。

これは、モバイルサイトの限定的な分析結果と見解ですが、PCサイトにおいても同じことが言えるでしょう。

まとめ

サイトのページ表示速度を早めて、ユーザービリティを高めましょう。
ユーザビリティを高めるには、モバイルサイトを最適化することも重要です。

PCとモバイルともに、利便性の高いコンテンツにし、リンクが集まりやすいサイトにしながら、上位化を目指すことが重要です。

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す

SEO対策無料ご提案はこちら