PageSpeed Insightsの使い方とは？｜表示速度の改善策も解説

「PageSpeed Insights（ページスピードインサイト）」を活用することで、サイトのページ速度を測定することが可能です。スマホとPCに分けて分析をすることができるため、端末ごとの改善方法も分析することができます。

ページの表示速度は、Webサイトを運営する上で重要な要素。

表示速度はユーザー体験に影響し、さらにSEOにも影響するため改善方法をしっかりと理解しておくべき内容と言えるでしょう。

今回の記事では、PageSpeed Insightsの使い方と表示速度の改善方法について解説をするので、ぜひ最後まで参考にしていただけると嬉しいです。

「PageSpeed Insights」はどんなツール？

「PageSpeed Insights」とは、Googleが提供しているWebサイトの表示速度を測定および評価をする分析ツールです。

非上部便利なツールで以前から多くの人に利用されていましたが、2021年11月16日にアップデートされました。

とはいえ使い方に大きな変更点はなく、分析したいWebサイトのURLを入力するだけで簡単に表示速度の評価を調べることが可能です。評価は「0〜100」のスコアによって判断することができます。

スコアが高いほどページ速度も速くなるため、非常にわかりやすいでしょう。

無料で簡単にWebサイトの表示速度を分析することができるため、まずは気になるサイトを診断してみてはいかがでしょうか。

PageSpeed Insightsでサイトを分析

PageSpeed Insightsで取得できる情報について

• 実際のユーザーの環境で評価する：指標ごとに速度や安定性を評価
• パフォーマンスの問題を診断する：指標ごとに速度や安定性を評価
• 改善できる項目：ページ表示速度の改善ポイントと短縮時間の予測
• 診断：WebサイトがWeb開発で推奨される設定に適しているか診断
• 合格した監査：問題がないと診断された項目

2021年11月のアップデートから、分析結果は「実際のユーザーの環境で評価する」データと、「パフォーマンスの問題を診断する」データに分かれて表示されるようになりました。こちらの項目はリニューアル前、それぞれ「フィールドデータ」「ラボデータ」という名称で記載されていましたが、アップデートによって多少、表示方法に変化がありました。

それでは、各項目で分析できる内容について具体的に解説をしていきます。

実際のユーザーの環境で評価する

「実際のユーザーの環境で評価する」では、それぞれの指標ごとに速度や安定性を評価しており、1ヶ月間における実際のユーザーデータを元に評価が行われています。Webに関する主な指標の評価について、「合格」であれば問題ないでしょう。

それぞれの指標については下記の通りとなります。

• Largest Contentful Paint （LCP）：メインコンテンツの読み込み時間
• Cumulative Layout Shift（CLS）：視覚的な安定性
• First Contentful Paint（FCP）：最初のコンテンツ表示にかかるまでの時間
• First Input Delay （FID）：Webページの応答性
• Time to First Byte (TTFB)：サーバー初期応答時間

パフォーマンスの問題を診断する

「パフォーマンスの問題を診断する」では、特定の環境下を想定して分析した結果が表示されています。パフォーマンスは「0〜100」のスコアによって表示され、より高いスコアを狙うことが大切です。

とはいえ、このスコアは推定値のため変動する可能性があることを理解しておきましょう。

それぞれの指標は下記の通りです。

• First Contentful Paint（FCP）：最初のコンテンツ表示にかかるまでの時間
• Time to Interactive（TTI）：Webページのが操作可能になるまでの時間
• Speed Index：ページの読み込み時間
• Total Blocking Time（TBT）：合計ブロック時間
• Largest Contentful Paint（LCP）：メインコンテンツの表示にかかる時間
• Cumulative Layout Shift（CLS）：視覚的な安定性

パフォーマンスを100点にすることは限りなく困難ですが、70〜80点くらいを目指せると十分でしょう。

改善できる項目

「改善できる項目」では、表示速度を向上させるための改善方法が提案されます。

また、推定ですが短縮できる時間も記載されています。上から順に優先度が高い項目となっているため、優先度の高い項目は改善してみるといいでしょう。

診断

「診断」では、アプリケーションのパフォーマンスに関する改善点が提案されています。こちらも優先度によって並んでおり、改善することによって僅かではありますが表示速度を改善することにつながります。

合格した監査

「合格した監査」では、分析の結果特に改善する必要がないと判断された項目が表示されています。それぞれの項目をクリックすることで、詳細について確認することが可能です。

この項目が多いほど、Wevサイトの表示速度に関する対策がされているということになります。そのためにも、本記事でご紹介する「表示速度を改善する4つのポイント」を参考にして改善していきましょう。

Webサイトの表示速度が重要な理由について

なぜWebサイトの表示速度が重要なのか、具体的にこちらでご紹介をします。その理由とは、「ユーザー体験（UX）」と「SEO」に影響を及ぼすからです。

具体的に表示速度が遅いことによってどのようなデメリットがあるのか、下記にまとめました。

ユーザー体験に大きく影響する

インターネットが普及し、今ではスマホを使用してインターネットを利用する割合が増えました。PCよりも手軽にインターネットにアクセスすることができるため、特に20代・30代の9割以上が、主にスマホによってインターネットを利用しています。

そして、「表示速度」が遅いことによってページの離脱率は大きくなり、あなたも表示速度が遅いサイトから離脱した経験もあるのではないでしょうか。

ページの離脱率が高いことによって、ECサイトなどであれば、売上に直結する大きな問題となります。

また、そのようなユーザー体験の低いサイトはGoogleからの評価も下がってしまい、結果としてSEOにも悪影響となるのです。

これらのことから、Webサイトの表示速度を向上させることによって、ユーザーの離脱を防ぐと共にSEOにマイナスな影響を与えないために重要な項目となるのです。

ページがインデックスされない可能性がある

ページの読み込み速度は重要と述べましたが、あまりにも速度が遅い場合、クローラーからインデックスされにくくなるというデメリットがあります。

実際に、GoogleのJohn Mueller氏は「Googleクローラーは1000ms（1秒）以上掛かるとクローリングに制限が掛かる」という内容の発言をしているため、表示速度を改善することは重要な課題と言えるでしょう。

参考：https://youtu.be/AjlTNJiSeQ4

表示速度を改善する4つのポイント

• 画像を最適化・圧縮
• CSSやJavaScriptを最小化
• キャッシュを適切に活用
• サーバーの応答時間を短くする

表示速度を改善するためには、上記4つのポイントを意識してみましょう。

画像を最適化

Webサイトには多くの画像が使用されているケースがあり、最適化されていない画像はPageSpeed Insightsでスコアを下げる原因となります。 画像の読み込みには時間がかかってしまうため、「Webp」のようなWebサイト向けの次世代画像フォーマットへと変換したり、圧縮してサイズを小さくしたりすることで最適化をしていきましょう。 画像を最適化することによって、ページの表示速度の改善につながります。

最適化するのにCDNといわれるサービスの導入をおススメします。

弊社では導入しやすいCDNサービスを提供しています。

画像を最適化しページの読み込みを高速化するツール「SIO」

CSSやJavaScriptを最小化

Webサイトには多くのCSSファイルやJavaScriptファイルが含まれており、これらを最小化することによって表示速度の改善を期待できます。

プログラミングのソースコードには余分なスペースや改行が含まれているケースが多く、これらが読み込み速度を遅くする原因となります。そのため、できるだけソースコードを最小化して無駄を省くことで、ファイルのデータ量を減らすことができるのです。

しかしソースコードの可読性が落ちてしまうため、今後修正したい場合に手間がかかってしまうこともあるため要注意です。

編集する場合は、あらかじめバックアップを取っておくといいでしょう。

キャッシュを適切に活用

「キャッシュ」の仕組みを適切に活用することによって、表示速度の改善が期待できます。

もし「ブラウザのキャッシュを活用する」という表示が出た場合は、下記の2つが原因となっている可能性があるため確認してみましょう。

• ファイルのキャッシュが許可されていない
• キャッシュの有効期間が短い

そのため、まずブラウザキャッシュを有効にした上で、有効期間を1日以上に設定してみましょう。

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

サーバーの応答時間が遅くなる要因はいくつか考えられ、サーバーのスペックやフレームワーク、メモリ不足などが考えられます。これらを改善することで、表示速度の改善を期待することが可能です。

しかし、様々な要因が考えられるため知見のある人が原因を調査して対応することが望ましいです。

まとめ

ページの表示時速度はユーザー体験とSEOに大きく影響を及ぼします。Googleも推奨している改善策のため、積極的に改善することが望ましいです。

表示速度を改善する方法をこの記事でご紹介しましたが、まずは思いつく改善策を実行し、PageSpeed Insightsにて最適化できる項目がないかチェックしてみるといいでしょう。ただし、必ずしも100点を目指す必要はありません。

PageSpeed Insightsを活用することで分析したいサイトの表示速度を調べることができるため、ぜひ活用してみてはいかがでしょうか。

あわせてお読みください。

参照：リクトで実施しているSEO対策