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

PageSpeed Insights(ページスピードインサイト)とは、ウェブサイトがユーザーに表示されるまでの時間を測定したり、スコアとしてパフォーマンスを数値で表示させたりすることが可能なツールとなっています。

Googleから提供されている信頼あるツールとして、簡単に利用することが可能です。ページ表示速度のアップにより、いつでも最適な速度でユーザーへウェブサイトを提供することができるようになりますから、ストレスフリーでウェブサイトを閲覧してもらう事が出来るようになりますし、ページが表示されないことが原因となり、他のウェブサイトへ移ってしまうという事を避けることが可能です。ページ速度は、SEOに関係してきますから、表示速度が遅いという診断結果が出た場合には、速やかに対処するようにしましょう。

サイトの表示速度を上げるには?「test my site」と「Pagespeed Insights」を活用してサイトの表示速度を上げる
サイトの表示速度を上げるには? なぜサイト表示速度が遅くなるのか サイト表示速度が遅くなる原因は色々考えられます。 まず一つ目は、ウェブサイト内…

ページの表示速度は今後さらに重要なセクターになっていきます。Core Web Vitalsの適用などもそのうちの1つです。ユーザーの利便性を高めるためのものですので、自社サイトは必ず表示速度にこだわっていきましょう。

Core Web Vitals(コアウェブバイタル)とは?現状把握から始めてみるコアウェブバイタルの改善・対策
2020年5月11日にGoogleの開発ブログで公開されたCore Web Vitals(コアウェブバイタル)。このアルゴリズムが2021年以降…

PageSpeed Insights(ページスピードインサイト)の料金

PageSpeed Insightsは、無料で利用することができます。

ですが、PageSpeed Insightsで表示速度を測定し、改善までをトータルで委託できるようなサービスを展開している業者もたくさんあります。改善まで行っている時間がない企業や、改善方法が複雑でわからないといった場合には、ウェブサイトの速度アップを委託してしまうのも1つの手かもしれません。

PageSpeed Insights(ページスピードインサイト)の機能

PageSpeed Insightsでは

  • パソコン、モバイルのウェブサイトが表示されるまでの速度を測定し、スコアリング
  • 最適なスコアに近づけるための提案

が可能となります。

表示速度の測定、及びスコアリング

PageSpeed Insights では、Chrome User Experience Reportを利用してウェブサイトがユーザーに表示される速度を測定することができます。Chromeを利用している人のデータを統計した上で計測しているため、非常に正確な速度測定が可能となります。

ここで表示されるレポート内容は、First Contentful PaintとDOMContentLoadedとなっており、全てのページと比較した上で、ページ速度が速いのか、標準なのか、遅いのかを分類し、色分けして表示することができます。色分けとしては、緑、オレンジ、赤の色分け表示になっており、緑が最も早い、赤の表示は速度が遅いという事を表しています。測定結果として表示することができるのは、

  • ウェブサイトの全体の表示速度
  • 画像コンテンツの表示速度
  • ページ内で操作できるまでの時間を測定
  • メインコンテンツを表示するまでの時間
  • 操作後、反応するまでの時間
  • 入力後の反応時間

となります。

最適なスコアに近づけるための提案

PageSpeed Insightsでは、上記の速度表示を行う事が出来るだけではなく、どの位の速度回復が可能になるのかを測定しながら、最適な標示速度に近づけるための提案も行っています。

改善策について、優先的に行った方が良い物は、赤、改善が必要な物はオレンジとなります。その他、改善の必要がなかった物についても、一覧で表示することが可能となっており、改善の必要がなかった物は緑で表示することができます。例えば、改善が必要となる項目の中に、適切な画像サイズという部分が赤く表示されていれば、ウェブサイト内の画像サイズを変更する必要があるといった具合で、ページ速度に影響を与えている物を把握しながら、効率よく表示速度を上げていくことができるのです。最適化が推奨される項目としては、

  • 画像サイズ
  • JavaScriptやHTML、CSSを縮小する
  • リダイレクトの停止
  • 表示されるコンテンツに優先順位をつける
  • スクロールを行わない場合に閲覧可能となるJavaScript/CSSをブロックする
  • キャッシュ
  • 圧縮の有効化
  • サーバの応答を短くする

等があります。これらが改善点として提案されます。

PageSpeed Insights(ページスピードインサイト)の利用方法とは

まずは、PageSpeed Insightsのサイトを探します。ブラウザの検索バーで検索をかけ、PageSpeed Insightsのウェブサイトを訪れましょう。

トップ画面に「ウェブページのURLを入力」と記載された部分がありますから、ウェブサイトURLを入力し、すぐ隣にある分析ボタンをクリックするだけです。パソコンだけではなく、モバイルで表示されるウェブサイトの速度測定も可能となっており、モバイルの場合には、左上のパソコン、モバイルと表示されている部分のモバイルをクリックしてURLを入力しましょう。URLを入力すると、数分で結果を表示することができます。

【SEOの教科書のPageSpeed Insights】
PageSpeed Insights-SEO

分析結果には、数字が表示されます。このスコアは、100を満点として表示されており、この数値が高ければ高いほど、速度表示が最適であることを表しています。高評価と判断される基準としては、85ポイントを目安に考えると良いでしょう。

ページ速度を素早くするための改善方法

では次に、提案された改善をどのように行えば良いのか、詳しく見ていきましょう。

画像サイズの修正

適切な画像サイズの部分が、改善可能と赤くなっている場合の対処法をチェックしていきます。

まずは、ウェブサイトにアップされている画像のフォーマットや圧縮率を確認してみましょう。自分自身でウェブサイトのフォーマットをチェックしたり、圧縮率を変更して最適化したりする事も出来ますが、PageSpeed Insightsを利用して、簡単に画像サイズを適正にすることも出来ます。

診断結果をスクロールしていくと、「このページに最適化された画像、JavaScript、CSS リソースをダウンロードできます」と記載された部分がありますから、こちらをクリックし、最適なリソースをダウンロードした上で、修正を行うと、スムーズに画像サイズやフォーマットを修正できます。

JavaScriptやHTML、CSSを縮小する

JavaScriptやHTML、CSSを縮小するため方法は、先ほどの画像サイズの修正方法と同じです。
「このページに最適化された画像、JavaScript、CSS リソースをダウンロードできます」と記載された部分をクリックして、最適なリソースをダウンロードし、ウェブサイト内の修正を行ってください。

リダイレクトの停止

ウェブサイトのお引越しをしていたり、スマホ版のページへ移ったりする場合など、ページの表示速度が低下してしまう原因となる事もあります。そのため、不必要なリダイレクトを停止しておくことで、速度アップが可能となります。頻繁にリダイレクトをチェックして、余分な物を停止しておくことで、速度低下を防ぎましょう。

スマホ版のページへ移行する場合には、スマホ版ページへ直接アクセスすることができるように設定する必要があります。中間ページが存在すると、その分表示速度が遅くなってしまう原因となりますから、モバイル対応のURLの設定を行うようにしましょう。

表示されるコンテンツに優先順位をつける

ページ内に優先順位をつけておくことで、ユーザーが欲しい情報をすぐに表示することができ、ウェブサイトの離脱を防ぐことができます。優先順位は、メインとなるコンテンツを1番に設定しておくようにしましょう。ウェブサイト内の情報量が多いと、それだけ表示速度は遅くなりがちですから、優先順位を変更したり、画像の圧縮を行ったりして、ファーストビューを素早く表示させるようにしましょう。

スクロールを行わない場合に閲覧可能となるJavaScript/CSSをブロックする

ファーストビューの段階で、まだ閲覧することができないJavaScript/CSSがある場合には、これらの読み込みを後回しにする事で、ファーストビューの画面を素早く表示することができるようになります。
JavaScript/CSSどちらも、HTML内へインライン化する事で後から読み込むことが可能になります。

以上PageSpeed Insightsについて、利用方法や改善点のチェック、改善方法などを詳しくみてきました。画面が表示されるまでの時間が長いという事は、CV率の低下につながってしまいますし、SEO対策を取り入れる上でもマイナスとなってしまいますから、ページの表示速度を意識したウェブサイト運営に取り組んでみてください。

Core Web Vitals(コアウェブバイタル)とは?現状把握から始めてみるコアウェブバイタルの改善・対策」にて、SEOの教科書でも現在対策実施中です。また、結果に関してはSEO対策記にて書かせて頂こうと思います。