PageSpeed Insightsとは？使い方やSEO効果について解説

PageSpeed Insightsは、Googleが無償で提供しているWebページのパフォーマンスを評価し、改善のための指針を提供するツールです。ユーザーがWebページにアクセスする際に、そのページがどれくらい速く表示されるか、またはどれくらいの時間がかかるかを評価します。
今回は、PageSpeed Insightsがどういうツールなのか、概要や使い方、SEO効果を解説。PageSpeed Insightsの指針の重要性や、サイトの改善方法などもご紹介します。
PageSpeed Insightsの具体的な見方や、指針からどのように自身のWebを改善していけばよいかの参考にしてください。

PageSpeed Insights（ページスピードインサイト）とは？

冒頭でもお伝えしましたが、PageSpeed Insightsとは、Googleが無料で提供するWebページのパフォーマンス分析ツールです。このツールでは、その名の通り特定のWebページの読み込み速度と、ユーザーエクスペリエンスに関する情報を調べることができます。

PageSpeed Insightsは、モバイルデバイスとデスクトップデバイスの両方のパフォーマンスを評価しスコアを提示してくれます。
スコアは、0から100の範囲で示され、高いスコアが最適なパフォーマンスを示すのが特徴です。
また、ページの読み込み時間を改善するための具体的なアドバイスを提供してくれるのもメリットのひとつ。具体的には、画像の最適化、キャッシュの有効化、JavaScriptやCSSの圧縮など、さまざまな改善策を示してくれます。

Webページのパフォーマンスは、ユーザーエクスペリエンスや検索エンジンのランキングにも影響を与えるため、PageSpeed Insightsはウェブ開発者やサイト運用者にとって重要なツールなのです。

PageSpeed Insightsの使い方と目的

すでにお伝えしましたが、PageSpeed Insightsの目的は、特定のWebページの読み込み速度とパフォーマンスを評価し、サイト運用者に改善方法などのアドバイスをおこなうことで、Webページを最適化することにあります。
PageSpeed Insightsが提示した、Webページの読み込み速度の改善に向けた具体的なアドバイスや改善提案を実行することで、Webサイトのユーザーエクスペリエンスを向上させることが可能となるのです。
また、モバイルデバイスとデスクトップデバイスの両方でWebページのパフォーマンスを評価してくれるので、特定のデバイスに合わせた最適化をおこなうことができます。

PageSpeed Insightsを使用する際は、以下のような手順でおこないます。

まず、PageSpeed Insights（https://developers.google.com/speed/pagespeed/insights/）のページにアクセスします。

「ウェブページのURLを入力」と記載してある部分に、分析したいWebページのURLを入力します。
「分析」をクリックすると、Webページに関する詳細な分析結果が表示され、パフォーマンスの改善を促す具体的な提案やアドバイスが表示されます。

PageSpeed Insightsの重要性とは？SEO効果と合わせて解説

PageSpeed Insightsの重要性は、Webページの読み込み速度とパフォーマンスを最適化することによる多くの利点にあります。
この項目では、PageSpeed Insightsの重要性とSEO効果について詳しく説明します。

PageSpeed Insightsの重要性

PageSpeed Insightsの重要性を語るうえで、欠かせないのがユーザーエクスペリエンスの向上です。
ユーザーは高速なWebページを求めており、遅い読み込み時間や遅延があるWebページにストレスを感じるため、離脱率の増加や顧客ロイヤルティの低下につながる可能性があります。
高速な読み込み時間は、ユーザーエクスペリエンスを向上させ、ユーザーの注入を増やし、サイトに滞在させることができれば、検索エンジンから価値の高いWebサイトと評価してもらえるでしょう。
また、Webページの表示時間が短縮できれば、ユーザーは迅速にコンテンツにアクセスできるため、コンバージョン率向上の効果も期待できるのです。

さらに以下は、Googleが公表している、ページの表示スピードとユーザーの直帰率のデータとなります。

• 表示速度：1～3秒の遅延、直帰率：32%増加
• 表示速度：1～3秒の遅延、直帰率：90%増加
• 表示速度：1～6秒の遅延、直帰率：106%増加
• 表示速度：1～10秒の遅延、直帰率：123%増加

くわえて、ページを表示するのに3秒以上を要するモバイルページでは、なんと53%ものユーザーがサイトから離脱しているという結果となっているのです。

データ引用元：Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed
https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

このデータからもわかるように、ページの表示速度は、ユーザーのサイトからの離脱に大きく関わっています。
Webサイトの表示速度を改善することは、非常に大切なプラクティスといえるのです。

PageSpeed InsightsがSEO効果に及ぼす影響

Googleは検索順位を決定する要因のひとつとして、Webページのパフォーマンスを重視しており、高速な読み込み時間を持つWebページは検索結果のランキングにおいて優位になる傾向があります。
つまり、PageSpeed Insightsでの改善により、検索エンジン最適化（SEO）の観点からWebページの表示順位の向上が期待できるのです。

また、Googleは、「Core Web Vitals」と呼ばれるパフォーマンス指標を重視しており、これらの指標に基づいてWebページの評価を行っています。
PageSpeed Insightsは、これらの指標を分析し、改善のための指針を提供します。つまり、Webページがこれらの指標に準拠していることは、SEOの観点においても重要となるのです。

総括すると、PageSpeed Insightsの重要性は、ユーザーエクスペリエンスの向上、検索エンジンランキングの向上、モバイルフレンドリー性の向上に関連しています。
Webページの読み込み速度とパフォーマンスを最適化することは、ユーザーにとって優れたエクスペリエンスを提供し、SEOにおいても有益な効果をもたらすところにあるのです。

PageSpeed Insightsの評価項目

PageSpeed Insightsは、Webページのパフォーマンスを評価するために複数の評価項目を設けています。

評価項目として表示される項目は、主に以下となります。

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)
• First Contentful Paint (FCP)
• Interaction to Next Paint (INP)
• Time to First Byte (TTFB)

それぞれの項目について、詳細をお伝えしますので参考にしてください。

Largest Contentful Paint (LCP)

Largest Contentful Paint（LCP）は、ページの読み込み中に表示される最も大きなコンテンツ要素（メインコンテンツ）が画面に表示されるまでの時間を評価する指標です。
LCPは、ユーザーが最も重要なコンテンツを視覚的に認識するために必要な時間を測定します。

LCPの目的は、ユーザーエクスペリエンスを向上させるために、Webページの読み込み速度を評価すること。
通常、LCPの対象となるコンテンツ要素は、テキスト、画像、ビデオなど、ページ上でメインとなるコンテンツです。
ユーザーが最初に目にするコンテンツが迅速に表示されることは、ウェブページのパフォーマンスとパーセプションに重要な役割を果たします。
LCPの向上は、ユーザーがコンテンツに早くアクセスできるようにし、ウェブページの満足度とエンゲージメントを高める上で重要な指標です。

LCPの測定値は秒単位で表され、LCPが速い（短い時間）ほど、ユーザーはコンテンツを早く閲覧できるため、ページの読み込みがスムーズに感じられます。
一般的な目標は、LCPを2.5秒未満に保つことです。ただし、GoogleはLCPが2.5秒以上の場合、改善の余地があるとして指摘する場合があります。
逆に、LCPが2.5～4.0秒となると要改善、4.0秒以上かかるとなると不十分という評価となり、改善が求められます。
LCPの改善方法としては、画像の最適化やレンダリングの最適化、ネットワークの最適化が挙げられます。

First Input Delay (FID)

First Input Delay（FID）は、ユーザーがページの読み込みが完了してから実際にインタラクション（クリック、タップ、キーボード入力など）に対してブラウザが応答するまでの時間を評価する指標。つまり、FIDはユーザーがページ上で行動しようとしたときの反応性を測定するための指標です。

FIDの目的は、ユーザーがWebページ上で操作しようとしたときに、ブラウザがどれだけ速く反応するかを評価すること。
たとえば、ユーザーがページ上のボタンをクリックしても、入力フィールドに文字を入力しても、ブラウザが応答しない場合、そのWebサイトはユーザーエクスペリエンスが悪いサイトといえます。
FIDは、ユーザーがページ上でのインタラクションをスムーズに行えるかどうかを測定する重要な指標となるのです。
FIDの改善は、ユーザーエクスペリエンスの向上に直結しており、ユーザーがインタラクションをスムーズにおこなえるようにすることで、ユーザーの満足度が向上し、コンバージョン率の向上の効果も期待できます。

FIDはミリ秒単位で表され、値が小さいほど、ユーザーはより早くブラウザの応答を実感できます。
一般的な目標は、FIDを100ミリ秒以下に短縮することです。Googleは、FIDが100ミリ秒以上の場合、改善の余地があるとして指摘することがあります。
また、100～300ミリ秒以下の場合は要改善、300ミリ秒以上だと不十分という評価となります。
FIDの改善には、JavaScriptの最適化や、レンダリングの最適化にくわえ、ネットワークの最適化などが挙げられます。

Cumulative Layout Shift (CLS)

Cumulative Layout Shift（CLS）は、Webページの読み込み中に発生する予測不可能なレイアウトの変更の合計を評価する指標です。
これはどういうことかというと、ユーザーがWebページを閲覧した際、画像の表示が遅れたり、レイアウトが突然変わったり、誤ってクリックしてしまいそうな広告が表示されてしまったりなど、「意図しない（予期しない）ズレ・挙動」を数値化したものなのです。

ページの読み込み中に意図しない移動やシフトが起きることで、ユーザーが誤操作をしたり、コンテンツに対する誤ったクリックやタップを行うリスクが増えてしまうため、CLSはユーザーエクスペリエンスにおいて重要な要素とされています。
ユーザーが意図しないシフトや移動に遭遇することが少ないほど、ページの使用性が向上し、ユーザーの満足度が高まるため、CLSの改善はユーザーエクスペリエンスの向上に直結しているといえるのです。

CLSの評価は、画面内の要素の変動量とその変動の重要性を組み合わせておこなわれます。具体的には、CLSスコアが0から1の範囲で表され、0に近いほどレイアウトの変更が少ないことを示し、1に近いほど変更（ズレ）が大きいことを意味します。
CLSスコアが0.1～0.25の場合は要改善、0.25以上の場合は不十分という評価となります。

CLSの改善は、画像や広告などの幅と高さを明確に指定し、コンテンツの読み込み中の移動を最小限に抑えたり、テキストが適切に読み込まれるように位置の変更を最小限に抑えたり、広告の読み込み時のレイアウト変更を制御し、読み込み後に意図せずにページがシフトすることなどです。

First Contentful Paint (FCP)

First Contentful Paint (FCP)は、Webページの読み込み中に最初のコンテンツが表示されるまでの時間を評価する指標です。
FCPは、ユーザーがWebページのコンテンツを最初に見るまでの待ち時間を測定します。

FCPの目的は、ユーザーに対して最初の視覚的なフィードバックを提供することです。
Webページが読み込まれ、最初のコンテンツが表示されるまでの時間が短いほど、ユーザーはページの読み込み進捗を認識しやすくなり、待ち時間を減らすことができます。
ユーザーが最初のコンテンツを早く表示できるほど、コンテンツへのアクセスが迅速になり、ユーザーの満足度が向上が期待できるのです。

FCPは主に、以下のようなコンテンツ要素の表示を測定します。

• テキストブロック
• 画像
• ビデオ
• キャンバス（Canvas）要素
• SVG（Scalable Vector Graphics）要素

FCPの測定値は秒単位で表され、FCPが速い（短い時間）ほど、ユーザーはコンテンツを早く閲覧できるため、ページの読み込みがスムーズに感じられます。

FCPの改善方法としては、サーバーレスポンスの最適化や画像の最適化、レンダリングの最適化にくわえ、ブラウザキャッシュを使用して再読み込みを最小限に抑えるなどが挙げられます。

Interaction to Next Paint (INP)

Interaction to Next Paint（INP）は、ユーザーがWebページ上でのインタラクション（クリック、タップ、キーボード入力など）を行った後、次の描画（Paint）までの時間を評価する指標です。
INPでは、ユーザーの操作に対するブラウザの応答性を測定します。

INPの目的は、ユーザーがインタラクションを行った後に、ブラウザがどれだけ速く再描画（Paint）を行うかを評価することです。
ユーザーがボタンをクリックしてから、実際に視覚的なフィードバックや変化が表示されるまでの待ち時間が短いほど、ユーザーエクスペリエンスは向上します。

INPの測定値はミリ秒単位で表され、ユーザーの操作と次の描画の間の時間を示します。INPが短い（小さい時間）ほど、ユーザーはインタラクションに対するブラウザの応答が早く感じられます。
具体的には、0～100ミリ秒が良いとされ、100～300ミリ秒が要改善、300ミリ秒以上だと不十分となります。

INPの改善方法としては、インタラクションに関連するタスクや処理を優先的に実行するようにし、ブラウザの応答性を向上させたり、JavaScriptやレンダリングを最適化させたり、ネットワークの最適化をおこなうなどが挙げられます。

Time to First Byte (TTFB)

Time to First Byte (TTFB)は、Webページの読み込み中に最初のバイト（データ）がブラウザに到着するまでの時間を評価する指標です。
TTFBは、クライアントがリクエストを送信してからサーバーが最初のレスポンスを返すまでの待ち時間を測定します。

TTFBの目的は、サーバーの応答時間を評価することです。
Webページの読み込み中に最初のバイトが遅延して到着すると、ユーザーはコンテンツの表示を待たなければなりません。TTFBが短いほど、ユーザーはより早くコンテンツの読み込みが始まることを実感し、ページの応答性が向上します。
ユーザーにコンテンツの読み込みが迅速であると感じてもらうことは、ユーザーエクスペリエンスの向上に直結しているため、TTFBは重要な指標と考えてよいでしょう。

TTFBの測定値はミリ秒単位で表され、TTFBが短い（小さい時間）ほど、サーバーからの応答が迅速であることを示します。
具体的な数値として、100ミリ秒未満であれば良いとされ、200ミリ秒未満が推奨数値、600ミリ秒以上となると不十分となり改善が必要となります。

PageSpeed Insightsによるサイトの改善方法は？

前項目では、PageSpeed Insightsの指標について解説しました。
それでは、実際にPageSpeed Insightsの結果画面に表示される改善方法について、具体的にどのような対応が必要なのかをお伝えします。

画像を最適化する

画像を最適化するための方法はいくつかありますが、一般的な画像最適化の方法をいくつか紹介します。

まず、もっとも基本的な最適化が、画像を圧縮することです。
画像を圧縮することで、画像ファイルのサイズを減らし、読み込み時間を短縮することが可能となります。
画像を圧縮する際は、オンラインの画像圧縮ツールや画像編集ソフトウェアを使用して、適切な圧縮レベルを選択し、画像の品質とファイルサイズのバランスを調整するとよいでしょう。
また、Webページ上で表示する画像の実際の表示サイズに合わせて、画像のサイズを調整するのも効果的です。
大きすぎる画像を表示すると、余分なデータの読み込みが発生し、パフォーマンスが低下します。表示サイズに合わせて画像をリサイズし、必要なピクセル数だけを保持するようにしましょう。
さらに、画像の最適なフォーマットを選択することも重要です。
一般的な画像フォーマットにはJPEG、PNG、WebPなどがあります。JPEGは写真やグラフィックスに最適で、ファイルサイズを小さく保ちながら品質を維持できます。
PNGは透明度や図形などの保存に適しています。WebPは、高い圧縮率と高品質を提供する新しい画像フォーマットですが、ブラウザのサポートに注意が必要です。
異なるデバイスや画面サイズに対応するために、レスポンシブイメージの使用を検討することも大切。CSSのメディアクエリやsrcset属性を使用して、適切な画像をデバイスに提供するレスポンシブイメージの活用も検討してください。
くわえて、画像の遅延読み込みを実装することで、ページの初期表示を高速化を図ることができます。
画面内に表示されるまで読み込まれない画像は、必要に応じて遅延して読み込まれるため、初期ページの読み込み時間が短縮されます。

これらの画像最適化の手法を組み合わせることで、ウェブページのパフォーマンスを向上させることができるでしょう。
オンラインの画像最適化ツールや、プラグインを使用することも効果的です。
ただ、最適化を行う際には、画像の品質や見た目に影響がないよう注意してください。

CSSやHTMLやJavaScriptを最適化する

CSS、HTML、およびJavaScriptを最適化する方法はいくつかあります。
それぞれの言語に対する最適化の手法をいくつか紹介しますので、参考にしてください。

まず、CSSの最適化についてご紹介します。
CSSの最適化するには、結合と圧縮を実行するのがよいでしょう。複数のCSSファイルを1つに結合し、不要な空白やコメントを削除することでファイルサイズを減らします。また、CSSの圧縮ツールを使用して、冗長なコードを削除し、効率的なコードを生成するなどが有効です。
くわえて、不要なスタイルの削除を実施するのもよいです。使用されていないスタイルルールやセレクタを削除し、WebページのHTML構造に基づいて、必要なスタイルのみを適用することで、パフォーマンスを向上させることができます。

HTMLの最適化については、不要なスペース、改行、コメントなどの不要なコードの削除が有効です。これにより、ファイルサイズを縮小し、読み込み時間を短縮させることができます。
さらに、重要なCSSやJavaScriptコードをHTMLファイルにインラインで埋め込むことで、ファイルの数とサイズを減らすという手法もあります。
ブラウザキャッシュを適切に設定すれば、重複するリクエストやファイルの再ダウンロードを防げます。

続いてJavaScriptの最適化についてですが、HTMLの最適化と同様に、要なスペース、コメント、改行を削除することが有効です。JavaScriptの圧縮ツールを使用して、変数名の短縮や冗長なコードの削除などをおこなうのもよいでしょう。
また、JavaScriptファイルにキャッシュ制御のヘッダーを設定することで、ブラウザキャッシュを活用し、再ダウンロードを減らせます。

これらの最適化手法を使用することで、CSS、HTML、JavaScriptのファイルサイズを縮小し、読み込み時間を短縮することが可能となるのです。
ただし、最適化を行う際には、可読性や保守性を損なわないように注意しながら実行するようにしてください。

使用していないJavaScriptを削除する

未使用のJavaScriptコードを削除することにより、ファイルサイズを減らし、読み込み時間を短縮することができます。
また、ウェブページやアプリケーションのメンテナンスや保守性も向上します。ただし、コードの削除には慎重さが必要であり、他の部分への意図しない影響を避けるため、注意深く作業することが重要です。

使用していないJavaScriptを削除するには、まずウェブページやアプリケーションのコードベースを注意深くレビューし、使用されていないJavaScriptコードを特定することからはじめます。
ソースコード解析ツールや、静的解析ツールを使用して、未使用のコードを自動的に検出しましょう。
削除する予定のコードが本当に使用されていないことを確認するためにテストと検証を実施し、コードの削除後は、ウェブページやアプリケーションの動作に影響がないことを確認するためにテストケースを実行し動作を検証してください。
コードを削除する前に、コードのバックアップを作成することをおすすめします。

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

サーバーの応答時間を短縮するためには、以下の方法を試してみるのがおすすめです。

まず、サーバーの現在の応答時間を把握するために、モニタリングツールやパフォーマンステストを使用してレスポンスタイムを計測してみましょう。
これにより、どの部分が遅延の原因となっているかを特定することができます。

つぎに、サーバーのハードウェアリソース（CPU、メモリ、ディスク容量）を最適化することで、応答時間を短縮することができます。サーバーの性能を向上させるために、十分なリソースを割り当てるか、必要に応じてアップグレードすることを検討してください。

さらに、コンテンツ配信ネットワーク（CDN）を使用すれば、コンテンツを配信することで、サーバーの応答時間を改善できます。CDNは、ユーザーに近い場所に配置されたキャッシュサーバーからコンテンツを提供することで、遅延を軽減します。

また、トラフィックの増加に対応するために、複数のサーバーを使用して負荷を分散し、トラフィックに対して柔軟に対応できる環境を構築するのもよいでしょう。

くわえて、サーバーへのリクエスト数やサイズを最小限に抑えるために、必要なデータのみをリクエストし、不要な情報を排除するのも有効な手段です。
非同期リクエストやバッチリクエストを使用することで、リクエストのオーバーヘッドを減らすことができます。

これらの方法を組み合わせることで、サーバーの応答時間を短縮し、ユーザーエクスペリエンスを向上させることができます。ただし、応答時間を改善するためには、特定の環境や要件に基づいて最適なアプローチを選択し、効果を評価するためのモニタリングとテストを実施することを心掛けましょう。

まとめ

PageSpeed Insightsは、ユーザーがWebページにアクセスした際に、どれくらい速く表示されるか、またはどれくらいの時間がかかるかを評価するGoogleのツールです。
PageSpeed Insightsを活用すれば、サイトの表示速度やパフォーマンスの評価や、改善方法がわかります。
ただ、Webサイトの具体的な改善には、専門的な技術や知見が必要。自分で対応できない、改善方法がわからないという方は、専門家に相談するのもひとつの手です。
SEOコンサルティング「コンセント」では、PageSpeed Insightsの結果に基づいた、Webサイトの改善やSEO対策にご対応しております。
サイト運用やSEO対策、マーケティングについてお困りごとは、「コンセント」へお気軽にご相談ください。