第4章 SEO効果測定

PageSpeed Insightsとは?サイト速度とパフォーマンスを改善する具体的な方法と事例

最終更新日:2024年7月11日

PageSpeed Insights(ページスピードインサイト)って何ですか?

SEO初心者
江合

PageSpeed Insightsは、Googleが提供しているウェブサイトのパフォーマンスを測定するためのツールだよ。

 

ウェブページの読み込み速度や使いやすさに関するさまざまな指標を提供してくれるんだ。

ツナガル吉村
吉村

PageSpeed Insightsは、ウェブサイトのパフォーマンスを向上させるための非常に便利なツールです。

 

このツールを使えば、ウェブサイトのどの部分を改善すべきかが明確になります。

 

このページでは、PageSpeed Insightsの基本的な定義から具体的な使い方、実際に行った改善策の実践結果までをわかりやすく解説します。

 

初心者でも簡単に理解できる内容なので、ぜひ読み進めて、PageSpeed Insightsを活用してみてください。

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

PageSpeed Insights(ページスピードインサイト)って何ですか?

SEO初心者
江合

PageSpeed Insightsは、Googleが提供しているウェブサイトのパフォーマンスを測定するためのツールだよ。

ウェブページの読み込み速度や使いやすさに関するさまざまな指標を提供してくれるんだ。

ツナガル吉村
吉村

PageSpeed Insightsは、ウェブページのパフォーマンスを向上させるための強力なツールです。

 

特に、サイトの使いやすさや読み込み速度を最適化するためには、このツールを活用してウェブサイトの改善点を見つけることが重要です。

 

PageSpeed Insightsを使うことで、ウェブサイトの読み込み速度やパフォーマンスを詳細に分析し、どの部分を改善すべきかが明確になります

PageSpeed Insights(ページスピードインサイト)の使い方

具体的な使い方も教えてください。

SEO初心者
江合

もちろん、簡単だから試してみてね。

ツナガル吉村
吉村

PageSpeed Insightsの使い方は以下の通りです。

Step 1

まずは、ページスピードインサイトにアクセスします。

Step 2

計測したいURLを入力し「分析」をクリック

Step 3

携帯電話・デスクトップのパフォーマンス・診断を確認する

PageSpeed Insights(ページスピードインサイト)のスコアリングについて

ページスピードインサイトでは、パフォーマンススコアの色分けが行われます。スコアは以下の範囲に応じて色分けされます。

パフォーマンスのスコアリング

0~49(赤): 悪い

50~89(オレンジ): 改善が必要

90~100(緑): 良好

PageSpeed Insights(ページスピードインサイト)の各指標

使い方はとても簡単ですね。

けれど何やら難しそうな指標が出てきましたね。

SEO初心者
江合

大丈夫!それぞれの指標について詳しく解説していくね。

ツナガル吉村
吉村

主な指標は以下の通りです。

  • LCP(メインコンテンツの読み込み時間)
  • INP(ユーザー操作後の反応速度)
  • CLS(コンテンツのズレ)
  • FCP(ページ初期表示時間)
  • FID(最初の操作反応時間)
  • TTFB(サーバー応答開始時間)
  • SPEED INDEX(ページ表示速度)

これらの指標を理解することで、ウェブサイトのどの部分を改善すべきかが明確になります。

 

次に、それぞれの指標について詳しく説明していきます。

LCP(メインコンテンツの読み込み時間)

LCPは「Largest Contentful Paint」の略で、メインコンテンツの読み込み時間を示す指標だよ。

具体的には、ユーザーがページを読み込んだ際に、最大のコンテンツ要素が表示されるまでの時間を測定しているんだ。

ツナガル吉村
吉村

LCPは、ユーザーがページを読み込んだ際に、スクロールせずに見える範囲の最大のコンテンツ要素が表示されるまでの時間を計測します。

 

これにより、ユーザーがウェブページをどれだけ早く視覚的に認識できるかを示すことができます。

LCPのパフォーマンススコア

良好:2.5秒以下

改善が必要:2.5秒~4秒

不良:(4秒超

参考:Largest Contentful Paint(LCP)

INP(ユーザー操作後の反応速度)

INPは「Interaction to Next Paint」の略で、ユーザーがページ上で行った操作に対して次に画面が更新されるまでの時間を測定する指標だよ。

 

つまり、ユーザーがクリックやタップをした後に、その操作に対する反応が表示されるまでの時間を表しているんだ。

ツナガル吉村
吉村

INPは、ユーザー体験において非常に重要な指標です。

 

ユーザーが操作を行った際に、反応が遅いとストレスを感じやすくなります。

 

例えば、ボタンをクリックしたのに画面がすぐに変わらないと、ユーザーは操作がうまくいかなかったと感じてしまうことがあります。

INPのポイント
    • 操作後の反応速度: ユーザーがクリックやタップをした後、次の画面更新までの時間を計測。
    • ユーザー体験の向上: 反応が速いほど、ユーザーはスムーズな操作感を得られる。

INPのパフォーマンススコア

 

良好:200ミリ秒以下

改善が必要:200ミリ秒~500ミリ秒

不良:500ミリ秒超

参考:Interaction to Next Paint(INP)

CLS(コンテンツのズレ)

CLSは「Cumulative Layout Shift」の略で、ウェブページの読み込み中にコンテンツがどれだけ予期せず動くのかを示す指標だよ。

 

具体的には、ページの要素が突然動いたり、位置が変わったりすることで、ユーザーの操作が妨げられることを指すんだ。

ツナガル吉村
吉村

CLSは、ユーザーがページを閲覧する際の安定性を測定するための重要な指標です。

 

ページの要素が予期せず動くと、ユーザーが誤ってクリックしたり、操作が難しくなったりすることがあります。

CLSのポイント

    • レイアウトの安定性: ページの要素がどれだけ予期せず動くかを測定。
    • ユーザー体験の向上: コンテンツのズレが少ないほど、ユーザーは快適にページを閲覧できる。

CLSのパフォーマンススコア

良好:0.1以下

改善が必要:0.1~0.25

不良:0.25超

参考:Cumulative Layout Shift(CLS)

FCP(ページ初期表示時間)

FCPは「First Contentful Paint」の略で、ページの初期表示時間を測る指標だよ。

ユーザーがページを開いたときに、最初にコンテンツが表示されるまでの時間を計測しているんだ。

ツナガル吉村
吉村

FCPは、ユーザーがページを開いた際に、最初のコンテンツ(テキスト、画像など)が表示されるまでの時間を示します。

 

この指標は、ページがどれだけ早くユーザーに最初の情報を見せられるかを測るために重要です。

FCPのポイント

    • 初期表示の速さ: ページを開いてから最初のコンテンツが表示されるまでの時間を計測。
    • ユーザー体験の向上: 初期表示が速いほど、ユーザーはページがすぐに読み込まれたと感じます。

FCPのパフォーマンススコア

良好:1.8秒以下

改善が必要:1.8秒~3秒

不良:3秒超

参考:First Contentful Paint(FCP)

FID(最初の操作反応時間)

FIDは「First Input Delay」の略で、ユーザーが最初にページ上で操作(例えばリンクをクリックするなど)したときから、その操作に対してブラウザが実際に反応するまでの時間を測る指標だよ。

ツナガル吉村
吉村

FIDは、ユーザーがページを開いてから最初に行う操作に対して、どれだけ早く反応するかを示します。

 

この指標は、ページがユーザーの操作にどれだけ迅速に応答するかを測るために重要です。

FIDのポイント

    • 操作に対する反応の速さ: ユーザーが最初にページ上で操作を行ってから、その操作にブラウザが反応するまでの時間を計測。
    • ユーザー体験の向上: FIDが短いほど、ユーザーはページがすぐに反応すると感じ、操作がスムーズに行えます。

FIDのパフォーマンススコア

良好:100ミリ秒以下

改善が必要:100ミリ秒~300ミリ秒

不良:300ミリ秒超

参考:First Input Delay(FID)

TTFB(サーバー応答開始時間)

TTFBは「Time to First Byte」の略で、ユーザーがページをリクエストしてから、ブラウザが最初のバイトを受け取るまでの時間を測る指標だよ。

ツナガル吉村
吉村

少し難しいですね…わかりやすく教えて下さい。

SEO初心者
江合

例えば、レストランで料理を注文した所を想像してみて。

TTFBは、あなたが注文をウェイターに伝えてから、最初の料理がテーブルに届くまでの時間に相当するんだ。

 

この時間が短いほど、サービスが迅速であると感じるよね。

同じように、TTFBが短いと、サーバーの応答が速く、ウェブページの読み込みが迅速に開始されるってことなんだ。

ツナガル吉村
吉村
TTFBのポイント

    • サーバー応答の速さ: ユーザーがページをリクエストしてから、ブラウザが最初のデータを受け取るまでの時間を計測。
    • パフォーマンスの向上: TTFBが短いほど、サーバーの応答が速く、ページの読み込みが迅速に開始されます。

TTFBのパフォーマンススコア

良好:0.8秒以下

改善が必要:0.8秒~1.8秒

不良:1.8秒超

参考:最初のバイトまでの時間(TTFB)

Speed Index(ページ表示速度)

SPEED INDEXは、ページの表示速度を測定する指標だよ。

具体的には、ページのコンテンツがどれだけ早く表示されるかを計測しているんだ。

ツナガル吉村
吉村

SPEED INDEXは、ページがユーザーに対してどれだけ早く完全に表示されるかを示します。

 

この指標は、ユーザーがページを開いたときに、全体のコンテンツが表示されるまでの時間を計測します。

SPEED INDEXのポイント

    • ページ全体の表示速度: ページのコンテンツがどれだけ早く表示されるかを測定。
    • ユーザー体験の向上: SPEED INDEXが低いほど、ユーザーはページが速く表示されると感じます。

SPEED INDEXのパフォーマンススコア

良好:0~3.4秒

改善が必要:3.4秒~5.8秒

不良:5.8秒超

参考:Speed Index

ページスピードインサイトの改善・実践結果

当サイトにおいて、ページスピードインサイトを用いた改善を行いました。以下にその実践結果を記載します。

まず、どのように改善を行ったのですか?

SEO初心者
江合

まず目標設定を行ったよ。携帯電話のパフォーマンスは80点、デスクトップパフォーマンスは95点を目指したんだ。

ツナガル吉村
吉村
改善の目標設定

    • 目標:デスクトップ95点 携帯電話80
    • 改善前:デスクトップ89点 携帯電話43点 

改善前スコア

 

以下は各指標の詳細です。

携帯電話のパフォーマンス: 43点

FCP: 0

LCP: プラス1

TBT: プラス15

CLS: プラス25

SI: プラス3

デスクトップのパフォーマンス: 89点

FCP: プラス6

LCP: プラス19

TBT: プラス30

CLS: プラス25

SI: プラス9

パフォーマンススコアの点数部分にマウスカーソルを載せると、各指標の点数がわかるよ!

ツナガル吉村
吉村

PC版の改善・最適化

まずPC版から改善したんですね。どのような方法を取ったのですか?

SEO初心者
江合

そうだよ。まず、LCPとFCPの改善を行ったんだ。

LCPは6点、FCPは4点上がる予知があったから、ここを重点的に改善することにしたんだ。

 

ちなみに、パフォーマンススコアの仕組みについて少し触れておくね。

パフォーマンススコアは指標スコアの加重平均で決まるんだ。

それぞれの比重は以下の通りだよ。

ツナガル吉村
吉村
Lighthouse10のスコア比重

    • FCP: 10%
    • Speed Index: 10%
    • LCP: 25%
    • TBT: 30%
    • CLS: 25%

 

出典:Lighthouse のパフォーマンス スコアリング

なるほど、それぞれの指標の比重があるんですね。

SEO初心者
江合

LCPの改善

改善前

改善後

改善前 1630ミリ秒
施策 キービジュアルをWebP形式に変換
結果 最大コンテンツの描画が2230ミリ秒に増加(レンダリング遅延が500msから1210msに増加)

WebP形式に変換したのにLCPが悪化したんですね。どうしてですか?

SEO初心者
江合

そうだね。びっくりしたよ。

公式サイトによると、WebP形式にするとファイルサイズは縮小されるけど、要素レンダリングの遅延が増えるからLCPが改善されないケースもあるようなんだ。

 

例えば、レストランで前菜(ファイルサイズが小さい)がすぐに出されても、メインディッシュ(LCP要素)が調理されて提供されるまでに時間がかかることがあるよね。

 

また、JavaScriptの読み込みが完了するまで、LCP要素(例えば大きな画像や主要なコンテンツなど)が表示されないことも原因のようなんだ。

これは、厨房での準備が整うまでメインディッシュが提供されないのと似ているんだ。

ツナガル吉村
吉村

参照サイト: Largest Contentful Paint を最適化する

CSSの削除と最適化

改善後

 

目的 レンダリング遅延の改善
施策 CSSを各ページで分割(トップページ用、下層ページ用など)、不要なCSSの削除
結果 レンダリング遅延が1210msから840msに縮小

CSSの最小化とCLSの改善

改善前

改善後

CSSの最小化

改善前: 27KB削減可能

改善後: 20.5KB削減

 

CLSの改善

イメージタグにheightとwidthを指定(CLSは0.15から改善)

改善後:数値に変動なし

 

参考:Cumulative Layout Shift の最適化

Webフォントの解除

WEBフォント削除後

 

効果: 最も効果的な改善策

Webフォントの使用がページスピードインデックスの点数に大きく影響

 

考慮点:デザイン優先か、スピード優先かの判断が必要

携帯電話(スマートフォン)の改善・最適化

次にスマートフォンの最適化ですね。どのように進めたのですか?

SEO初心者
江合

まず、PC版の最適化を行った後で携帯電話の点数を計測したら63点だったんだ。

まずLCPの対策を行ったよ。

ツナガル吉村
吉村


PC最適化後のスマホ点数

LCPの対策

改善前

改善後

改善前 最大コンテンツの読み込み時間: 約7980ミリ秒
施策 キービジュアル画像を、Webp形式に変換(軽量化)、影響度を計る為にキービジュアルをdisplay:noneに設定
結果 読み込み遅延と読み込み時間がゼロ秒に。ただし、レンダリング遅延が増加(2,870ms)
仮説 JavaScriptなどの要素がレンダリング遅延に影響している。

次に行った改善策は?

SEO初心者
江合

次にJSの効率化を行ったんだ。主にJSの圧縮とfont awesomeの削除を行ったよ。

ツナガル吉村
吉村

JSの効率化

改善後

施策 JSの圧縮とfont awesomeの読み込み削除
結果 パフォーマンスが63点から78点に向上
使用ツール JS圧縮簡単ツール

 

全体の画像のWebP処理

改善後

施策 画像をJPEGやPNGからWebP形式に変更
結果 パフォーマンスが78点から80点に向上

最終結果

最終結果

最終的な結果はどうなりましたか?

SEO初心者
江合

最終的に、PC版は100点スマートフォン版は82点を達成したよ。

目標値である携帯電話のパフォーマンス80点、デスクトップパフォーマンス95点を達成したんだ。

ツナガル吉村
吉村

Webフォントの影響

Webフォントの影響についても教えてください。

SEO初心者
江合

Webフォントを使用すると、PC版は100点から91点に、スマートフォン版は82点から57点に下がったんだ。

デザインとスピードのバランスを考えなきゃいけないね。

 

当サイトでは、デザインを優先するためにWebフォントを使用することにしたんだ。

ツナガル吉村
吉村

WEBフォント付与PC

WEBフォント付与SP

ページスピードインサイト改善のまとめ

試したことは以下の通りです。

  • 画像のWebP形式への変換
  • CSSの最適化
  • JSの最適化
  • 外部リソースの最適化と削除
  • Googleフォントの使用
  • CLSの改善(イメージタグにheight、widthを指定)
  • Webフォントの削除

最終的には、Webフォントを使用することでデザインを優先しつつ、スピードもできるだけ確保するように努めました。

 

これにより、当サイトはデザイン面とスピードのバランスを保つことができました。

まとめ ページスピードインサイト改善は効果の高い施策を重点的に実行しよう

今回は、PageSpeed Insightsの使い方・指標説明や実験結果について解説してきました。

 

ここまでの内容をまとめておきます。

PageSpeed Insightsとは

Googleが提供しているウェブサイトのパフォーマンスを測定するためのツール。

ウェブページの読み込み速度や使いやすさに関するさまざまな指標を提供してくれる。

PageSpeed Insightsの使い方

    • ページスピードインサイトにアクセス
    • 計測したいURLを入力し「分析」をクリック
    • 携帯電話・デスクトップのパフォーマンス・診断を確認する

PageSpeed Insightsの各指標

LCP(メインコンテンツの読み込み時間)

INP(ユーザー操作後の反応速度)

CLS(コンテンツのズレ)

FCP(ページ初期表示時間)

FID(最初の操作反応時間)

TTFB(サーバー応答開始時間)

Spped Index(ページ表示速度)

ページスピードインサイトの改善で最も影響のあった施策

Webフォントの削除

ぜひ、PageSpeed Insightsを使って改善に取り組んでみて下さいね。

 

今回は以上です。

記事の著者

吉村 健太朗

役職

シンクション株式会社 代表取締役

資格

景表法特商法遵守 個人認証(KTAA)
薬機法医療法遵守 個人認証(YAMM)
Google広告「検索広告」認定資格
Googleアナリティクス個人認定資格

奈良でWEBマーケティングとWEB制作に特化した「ツナガル」を運営しています。私のWEBキャリアは2012年、副業でアフィリエイトを始めたことがきっかけでした。
3か月で月10万円を達成したものの、その後思い通りに成果が伸びず挫折を経験。これが、私とWEB業界の出発点となりました。
その後、営業を経験し、2020年には本格的にWEBの世界へ。現在では、地域に特化したキーワード戦略により300以上の上位表示を実現し、SEO対策マニュアルでは検索順位2位を獲得しています。
お客様と共に課題を乗り越え、成果を共に喜び合うことが私のモチベーションです。WEBに関することならどんなご相談でもお気軽にお声がけください。

SEO対策でお困りの際は、
お気軽にお問い合わせください!
ツナガルの公式LINEでもご相談受付中!