PageSpeed Insightsとは？スコアの見方と90点超えを実現する改善方法
login_user- 1 PageSpeed Insightsとは？
- 2 PageSpeed Insightsの画面の見方
- 2.1 LCP（Largest Contentful Paint）
- 2.2 INP（Interaction to Next Paint）
- 2.3 CLS（Cumulative Layout Shift）
- 2.4 TBT（Total Blocking Time）
- 2.5 FCP（First Contentful Paint）
- 3 初心者が絶対に知っておくべき「スコアの誤解」
- 4 改善提案（Opportunities）の正しい読み方
- 4.1 「画像を適切なサイズにする」
- 4.2 「次世代フォーマットで画像を配信する」
- 4.3 「不要なJavaScriptの削除」
- 4.4 「レンダリングを妨げるリソースの除外」
- 4.5 「LCP要素の読み込みを最適化」
- 5 WordPressでスコアが悪化するありがちな原因
- 6 Lightningテーマの場合の特有の問題
- 7 PageSpeed Insightsのスコア改善チェックリスト
- 8 TBT・INPを改善するJS遅延（functions.php）
- 9 まとめ
- 9.1 関連記事
PageSpeed Insights（ページスピードインサイト）は、Google が提供する サイト速度の分析ツール です。
スマホ・パソコンそれぞれの速度を数値化し、Core Web Vitals の評価 もチェックできます。
この記事では、PageSpeed Insightsの正しい読み方、100点を取るための改善方法、WordPressでよくある失敗ポイントまでわかりやすく解説します。
1 PageSpeed Insightsとは？
PageSpeed Insights（PSI）は、あなたのWebページがユーザーにとってどれだけ速く表示されるかを測定してくれるツールです。
分析結果は次の 2種類に分かれています。
| データ種類 | 内容 |
|---|---|
| Field Data（実データ） | 実際のユーザーの通信環境で測定された本番データ。 Core Web Vitals の評価に使われる。 |
| Lab Data（ラボデータ） | Googleの環境で機械的に測定されたデータ。 改善すべき点が具体的に表示される。 |
初心者が混乱しやすい点ですが、スコア（0〜100点）はラボデータであり、SEOには直接影響しません。
SEOに関係するのは Field Data（実データ）のみです。
2 PageSpeed Insightsの画面の見方
PageSpeed Insights の評価では、特に次の項目を重視します。
2.1 LCP（Largest Contentful Paint）
一番大きな要素が表示される速度。2.5秒以内が合格。画像が重いと悪化。
2.2 INP（Interaction to Next Paint）
2024年から採用された新指標。クリックやタップの反応速度。
200ms以下が合格。
2.3 CLS（Cumulative Layout Shift）
レイアウトのズレ（急なガクッ）が発生すると悪化。
0.1以下が合格。
2.4 TBT（Total Blocking Time）
JavaScript が多いと悪化。INP と関係が深い。
2.5 FCP（First Contentful Paint）
最初の表示が始まるタイミング。CSS や JS が重いと遅い。
3 初心者が絶対に知っておくべき「スコアの誤解」
- 100点でも実ユーザーが速いとは限らない
- スコアは環境に左右される（Wi-Fi, CPU, 広告の有無）
- スマホの点数が低くなりがち（厳しい通信環境で測定）
- 赤点＝SEOが落ちるわけではない
最も重要なのはCore Web Vitals（実データ）が合格しているかどうかです。
4 改善提案（Opportunities）の正しい読み方
PSI には「改善できる項目」がリスト表示されます。
ここでは初心者が気をつけるべき代表的な項目を解説します。
4.1 「画像を適切なサイズにする」
→ 画像が大きすぎる。リサイズ or 圧縮しましょう。
4.2 「次世代フォーマットで画像を配信する」
→ WebP に変換すると改善。
4.3 「不要なJavaScriptの削除」
→ プラグインを減らすだけでも大幅改善。
4.4 「レンダリングを妨げるリソースの除外」
→ CSS/JS の遅延読み込み（中級編で説明した defer が有効）。
4.5 「LCP要素の読み込みを最適化」
→ Hero画像の preload / fetchpriority=high を設定。
5 WordPressでスコアが悪化するありがちな原因
- 画像が重い（WebPにしていない）
- スライダーが重い（JS負荷）
- プラグインが多すぎる
- 広告タグ（Google広告・アフィリエイト）が多い
- キャッシュが無効化
6 Lightningテーマの場合の特有の問題
- LCP原因がほぼ100%「ヘッダー画像」
- 見出しのフォント変更がCLSを引き起こす
- スライダーが INP / LCP を悪化させる
Lightningを使うなら、ヘッダー画像の preload / WebP 化が特に重要です。
7 PageSpeed Insightsのスコア改善チェックリスト
- 画像をWebPに変換する
- Hero画像に fetchpriority="high" を付与
- Hero画像を preload する
- プラグインを整理する（削除 or 無効化）
- スライダーを静止画像に変更
- CSS/JS を遅延読み込み（defer）
- LazyLoadをONにする
- キャッシュを有効化（サーバー側）
- 広告タグの数を減らす
8 TBT・INPを改善するJS遅延（functions.php）
JavaScriptの実行を遅らせ INP / TBT を改善するコードです。
add_filter('script_loader_tag', function($tag, $handle) {
if (is_admin()) return $tag;
if (strpos($tag, 'src') !== false) {
return str_replace(' src', ' defer src', $tag);
}
return $tag;
}, 10, 2);
これだけでスコアが大幅に改善します。
9 まとめ
PageSpeed Insights は「点数」よりも「Core Web Vitals の実データ」を見るツールです。
ラボデータの点数に一喜一憂する必要はありません。
最も重要なのは以下の3つだけです。
- LCP（ページの表示開始が速いか）
- INP（反応が速いか）
- CLS（ズレが起きないか）
改善の手順さえ理解すれば、ほとんどの WordPress サイトは簡単に合格できます。
PageSpeed Insights を上手に活用して、サイトを高速化しましょう。
