2026年5月27日

WordPressのCore Web Vitalsを改善する方法（フィールドデータから原因を切り分ける手順）

カスタマイズ

WordPressのCore Web Vitalsを改善する近道は、PageSpeed Insightsのスコアを追いかけることではなく、実際の訪問者のデータ（フィールドデータ）で「どの指標が・どのページ群で」悪いのかを特定し、その指標の原因に絞って手を打つことです。この記事では、LCP・INP・CLSの3指標の読み方、Search ConsoleとPageSpeed Insightsでの切り分け方、そしてWordPressのコア機能や設定で行える具体的な対策を順に解説します。読み終えるころには、自分のサイトで最初に直すべき箇所を判断できるようになります。

Core Web Vitalsの3指標と目標値

Core Web Vitalsは、Googleがページの体験を測るために定めた3つの指標です（2026年10月現在）。

LCP（Largest Contentful Paint）：画面内で最も大きな画像やテキストが表示されるまでの時間。良好の目安は2.5秒以内です。
INP（Interaction to Next Paint）：クリックやタップなどの操作から、画面が反応して描画されるまでの時間。良好の目安は200ミリ秒以内です。2024年3月に、それまでのFIDに代わって指標になりました。
CLS（Cumulative Layout Shift）：表示中にレイアウトが予期せずずれる量。良好の目安は0.1以下です。

判定には、実際の訪問者のページ表示のうち75パーセンタイルの値が使われ、モバイルとパソコンは別々に評価されます。「たまに遅い」ではなく「4回に1回より多く遅い」状態を直すイメージです。

Core Web Vitalsは検索のページエクスペリエンスを構成する要素の一つですが、良好にしたからといって順位が上がるとは限りません。Googleも、関連性の高いコンテンツが優先されると説明しています。改善の目的は、読者がストレスなく読めるページにすることと考えてください。

まずフィールドデータで「何が悪いか」を特定する

測定ツールは2種類のデータを示します。違いを理解しないまま対策すると、効果のない作業に時間を使ってしまいます。

フィールドデータ：Chromeユーザーの実際の体験を集計したもの（CrUX）。Search Consoleの「ウェブに関する主な指標」レポートや、PageSpeed Insightsの上部に表示されます。評価に使われるのはこちらです。
ラボデータ：Lighthouseが決まった条件で1回測った結果。原因の調査には便利ですが、実際の訪問者の環境とは異なります。また、ラボでは操作が発生しないためINPは測れず、代わりに Total Blocking Time（TBT）が目安として示されます。

手順は次のとおりです。

Search Consoleで不良のURLグループを見る：レポートは似たURLをまとめて表示します。「投稿ページ全体でLCPが不良」「トップページだけCLSが不良」のように、テンプレート単位で問題が分かります。
代表URLをPageSpeed Insightsで測る：フィールドデータで不良の指標を確認し、ラボデータの診断項目で原因の候補を探します。
アクセスが少ないサイトの場合：CrUXにデータが集まらず「データなし」になることがあります。その場合はラボデータとChromeの開発者ツール（Performanceパネル）で調べ、必要に応じて Google の web-vitals ライブラリで自分のサイトの実測値を集める方法もあります。

改善の効果がフィールドデータに反映されるまでには時間がかかります（CrUXは過去28日間の集計です）。対策の前後で数日ごとに一喜一憂せず、数週間単位で推移を見てください。

LCPを改善する

WordPressで LCP が遅い原因は、多くの場合「サーバーの応答が遅い」「LCP要素の画像が重い・遅れて読み込まれる」「表示を妨げるCSSやJavaScriptが多い」のどれかです。PageSpeed Insightsの診断で、LCP要素がどれかと、その時間の内訳（サーバー応答、読み込みの遅れ、読み込み時間、描画の遅れ）を確認すると、どこから手を付けるべきかが分かります。

サーバー応答（TTFB）が長い場合は、ページキャッシュの導入が最も効きます。キャッシュプラグインやサーバー側のキャッシュ機能を有効にし、ログインしていない状態で応答時間を測り直します。データベースの重いクエリや、PHPのバージョンが古いことも原因になります。

LCP要素がアイキャッチやヒーロー画像の場合は、その画像を遅延読み込みしないことが重要です。WordPressは表示位置から判断して最初の画像を遅延読み込みの対象外にし、LCP候補の画像に fetchpriority="high" を付ける仕組みを備えています（6.3以降）。ただし、テーマやスライダーが独自に画像を出力していると、この判定が働かないことがあります。テーマで画像を出力している場合は、属性を明示すると意図どおりになります。

// 子テーマのテンプレート内：ファーストビューの画像は遅延読み込みしない
echo wp_get_attachment_image(
	get_post_thumbnail_id(),
	'large',
	false,
	array(
		'loading'       => 'eager',
		'fetchpriority' => 'high',
	)
);

wp_get_attachment_image() を使うと srcset と sizes が自動で付き、端末の幅に合ったサイズの画像が選ばれます。テーマがフルサイズ画像のURLを直接書いている場合は、この関数に置き換えるだけで転送量が大きく減ることがあります。

表示を妨げるCSS・JavaScriptが多い場合は、使っていないプラグインの停止と、スクリプトの読み込み方法の見直しを行います。

INPを改善する

INPが悪いのは、操作したときにブラウザのメインスレッドがJavaScriptの処理でふさがっているためです。WordPressでは、多機能なページビルダー、スライダー、広告タグ、チャットウィジェット、アクセス解析タグなどが重なると悪化しやすくなります。

調べ方は、Chromeの開発者ツールのPerformanceパネルで操作を記録し、長いタスク（50ミリ秒を超える処理）がどのスクリプトから来ているかを見ることです。原因が分かったら、次の順で対策します。

使っていないプラグインや外部タグを外す
外部スクリプトは defer や async で読み込み、初期表示に不要なものは遅らせる
自作のJavaScriptでは、重い処理を小さく分割し、操作への反応（表示の更新）を先に行う

WordPress 6.3以降では、wp_enqueue_script() の第5引数に配列を渡して読み込み戦略を指定できます。

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
function mytheme_enqueue_scripts() {
	wp_enqueue_script(
		'mytheme-main',
		get_stylesheet_directory_uri() . '/js/main.js',
		array(),
		'1.0.0',
		array(
			'strategy'  => 'defer',
			'in_footer' => true,
		)
	);
}

defer はHTMLの解析を止めずに読み込み、解析後に順番どおり実行します。ほかのプラグインのスクリプトに後から属性を付け替えると動作が壊れることがあるため、ステージング環境で確かめてから適用してください。

CLSを改善する

CLSの主な原因は、サイズが決まっていない画像や埋め込み、後から差し込まれる広告やバナー、Webフォントの切り替わりです。

画像・動画に幅と高さを指定する：wp_get_attachment_image() やブロックエディターで挿入した画像には width と height が付きます。テーマやプラグインが属性なしで出力していないか確認します。
広告や埋め込みの領域を確保する：広告枠には CSS の min-height や aspect-ratio で高さを確保し、読み込み後に周りのコンテンツが押し下げられないようにします。
上部への後からの差し込みを避ける：Cookie同意バナーやお知らせバーは、コンテンツを押し下げない配置（画面下部への固定表示など）にします。
フォントの切り替わりを抑える：代替フォントとWebフォントの文字幅の差が大きいとずれが起きます。使うフォントの数と太さを絞り、必要に応じて @font-face の調整（size-adjust など）を検討します。
**アニメーションは transform で行う**：top や height を動かすアニメーションはレイアウトのずれとして数えられることがあります。動きを減らす設定（prefers-reduced-motion）を有効にしている利用者への配慮もあわせて行います。

WordPressのコア機能と公式プラグインを活用する

WordPressのコアには、パフォーマンス向けの改善が継続的に取り込まれています。画像の遅延読み込み、LCP候補への fetchpriority の付与、スクリプトの読み込み戦略、遅延読み込み画像への sizes="auto"（6.7以降）、ページ遷移を先読みする Speculative Loading（6.8以降）などです。WordPress本体とテーマを最新に保つだけで恩恵を受けられる部分があります。

新しい機能を先に試したい場合は、WordPressのパフォーマンスチームが提供する「Performance Lab」プラグインがあります。含まれる機能はバージョンごとに入れ替わるため、各機能の説明を読み、ステージング環境で表示崩れがないか確かめてから使ってください。

作業前にはファイルとデータベースのバックアップを取り、変更は一つずつ行って効果を測ります。

まとめ

指標はLCP（2.5秒以内）、INP（200ミリ秒以内）、CLS（0.1以下）で、実際の訪問者の75パーセンタイルで評価されます。
まずSearch Consoleのフィールドデータで、悪い指標とURLグループを特定します。
LCPはページキャッシュ、ファーストビュー画像の遅延読み込み解除と fetchpriority、適切な画像サイズで改善します。
INPは不要なスクリプトの削減と defer などの読み込み戦略で、メインスレッドの混雑を減らします。
CLSは画像のサイズ指定、広告枠の確保、後からの差し込みを避けることで抑えます。
Core Web Vitalsの改善は読者の体験のためであり、検索順位の上昇を約束するものではありません。