【初心者向け】Page Speed Insightsの使い方と改善ポイントをわかりやすく解説

どうも、ウェブ企画パートナーズの竹内です。
今回は「Page Speed Insights」の初心者さん向け解説をしていきたいと思います。
「これを使う意味は何なのか？」「利用した後どのように改善していけばいいのか？」
そういったポイントをざっと理解していただくためのガイドになっていますので、これからWebサイトを改善していきたいという方は、ぜひ最後までご覧いただければと思います！

Page Speed Insightsとは？

まずはPage Speed Insights（以下、PSIと略します）をサクッとご紹介します。
PSIは、Googleが提供しているサイトで、あなたのWebサイトのURLを入力するだけでページ表示速度などを分析してくれるツールです。

• GoogleがSEOの評価基準に「サイト表示速度」を加味し始めた
• しかし「具体的に何をどう改善していいか分からない」人も多い
• そこで「ここが問題なのでこう直してね！」とアドバイスしてくれるのがPSI

というわけですね。Googleが公式に出しているツールなので信頼性は高いですし、無料で使えるので一度は試しておくことをおすすめします。

なぜPSIを使う必要があるのか？

Googleは、検索エンジンで上位に表示されるかどうかを決めるうえで、多数の指標を評価しています。
そのうちのひとつがWebサイトの読み込み速度です。ページが重くて遅いサイトはユーザーの満足度を下げる大きな要因になります。
「重い」「押しても反応しない」「レイアウトが崩れて見づらい」などのマイナス要素は、検索順位にも影響を与えるとGoogleは公言しています。

つまり、PSIを使ってサイト速度や使い勝手の指標を把握する → 問題点を改善 → ユーザー体験も向上→結果的にSEOもプラスに、という流れがあるので、PSIの利用はとても重要だと言えます。

実際にPSIを使ってみる

PSIのトップページは非常にシンプルで、URLを入力する欄があるだけです。
そこに 「あなたが改善したいサイトのURL」 を入力して、分析ボタンを押すと、モバイル（スマホ）版の評価とデスクトップ版の評価の2種類が表示されます。

• 最初の画面は「携帯電話」(モバイル) の評価がデフォルトで表示
• 今は検索順位の評価基準が「モバイルサイト重視」なのでデフォルトがスマホ版になっている
• 「デスクトップ」タブを押すとPC版の評価が表示される

ただし、スマホ版だけ良ければいいわけではなく、PCで見るユーザーさんも多いので、どちらの評価もチェックしておくと安心です。

PSIで出てくる主な指標

PSIを使うと、画面上にいくつか指標が表示されます。代表的なのが以下の5つです。

1. LCP (Largest Contentful Paint)
2. INP (Interaction to Next Paint)

• ※2024年3月から正式にFID（First Input Delay）に代わって重要視される予定の新指標

1. CLS (Cumulative Layout Shift)
2. FCP (First Contentful Paint)
3. TTFB (Time to First Byte)

この中で、特に重要視されているのがCore Web Vitalsという指標で、Googleの公式ドキュメント（Google検索セントラル）でも強く推奨されています。
Core Web Vitalsは以前は「LCP・FID・CLS」の3つでしたが、2024年3月からはFIDがINPに置き換えられると言われています。
つまり、今後は「LCP・INP・CLS」がサイト評価に大きく関わってくる、というわけですね。

LCP（Largest Contentful Paint）

• 読み込みパフォーマンスを示す指標
• ページの読み込み開始から2.5秒以内にこのLCPを実現するのが理想
• 「最も大きいコンテンツ（画像やメインビジュアルなど）が表示されるまでの時間」を測っています
• 重い要素が表示されれば「だいたい全体も表示できてるよね」という考え方

たとえば、トップページで大きな画像やスライドショーなどを設定している場合、そこがLCPの対象になります。「なかなか表示されない…」といった場合は、改善が必要かもしれません。

INP（Interaction to Next Paint）

• インタラクティブ性を測る指標
• ボタンやメニューをタップ・クリックしたとき、すぐ反応するかどうか
• 以前は「FID（First Input Delay）」が使われていたが、今後は「INP」に重視が移行
• FIDは「最初の入力（クリックなど）までの遅延」に焦点が当たっていたが、INPはページ全体のあらゆる操作タイミングを評価する

INPが悪いと、サイトを開いた直後はボタンが押せるのに、途中のメニューやQ&Aセクションをクリックしても反応が鈍い…なんて事態になります。これではユーザーのイライラは募る一方ですよね。Googleはそれも含めて見ているので要注意です。

CLS（Cumulative Layout Shift）

• 視覚的安定性を示す指標
• ページが読み込まれる途中でレイアウトがずれて、押そうとしたボタンが移動してしまったりする事象を数値化
• 広告バナーが後から読み込まれて、クリックしようとした場所が突然ズレる、などが典型例

たとえば「戻るボタンを押そうとしたのに、広告が出てきて注文ボタンを誤って押してしまう」など。
これはユーザー体験として最悪ですし、トラブルにつながる可能性も高いです。こうした不安定さをなくすのがCLSの改善です。

そのほかの指標

PSIには、下記のような指標も表示されます。Core Web Vitalsではないものの、改善すると全体的なパフォーマンスアップにつながります。

FCP (First Contentful Paint)

• ページを開いたときに最初に描画される要素が表示されるまでの時間

• LCPが「もっとも大きな要素の描画」なら、こちらは「最初の要素が出るまでの速さ」のイメージ

TBT (Total Blocking Time)

• 操作できるようになるまでの合計ブロック時間

• ユーザーがページを開いた際、スクリプトなどが処理中でボタンが無反応状態になっている時間を測る

Speed Index

• ページのコンテンツが表示されるまでの体感的な速度

• 画面にコンテンツが表示される速さ全体を視覚的に指標化

PSIの詳細画面と改善案の見方

分析結果のページを下にスクロールすると、実際の読み込み段階がスクショで時系列的に並んで表示されます。
さらに下へ行くと「診断」や「チューニングの提案」があり、ここが最も参考になる部分です。

• 赤い「警告マーク」＝かなり重要な改善ポイント
• 黄色い「注意マーク」＝改善するとより良くなるポイント
• 白い丸（情報的なアイコン）＝特に問題なし

「こうやって直してね」と具体的に教えてくれますが、内容はかなりエンジニア向けです。
HTMLやCSS、JavaScriptなどの専門知識が必要なことも多いので、Web担当者さん一人でポチッと直せるケースはそう多くないかもしれません。
それでも「どの部分が問題を引き起こしているのか」を把握しておくことは大切です。
また、指標ごと（FCP、LCP、TBT、CLSなど）に絞り込んで見ることもできるので、優先度が高い指標から順に対策していくのがおすすめです。

Core Web Vitalsの対応とPSIだけでは不十分な部分

先ほどお話ししたように、Core Web Vitalsは今後のGoogle検索でますます重視されると言われています。
ただ、PSIを回すと分かりますが、INPが画面に出てこない場合があります（現在はFIDが表示されがち）。ツールのアップデートが追いついていない部分もあるんですね。

また、PSIだけですべてを把握できるわけではないという点も覚えておいてください。

• Lighthouseなど、他の解析ツールも使い分けるとより正確に問題点を発見できる
• Core Web VitalsのスコアとPSIの各指標は完全に一致していないことがある

とはいえ、PSIで出てくるレッドマークをひとつひとつ潰していくだけでも、十分にパフォーマンスは上がりますし、ユーザー体験は向上します。
「Googleに評価されるため」というだけでなく、使いやすいサイトにするという根本目的のためにも、定期的にチェックする習慣は付けておきたいところです。

改善の難易度と専門家の手助け

PSIで問題点を洗い出しても、いざ改善となると専門的な知識が必要な場合がほとんどです。

• 画像の最適化
• JavaScriptの圧縮・遅延読み込み設定
• CSSの分割やCritical CSSの実装
• サーバーの設定やキャッシュの最適化
• フレームワークのバージョンアップやアップデート対応

…などなど、実際に手を動かすエンジニアさんの領域かもしれません。
ただ、「今どんな問題があって、何を直すべきなのか」の把握だけでも大きな一歩です。

まとめ

• PSIはGoogle公式のサイト速度チェックツール
• SEOやユーザー体験向上のためにも使う価値大
• LCP・INP・CLSは特に重要視されるCore Web Vitals
• ほかにもFCPやTBT、Speed Indexといった指標もあり、総合的に評価される
• 改善方法はエンジニア領域が多いが、問題点の把握だけでも意義がある
• PSIだけでは十分でないこともあるが、組み合わせて使うとより効果的

もし「自社サイトの点数があまりにも低い」とか「広告費をかけているのに離脱率が高い…」という方は、思い切ってWebサイトの改善やリニューアルを検討してみてください。
表示速度や操作性を大幅に向上させるだけで、ユーザーが快適に使ってくれるサイトになります。リピート率も上がり、売上やお問い合わせ数の増加も見込めるかもしれません。

弊社（ウェブ企画パートナーズ）でも、Page Speed Insightsの技術支援やサイトリニューアル時のパフォーマンス改善などを承っておりますので、ご興味があればお気軽にご相談ください。

それでは、最後まで読んでいただきありがとうございました！
「Page Speed Insights」を活用して、あなたのサイトをどんどん使いやすくしていってくださいね。