新しくなったPageSpeed Insightsの使い方。LCP・FID・CLSなど指標の意味や改善方法も紹介

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

PageSpeed InsightsはWebサイトの表示速度を測定・評価する分析ツールです。Googleが無料で提供しており、広く使われています。

調べたいWebサイトのURLを入力するだけで、Webページの読み込み速度がスコアで表示されます。速度の評価だけでなく、改善ポイントも提示されるため、具体的な修正に役立てることも可能です。モバイルとPC両方のデバイスに対応しており、一度の分析でそれぞれの分析結果を確認できます。

PageSpeed Insights（Google）

Webサイトの表示速度が重要な理由

SEOの観点からも、Webサイトの表示速度は重要です。Googleは、ウェブマスター向けの情報サイト「Google検索セントラル」にて、ページの読み込み速度を含めたページエクスペリエンスが検索順位の評価に影響すると明らかにしています。

ページ エクスペリエンスの Google 検索結果への影響について（Google 検索セントラル）

ページの表示速度はユーザー体験に大きく影響する

Webサイトの表示速度はなぜ重視なのでしょうか。モバイルデバイスでのインターネット利用を例に考えてみましょう。

総務省の「令和2年通信利用動向調査」によると、インターネットの利用にスマートフォンを使用する人は68.3％にのぼり、PCを大きく上回っています。特に20代・30代の年齢層では9割以上が主にスマートフォンでインターネットを利用しています。インターネットを利用するデバイスの主流は、今やスマートフォンに移り変わってきたと言えるでしょう。こうした流れの中、ECサイトにおいてもスマートフォンで快適に利用できることは非常に重要です。

総務省 令和2年通信利用動向調査

Webサイト閲覧時の表示速度は、ユーザーの行動に大きく影響します。株式会社ジャストシステムの調査によると、スマートフォンでECサイトを利用した際に「応答速度が遅くて離脱」した経験がある人は6割近くにのぼります。

同調査では、ECサイトやECアプリの応答速度について、36.4％のユーザーが応答時間5秒未満で「遅い」と感じ、離脱するという結果でした。Webサイトが速やかに表示されることは、ユーザーの離脱を防ぐためにとても重要なポイントであることがわかります。

株式会社ジャストシステム2020年1月22日プレスリリース

PageSpeed Insightsで診断できること

PageSpeed Insightsで診断を行うには、URLを入力して「分析」ボタンをクリックするだけです。自社Webサイトだけでなく他社Webサイトも分析することができ、またWebサイト全体だけでなくページ単位でも分析できます。具体的には以下のような分析項目が設けられています。

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

PageSpeed Insightsは2021年11月にリニューアルし、よりわかりやすいUIになりました。分析は「実際のユーザーの環境で評価する」データと、特定の制御された環境で収集した「パフォーマンスの問題を診断する」データに分かれて実行されます。これらのカテゴリーは、リニューアル前にはそれぞれ「フィールドデータ」「ラボデータ」という名称で記載されていました。

各項目で分析できる内容について見ていきましょう。

実際のユーザーの環境で評価する（旧フィールドデータ）の指標と改善方法

ここからは、PageSpeed Insightsで分析される指標とその改善方法について解説します。下の画像は、Sprocketのトップページを実際にPageSpeed Insightsで分析した画面です。「実際のユーザーの環境で評価する」は、過去30日間における実際のユーザーデータにもとづいた評価が行われます。

First Contentful Paint（FCP）：最初のコンテンツ表示にかかるまでの時間

First Contentful Paint（FCP）は、ユーザーがWebサイトのURLをクリックしてから、Webページ内のコンテンツが最初に表示されるまでの時間を表す指標です。FCPは秒数で表示され、次のように評価されます。

• 0～1.8秒：「良い」
• 1.8～3.0秒：「要改善」
• 3.0秒以上：「不十分」

First Contentful Paint (FCP)

FCPは、サーバー応答時間や画像・ファイル・フォントなどの読み込みにかかる時間に左右されます。改善するには、以下のような方法が有効です。

• 画像を最適化・圧縮する
• JavaScriptやCSSのサイズを圧縮する
• Webフォントのロード中もテキストが表示されるよう設定する
• サーバーの設定・スペックを見直す

Largest Contentful Paint （LCP）：メインコンテンツの読み込み時間

Largest Contentful Paint（LCP）は、ユーザーがWebページにアクセスしてから、最も大きいコンテンツ、すなわちメインコンテンツが表示されるまでの時間を表す指標です。前項のFCPは情報の種類を問わず最初に表示されたコンテンツを対象としますが、LCPはメイン画像や動画、見出しなど、そのWebページの主要と見なされるコンテンツについて計測されます。ページ読み込みからの時間で次のように評価されます。

• 0～2.5秒：「良い」
• 2.5～4.0秒：「要改善」
• 4.0秒以上：「不十分」

Largest Contentful Paint (LCP)

LCPを改善するには、画面描画を妨げる処理を削減することが効果的です。またリソースの読み込み速度もLCPに大きく影響します。具体的には次のような方法が挙げられます。

• 画像を最適化・圧縮する
• JavaScriptやCSSのサイズを圧縮する
• 重要でないJavaScriptやCSSを読み込むタイミングを調整する

First Input Delay （FID）：Webページの応答性

First Input Delay（FID）は、Webページでユーザーが最初に行った操作に対する応答時間を表す指標です。クリックやタップ、キーボード入力などに対し、応答されるまでの待機時間が、ミリ秒で表示されます。

• 0～100ms（ミリ秒）：「良い」
• 100～300ms：「要改善」
• 300ms以上：「不十分」

First Input Delay (FID)

FIDを改善するには、JavaScriptの実行時間を短縮することが重要です。Webサイトに実装されているJavaScriptだけでなく、広告やSNSへのリンク、計測ツールなどのJavaScriptによって応答遅延が起こっていることも考えられます。以下を検討してみましょう。

• 影響のあるJavaScriptを見直す
• JavaScriptの実行にかかる時間を短縮する
• リクエスト数と転送サイズを減らす

Cumulative Layout Shift（CLS）：視覚的な安定性

Cumulative Layout Shift（CLS）は、Webページのコンテンツにおける、ユーザーが意図しないレイアウトの「ずれ」を数値化したもので、視覚的な安定性を表す指標になります。例えば、ページ閲覧の途中で画像が遅れて表示されてレイアウトが変わったり、突然広告が表示され誤タップしてしまったりという経験はないでしょうか。こういった意図せぬレイアウトのずれは、大きいほどWebページの視覚的な安定性を損ないます。CLSはずれが生じた表示領域の比率とその移動距離から計算され、0～1の数値で表されます。判断基準は以下のとおりです。

• 0～0.1：「良い」
• 0.1～0.25：「要改善」
• 0.25以上：「不十分」

Cumulative Layout Shift (CLS)

CLSを改善するには次のような方法が挙げられます。

• 画像や広告の表示領域を指定する
• 動的なコンテンツを削減する
• Webフォントのロードによるレイアウトシフトを防止する

パフォーマンスの問題を診断する（旧ラボデータ）の指標と改善方法

続いて「パフォーマンスの問題を診断する」の評価指標について見ていきましょう。下の画像は、スマートフォンにおけるSprocketのトップページの測定結果です。

このデータは、特定の環境下を想定してシミュレートした結果です。実際のユーザーから収集したデータと差が出る場合もありますが、ユーザーのデバイスのスペックや回線状況の影響を受けないので、Webサイト側の問題の特定や切り分けがしやすいという利点があります。

First Contentful Paint（FCP）：最初のコンテンツ表示にかかるまでの時間

先ほど解説したとおり、First Contentful Paint（FCP）とは、ユーザーがWebサイトにアクセスしてからページ内のいずれかのコンテンツが表示されるまでの時間を表す指標です。

Speed Index：ページの読み込み時間

Speed Indexは、Webページのコンテンツが目に見える形で表示される速さを表し、ページ読み込み性能の指標となります。時間ごとの描画面積から算出され、Webページが完成に近い状態で表示されるまでの時間が短いほど評価が高くなり、秒数に応じて以下のとおり判定されます。

• 0〜3.4秒：「速い」
• 3.4〜5.8秒：「平均」
• 5.8秒以上：「遅い」

Speed Index

Speed Indexを改善するには、全体的な処理速度の向上が必要です。一例として次のような方法があります。

• 画像を最適化・圧縮する
• JavaScriptやCSSのサイズを圧縮する
• 時間のかかる処理はメインスレッドから切り分ける
• キャッシュを適切に活用する

Largest Contentful Paint（LCP）：メインコンテンツの読み込み時間

先ほど解説したとおり、Largest Contentful Paint（LCP）とは、ユーザーがWebサイトにアクセスしてからページ内のメインコンテンツが表示されるまでの時間を表す指標です。

Time to Interactive（TTI）：Webページのインタラクティブ性

Time to Interactive（TTI）とは、Webページがインタラクティブになるまでの時間を表します。インタラクティブとは、ユーザーの操作できるようになった状態のことです。コンテンツが安定したレイアウトで表示され、操作できるまでの時間を秒数で表示します。評価基準は以下のとおりです。

• 0〜3.8秒：「速い」
• 3.9〜7.3秒：「平均」
• 7.3秒以上：「遅い」

Time to Interactive

TTIの改善には、以下のような方法が考えられます。

• 画像を最適化・圧縮する

• JavaScriptやCSSのサイズを圧縮する
• 不要なJavaScriptのロードを削減する
• 外部ファイルの読み込み数を減らす
• ページ下部にあるスクロール後の画像は読み込みを遅延させる

Total Blocking Time（TBT）：合計ブロック時間

Total Blocking Time（TBT）は、クリックやタップ、キーボード入力といったユーザー操作への応答がブロックされている時間の合計で、Webページの応答性を表す指標です。最初のコンテンツ描画からユーザーが操作可能になるまでの間に、50ミリ秒を超える処理（Long Task）があると「ブロックされた」と見なされます。それぞれのLong taskで50ミリ秒を超えた部分をブロッキング時間として加算する仕組みで、以下のように判定されます。

• 0～200ms（ミリ秒）：速い
• 200～600ms：中程度
• 600ms以上：遅い

Total Blocking Time (合計ブロック時間)

改善のためには、できるだけLong taskを避ける必要があります。改善するには、次の要素が考えられます。

• JavaScriptによる不要な処理を削除する
• 非効率なステートメントを見直す
• 長いタスクを分割する

Cumulative Layout Shift（CLS）：視覚的な安定性

先ほど解説したとおり、Cumulative Layout Shift（CLS）とは、ユーザーが意図しないレイアウトのずれを計測し、Webページの視覚的な安定性を表す指標です。

PageSpeed Insightsはユーザー体験の向上に役立つ

Webページの表示速度は、ユーザー体験に大きく影響します。コンテンツ表示や操作への応答に時間がかかると、ユーザーの離脱率や直帰率が悪化しやすく、売上やコンバージョンの減少にも直結する重要な要素です。Webサイトの表示速度は検索順位の評価にも影響するため、SEOの観点からも対応は欠かせません。

ただし、PageSpeed Insightsは必ず100点を目指すものではないことに注意してください。GoogleアナリティクスやGoogleタグマネージャをはじめとして、Webサイトに必要だから実装している機能もあるでしょう。それらをすべて排除するのは現実的ではありません。実際のユーザーの表示速度に問題がないかを確認しながら、使っていないサービスのコードを削除したり、最適化の余地がないかを確認したりするのに利用するといいでしょう。

PageSpeed Insightsは誰でも無料で利用できるので、まずは自社サイトのスコアを確認し、改善が必要な項目があれば、優先順位をつけて取り組みましょう。