PageSpeed Insights（ページスピードインサイト）って何ですか？
PageSpeed Insightsは、Googleが提供しているウェブサイトのパフォーマンスを測定するためのツールだよ。
ウェブページの読み込み速度や使いやすさに関するさまざまな指標を提供してくれるんだ。
PageSpeed Insightsは、ウェブサイトのパフォーマンスを向上させるための非常に便利なツールです。
このツールを使えば、ウェブサイトのどの部分を改善すべきかが明確になります。
このページでは、PageSpeed Insightsの基本的な定義から具体的な使い方、実際に行った改善策の実践結果までをわかりやすく解説します。
初心者でも簡単に理解できる内容なので、ぜひ読み進めて、PageSpeed Insightsを活用してみてください。
目次
PageSpeed Insightsとは（ページスピードインサイト）とは？
PageSpeed Insights（ページスピードインサイト）って何ですか？
PageSpeed Insightsは、Googleが提供しているウェブサイトのパフォーマンスを測定するためのツールだよ。
ウェブページの読み込み速度や使いやすさに関するさまざまな指標を提供してくれるんだ。
PageSpeed Insightsは、ウェブページのパフォーマンスを向上させるための強力なツールです。
特に、サイトの使いやすさや読み込み速度を最適化するためには、このツールを活用してウェブサイトの改善点を見つけることが重要です。
PageSpeed Insightsを使うことで、ウェブサイトの読み込み速度やパフォーマンスを詳細に分析し、どの部分を改善すべきかが明確になります。
PageSpeed Insights（ページスピードインサイト）の使い方
具体的な使い方も教えてください。
もちろん、簡単だから試してみてね。
PageSpeed Insightsの使い方は以下の通りです。
携帯電話・デスクトップのパフォーマンス・診断を確認するPageSpeed Insights（ページスピードインサイト）のスコアリングについて
ページスピードインサイトでは、パフォーマンススコアの色分けが行われます。スコアは以下の範囲に応じて色分けされます。
PageSpeed Insights（ページスピードインサイト）の各指標
使い方はとても簡単ですね。
けれど何やら難しそうな指標が出てきましたね。
大丈夫！それぞれの指標について詳しく解説していくね。
主な指標は以下の通りです。
- LCP（メインコンテンツの読み込み時間）
- INP（ユーザー操作後の反応速度）
- CLS（コンテンツのズレ）
- FCP（ページ初期表示時間）
- FID（最初の操作反応時間）
- TTFB（サーバー応答開始時間）
- SPEED INDEX（ページ表示速度）
これらの指標を理解することで、ウェブサイトのどの部分を改善すべきかが明確になります。
次に、それぞれの指標について詳しく説明していきます。
LCP（メインコンテンツの読み込み時間）
LCPは「Largest Contentful Paint」の略で、メインコンテンツの読み込み時間を示す指標だよ。
具体的には、ユーザーがページを読み込んだ際に、最大のコンテンツ要素が表示されるまでの時間を測定しているんだ。
LCPは、ユーザーがページを読み込んだ際に、スクロールせずに見える範囲の最大のコンテンツ要素が表示されるまでの時間を計測します。
これにより、ユーザーがウェブページをどれだけ早く視覚的に認識できるかを示すことができます。
参考：Largest Contentful Paint（LCP）
INP（ユーザー操作後の反応速度）
INPは「Interaction to Next Paint」の略で、ユーザーがページ上で行った操作に対して次に画面が更新されるまでの時間を測定する指標だよ。
つまり、ユーザーがクリックやタップをした後に、その操作に対する反応が表示されるまでの時間を表しているんだ。
INPは、ユーザー体験において非常に重要な指標です。
ユーザーが操作を行った際に、反応が遅いとストレスを感じやすくなります。
例えば、ボタンをクリックしたのに画面がすぐに変わらないと、ユーザーは操作がうまくいかなかったと感じてしまうことがあります。
- 操作後の反応速度: ユーザーがクリックやタップをした後、次の画面更新までの時間を計測。
- ユーザー体験の向上: 反応が速いほど、ユーザーはスムーズな操作感を得られる。
参考：Interaction to Next Paint（INP）
CLS（コンテンツのズレ）
CLSは「Cumulative Layout Shift」の略で、ウェブページの読み込み中にコンテンツがどれだけ予期せず動くのかを示す指標だよ。
具体的には、ページの要素が突然動いたり、位置が変わったりすることで、ユーザーの操作が妨げられることを指すんだ。
CLSは、ユーザーがページを閲覧する際の安定性を測定するための重要な指標です。
ページの要素が予期せず動くと、ユーザーが誤ってクリックしたり、操作が難しくなったりすることがあります。
- レイアウトの安定性: ページの要素がどれだけ予期せず動くかを測定。
- ユーザー体験の向上: コンテンツのズレが少ないほど、ユーザーは快適にページを閲覧できる。
参考：Cumulative Layout Shift（CLS）
FCP（ページ初期表示時間）
FCPは「First Contentful Paint」の略で、ページの初期表示時間を測る指標だよ。
ユーザーがページを開いたときに、最初にコンテンツが表示されるまでの時間を計測しているんだ。
FCPは、ユーザーがページを開いた際に、最初のコンテンツ（テキスト、画像など）が表示されるまでの時間を示します。
この指標は、ページがどれだけ早くユーザーに最初の情報を見せられるかを測るために重要です。
- 初期表示の速さ: ページを開いてから最初のコンテンツが表示されるまでの時間を計測。
- ユーザー体験の向上: 初期表示が速いほど、ユーザーはページがすぐに読み込まれたと感じます。
参考：First Contentful Paint（FCP）
FID（最初の操作反応時間）
FIDは「First Input Delay」の略で、ユーザーが最初にページ上で操作（例えばリンクをクリックするなど）したときから、その操作に対してブラウザが実際に反応するまでの時間を測る指標だよ。
FIDは、ユーザーがページを開いてから最初に行う操作に対して、どれだけ早く反応するかを示します。
この指標は、ページがユーザーの操作にどれだけ迅速に応答するかを測るために重要です。
- 操作に対する反応の速さ: ユーザーが最初にページ上で操作を行ってから、その操作にブラウザが反応するまでの時間を計測。
- ユーザー体験の向上: FIDが短いほど、ユーザーはページがすぐに反応すると感じ、操作がスムーズに行えます。
TTFB（サーバー応答開始時間）
TTFBは「Time to First Byte」の略で、ユーザーがページをリクエストしてから、ブラウザが最初のバイトを受け取るまでの時間を測る指標だよ。
少し難しいですね…わかりやすく教えて下さい。
例えば、レストランで料理を注文した所を想像してみて。
TTFBは、あなたが注文をウェイターに伝えてから、最初の料理がテーブルに届くまでの時間に相当するんだ。
この時間が短いほど、サービスが迅速であると感じるよね。
同じように、TTFBが短いと、サーバーの応答が速く、ウェブページの読み込みが迅速に開始されるってことなんだ。
- サーバー応答の速さ: ユーザーがページをリクエストしてから、ブラウザが最初のデータを受け取るまでの時間を計測。
- パフォーマンスの向上: TTFBが短いほど、サーバーの応答が速く、ページの読み込みが迅速に開始されます。
Speed Index（ページ表示速度）
SPEED INDEXは、ページの表示速度を測定する指標だよ。
具体的には、ページのコンテンツがどれだけ早く表示されるかを計測しているんだ。
SPEED INDEXは、ページがユーザーに対してどれだけ早く完全に表示されるかを示します。
この指標は、ユーザーがページを開いたときに、全体のコンテンツが表示されるまでの時間を計測します。
- ページ全体の表示速度: ページのコンテンツがどれだけ早く表示されるかを測定。
- ユーザー体験の向上: SPEED INDEXが低いほど、ユーザーはページが速く表示されると感じます。
参考：Speed Index
ページスピードインサイトの改善・実践結果
当サイトにおいて、ページスピードインサイトを用いた改善を行いました。以下にその実践結果を記載します。
まず、どのように改善を行ったのですか？
まず目標設定を行ったよ。携帯電話のパフォーマンスは80点、デスクトップパフォーマンスは95点を目指したんだ。
- 目標：デスクトップ95点 携帯電話80点
- 改善前：デスクトップ89点 携帯電話43点
改善前スコア
以下は各指標の詳細です。
パフォーマンススコアの点数部分にマウスカーソルを載せると、各指標の点数がわかるよ！
PC版の改善・最適化
まずPC版から改善したんですね。どのような方法を取ったのですか？
そうだよ。まず、LCPとFCPの改善を行ったんだ。
LCPは6点、FCPは4点上がる予知があったから、ここを重点的に改善することにしたんだ。
ちなみに、パフォーマンススコアの仕組みについて少し触れておくね。
パフォーマンススコアは指標スコアの加重平均で決まるんだ。
それぞれの比重は以下の通りだよ。
- FCP: 10%
- Speed Index: 10%
- LCP: 25%
- TBT: 30%
- CLS: 25%
なるほど、それぞれの指標の比重があるんですね。
LCPの改善
改善前
改善後
| 改善前 | 1630ミリ秒 |
| 施策 | キービジュアルをWebP形式に変換 |
| 結果 | 最大コンテンツの描画が2230ミリ秒に増加（レンダリング遅延が500msから1210msに増加） |
WebP形式に変換したのにLCPが悪化したんですね。どうしてですか？
そうだね。びっくりしたよ。
公式サイトによると、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フォントの使用がページスピードインデックスの点数に大きく影響
考慮点：デザイン優先か、スピード優先かの判断が必要
携帯電話（スマートフォン）の改善・最適化
次にスマートフォンの最適化ですね。どのように進めたのですか？
まず、PC版の最適化を行った後で携帯電話の点数を計測したら63点だったんだ。
まずLCPの対策を行ったよ。
PC最適化後のスマホ点数
LCPの対策
改善前
改善後
| 改善前 | 最大コンテンツの読み込み時間: 約7980ミリ秒 |
| 施策 | キービジュアル画像を、Webp形式に変換（軽量化）、影響度を計る為にキービジュアルをdisplay:noneに設定 |
| 結果 | 読み込み遅延と読み込み時間がゼロ秒に。ただし、レンダリング遅延が増加（2,870ms） |
| 仮説 | JavaScriptなどの要素がレンダリング遅延に影響している。 |
次に行った改善策は？
次にJSの効率化を行ったんだ。主にJSの圧縮とfont awesomeの削除を行ったよ。
JSの効率化
改善後
| 施策 | JSの圧縮とfont awesomeの読み込み削除 |
| 結果 | パフォーマンスが63点から78点に向上 |
| 使用ツール | JS圧縮簡単ツール |
全体の画像のWebP処理
改善後
| 施策 | 画像をJPEGやPNGからWebP形式に変更 |
| 結果 | パフォーマンスが78点から80点に向上 |
最終結果
最終結果
最終的な結果はどうなりましたか？
最終的に、PC版は100点、スマートフォン版は82点を達成したよ。
目標値である携帯電話のパフォーマンス80点、デスクトップパフォーマンス95点を達成したんだ。
Webフォントの影響
Webフォントの影響についても教えてください。
Webフォントを使用すると、PC版は100点から91点に、スマートフォン版は82点から57点に下がったんだ。
デザインとスピードのバランスを考えなきゃいけないね。
当サイトでは、デザインを優先するためにWebフォントを使用することにしたんだ。
WEBフォント付与PC
WEBフォント付与SP
ページスピードインサイト改善のまとめ
試したことは以下の通りです。
- 画像のWebP形式への変換
- CSSの最適化
- JSの最適化
- 外部リソースの最適化と削除
- Googleフォントの使用
- CLSの改善（イメージタグにheight、widthを指定）
- Webフォントの削除
最終的には、Webフォントを使用することでデザインを優先しつつ、スピードもできるだけ確保するように努めました。
これにより、当サイトはデザイン面とスピードのバランスを保つことができました。
まとめ ページスピードインサイト改善は効果の高い施策を重点的に実行しよう
今回は、PageSpeed Insightsの使い方・指標説明や実験結果について解説してきました。
ここまでの内容をまとめておきます。
- ページスピードインサイトにアクセス
- 計測したいURLを入力し「分析」をクリック
- 携帯電話・デスクトップのパフォーマンス・診断を確認する
ぜひ、PageSpeed Insightsを使って改善に取り組んでみて下さいね。
今回は以上です。
