ブログの速度を確認する方法：LCP・INP・CLSの意味と改善
ブログの速度はPageSpeed Insightsでモバイルとデスクトップを分けて調べ、LCP・INP・CLSで読み込み、反応性、画面の安定性を確認します。性能スコアだけを見るより、実ユーザーデータと実験室の診断を区別し、悪い指標の原因を一つずつ直すとよいでしょう。
LCP・INP・CLSとは？
コアウェブバイタル（Core Web Vitals）は、Googleがページのユーザー体験を見る主要指標です。現在の中心は次の三つです。いずれも小さいほうが良い値ですが、対象と単位が異なります。
| 指標 | 測るもの | 良好の基準 |
|---|---|---|
| LCP：Largest Contentful Paint | 画面の最大の画像やテキストなど、主要コンテンツの表示時点 | 2.5秒以下 |
| INP：Interaction to Next Paint | クリック、タップ、キー入力への画面反応の遅延 | 200ミリ秒以下 |
| CLS：Cumulative Layout Shift | 予期しないレイアウトの移動量 | 0.1以下、単位なし |
Googleのウェブバイタルの案内は、モバイルとデスクトップを分けた75パーセンタイルで評価するよう説明しています。最速の1回ではなく、多くの訪問者が体験する水準を見るための基準です。
記事はすぐ見えてもメニューの反応が遅い場合や、ボタンは動いても広告で本文が押し下げられる場合があります。「遅い」という印象だけで画像圧縮を繰り返さず、どの体験が悪いかを区別します。
PageSpeed Insightsで検査する
- ログイン不要の公開記事URLを用意します。管理画面やプレビューは除きます。
- PageSpeed Insightsへ入力して分析します。
- モバイルで実際のユーザー体験と性能問題の診断を分けて読みます。
- デスクトップも確認し、URL、検査日、端末区分、悪い指標、主な診断を記録します。
新しい記事一つだけでなく、代表的な形式ごとに選ぶと便利です。通常の説明、画像が多い記事、表やコードがある記事なら、共通テンプレートと特定コンテンツの問題を比較できます。実在する形式だけを選べば十分です。
結果のURLが入力したものと違わないかも確認します。リダイレクト後を検査したなら、以後も同じ最終URLで比較します。条件の記録は良い点数を見せるためではなく、変更の効果を判断するためです。
実ユーザーデータと性能スコアの違い
実ユーザーデータはChrome UX Report（CrUX）の直近28日間に基づきます。標本が足りないとオリジン全体のデータになったり、表示されなかったりします。一方、ラボの診断はLighthouseのシミュレーション環境による分析です。PageSpeed Insightsの公式説明で違いを確認できます。
「性能90点」と「実ユーザーのコアウェブバイタル合格」は同じ判定ではありません。表示データがそのURLかオリジン全体かも確認します。データなしという表示も、速い認証や遅い判定ではありません。
画像を変えた直後にラボ結果が改善しても、28日間のデータには変更前が含まれます。すぐ確認するのは、ファイルと表示の正常さ、同条件の再検査での改善傾向です。実ユーザーの傾向は後の期間に別途確認します。
LCPが悪い場合は主要コンテンツの遅延を調べる
診断で最大のコンテンツになった要素を先に確認します。上部のアイキャッチとは限らず、大きなタイトルなどの場合もあります。すべての画像を同じ方法で処理してはいけません。
- 主要画像なら、表示サイズに対して原本が大きすぎないか調べます。
- 適切なサイズ、圧縮、形式にし、文字や細部の鮮明さも確認します。
- 最初の画面のLCP画像が遅延読み込みで遅れていないか調べます。下部画像向けの設定を無条件で適用しません。
- サーバー応答や描画を妨げるリソースが指摘されたら、画像以外も調べます。
LCP最適化ガイドは、画像の発見、転送、表示がそれぞれ遅延し得ると説明しています。形式の変更はWebPへの変換方法を参照できます。変更後も古い画像が配信される場合は、キャッシュと実際のリクエストを確認します。
INPが悪い場合はクリック後の処理を調べる
INPは入力後、次の画面が描かれるまでの反応性を見ます。長いJavaScript処理がメインスレッドを占有すると入力が待たされます。INP最適化ガイドは、入力遅延、イベント処理、表示遅延を分けて調べています。
運営者はモバイルでメニュー、検索、目次移動などを再現してみましょう。遅延する動作を記録し、関連プラグイン、ウィジェット、外部スクリプトに不要・重複機能がないか検討します。
無条件で多くのプラグインを停止するのは避けます。バックアップや検証環境を準備し、一つずつ変更して影響を確認します。JavaScriptの実行遅延を設定したら、点数だけでなくメニュー、検索欄、同意バナーが動くかも確かめます。
CLSが悪い場合は動く領域の空間を確保する
画像、広告、埋め込みが遅れて本文を押すと、読んでいる位置や押すリンクが動きます。CLS最適化ガイドは、画像サイズ情報と後から現れるコンテンツ用の空間確保を主要項目に挙げています。
- 画像の比率に合う
width・height、または比率に合う空間を与えます。 - 広告や動画の空間を端末サイズに合わせて先に確保します。
- 広告が返らないとき、その空間を急に畳んで別の移動を起こさないか確認します。
- フォントやバナーの適用時に本文やボタンが動かないか見ます。
空白の削減と安定性には調整が必要です。デスクトップ用の広告高をそのままモバイルへ適用せず、実際の記事を開きます。本文中だけでなく、最初の画面と下部の動きも確認します。
変更後は同じ条件で再確認する
- 変更前の設定、ファイル、結果を保存します。
- 影響の大きい原因を一つ選んで修正します。
- 必要なキャッシュを更新し、変更したリソースが公開ページで提供されるか確認します。
- 同じURLと端末区分で再検査し、メニュー、画像、広告、本文も見ます。
- 機能の故障や別指標の悪化があれば戻し、原因を絞り直します。
少し数値が変わっただけで効果を断定せず、前後の記録と繰り返し現れる問題を見て次へ進みます。点数を上げる設定で必要な機能が使えなくなるなら、良い改善とはいえません。
