Know-how サイト運営 読了目安 約6分

PageSpeed Insightsで個人サイトを速くする｜LCP・INP・CLSの改善手順

PageSpeed Insightsを開いたら赤い数字が並んでいた。指摘の項目が多すぎて、どれから直せばよいか分からない。そんなときに優先順位をつけるため、指標の意味と効きやすい対策を順番にまとめます。

Core Web Vitalsの3つの指標

Googleは、ページの使いやすさを測る指標として「Core Web Vitals」を定めています。PageSpeed Insightsの結果で最初に見るべきなのは、この3つです。

指標何を測るか良好不良
LCP（Largest Contentful Paint）ページのいちばん大きな要素（主に画像や見出し）が表示されるまでの時間2.5秒以下4秒超
INP（Interaction to Next Paint）タップやクリックをしてから、画面が反応するまでの時間200ミリ秒以下500ミリ秒超
CLS（Cumulative Layout Shift）読み込み中にレイアウトがどれだけずれたか0.1以下0.25超

言いかえると、LCPは「早く見えるか」、INPは「すぐ反応するか」、CLSは「見ている途中でずれないか」です。INPは2024年3月に、それまでのFID（最初の操作への反応）に代わって採用された指標です。

PageSpeed Insightsの2種類のデータ

PageSpeed InsightsでURLを調べると、結果は上下2つに分かれています。ここを混同すると、改善の方向を誤ります。

  • 実際のユーザーの環境で測定されたデータ（フィールドデータ）：Chromeを使う実際の訪問者から集めた、過去28日間のデータです。Core Web Vitalsの合否はこちらで判断されます。訪問者が少ないサイトでは「十分なデータがありません」と表示されます。
  • パフォーマンスの問題を診断する（ラボデータ）：その場で、決められた条件（低速なスマホ回線を想定）でページを読み込んだ結果です。100点満点のスコアと、改善のヒントが表示されます。

個人サイトの多くはフィールドデータが出ないので、ラボデータを手がかりに改善することになります。ラボのスコアは測るたびに数点ぶれるので、一喜一憂せず、何度か測った傾向を見るようにしましょう。また、スマホとパソコンの結果は別々に表示されます。訪問者の多くがスマホなら、スマホの結果を優先します。

LCPを改善する

LCPが遅い原因は、ほとんどの場合「画像」か「表示を止めている読み込み」です。PageSpeed Insightsの診断にある「Largest Contentful Paint 要素」を開くと、どの要素がLCPと判定されたかが分かります。

画像が原因の場合

  • サイズと形式：表示サイズより大きすぎる画像を使っていないか確認し、WebPなどの軽い形式にします。手順は画像をWebPに変えてページを軽くする手順で紹介しています。
  • 最初の画像を遅延読み込みしない：loading="lazy" は、画面の下のほうの画像に使うものです。ページを開いてすぐ見える大きな画像に付けると、かえって表示が遅れます。
  • 優先度を上げる：最初に見える大きな画像には fetchpriority="high" を付けると、ブラウザが優先して読み込みます。
<!-- 最初に見える画像 -->
<img src="/images/hero.webp" width="1200" height="630"
     alt="記事のメイン画像" fetchpriority="high">

<!-- 下のほうの画像 -->
<img src="/images/step2.webp" width="800" height="450"
     alt="手順2の画面" loading="lazy">

読み込みが表示を止めている場合

診断に「レンダリングを妨げるリソースの除外」と出ていたら、CSSやJavaScriptの読み込みが終わるまで表示が止まっています。JavaScriptには defer を付けて、HTMLの表示を先に進めるのが基本です。ページの動作に必須でないスクリプト（解析ツールや外部のウィジェットなど）は、できるだけ後から読み込むようにします。

サーバーの応答が遅い場合

「最初のサーバー応答時間」が長い場合は、サーバー側の問題です。PHPで毎回重い処理をしていないか、データベースへの問い合わせが多すぎないかを確認します。共有サーバーなら、サーバー会社のキャッシュ機能を有効にするだけで改善することもあります。

CLSを改善する

記事を読み始めたところで、上に広告が差し込まれて文章が下にずれる。ボタンを押そうとした瞬間に位置が変わって、別のものを押してしまう。CLSが悪いと、こうした体験が起きます。原因は主に次の3つです。

  • サイズ指定のない画像：<img> に width と height を書いておくと、ブラウザは画像を読み込む前に場所を確保できます。CSSで max-width: 100%; height: auto; を指定しておけば、スマホでも縦横比を保って縮みます。
  • 広告や埋め込み：広告は読み込みが終わってから高さが決まるため、ずれの原因になりやすい要素です。広告を置く場所に、あらかじめ最低限の高さ（min-height）を確保しておくと、ずれを小さくできます。
  • Webフォント：フォントの読み込み前後で文字の幅が変わり、行がずれることがあります。日本語のWebフォントはファイルが大きいので、本文はOS標準のフォントにするのも有効な選択です。
/* 広告枠の高さを先に確保する例 */
.ad-slot {
  min-height: 280px;
}

Cookieの同意バナーのように後から表示するものは、ページの流れの中に差し込むのではなく、画面の下に重ねて表示（position: fixed）すると、本文がずれません。広告と読みやすさの考え方については、広告と読みやすさは両立できるかでも書いています。

INPを改善する

INPが悪いのは、タップしたときにブラウザが別の重い処理で手一杯になっている状態です。個人サイトでは、次のような原因が多いです。

  • 外部のスクリプト（広告、解析、SNSの埋め込み）が多く、読み込み直後に重い処理が集中している。
  • 入力のたびに重い計算や画面の書き換えをしている（検索ボックスで1文字ごとに全件を絞り込むなど）。
  • 大量の要素を一度に作り直している。

自作のスクリプトであれば、入力のたびではなく少し待ってから処理する（デバウンス）、重い計算を分割する、といった対策が効きます。外部のスクリプトは、本当に必要なものだけに絞ることがいちばんの近道です。

どこから手を付けるか

PageSpeed Insightsには多くの改善項目が並びますが、全部を直す必要はありません。個人サイトなら、次の順番がおすすめです。

  1. 最初に見える大きな画像を軽くし、loading="lazy" を外す（LCP）。
  2. すべての画像に width と height を書く（CLS）。
  3. 広告や埋め込みの場所に高さを確保する（CLS）。
  4. JavaScriptに defer を付け、不要な外部スクリプトを外す（LCP・INP）。
  5. 画像やCSSにブラウザキャッシュを設定する（2回目以降の表示）。

改善したら、もう一度PageSpeed Insightsで測って効果を確かめます。フィールドデータは過去28日間の集計なので、反映されるまでには時間がかかります。数字だけを追いかけるより、自分のスマホでページを開いて「待たされないか」「ずれないか」を確かめる習慣のほうが、実際の使いやすさにつながります。

Know-howの一覧を見る