WordPress Core Web Vitals最適化：LCP、INP、CLSを改善する（2026）

Core Web Vitalsとは何か、なぜランキング要因なのか？

GoogleのPage Experienceアップデート以降、Core Web Vitalsは直接的なランキング要因となっています。Googleはこれらを使用して、実際のユーザーにとってウェブサイトがどれだけ速く安定して読み込まれるかを評価します。

3つの指標の概要：

• LCP（Largest Contentful Paint）： 最も大きな可視要素がどれだけ速く読み込まれるか？目標：2.5秒以内。
• INP（Interaction to Next Paint）： ページがユーザーの入力にどれだけ速く反応するか？目標：200ms以内。
• CLS（Cumulative Layout Shift）： 読み込み中のレイアウトの安定性は？目標：0.1以内。

HTTP Archiveのデータによると、モバイルで3つの指標すべてをクリアしているWordPressサイトはわずか44%です。これは競合他社を追い抜くチャンスです。

診断：現在の状況は？

最適化の前に、まず測定が必要です。以下のツールで現在のパフォーマンスを確認できます：

Google PageSpeed Insightsは、ラボモードとフィールドデータモード（Chrome User Experience Reportの実際のユーザーデータ）の両方でURLを分析します。最も重要なページを入力してください — ホームページ、カテゴリページ、商品ページ。

Google Search Console → Core Web Vitalsレポートは、ドメイン内の「不良」または「改善が必要」と評価されたすべてのページを表示します。Googleがランキングに使用するのはまさにこのデータであるため、最も重要な出発点です。

WebPageTest.orgは、さまざまなデバイスやネットワーク速度でテストできます — モバイルユーザー体験をリアルにシミュレートするのに最適です。

LCPの改善：最大の要素をより速く読み込む

ほとんどのWordPressサイトでは、LCPはヒーロー画像、H1見出し、または大きなビデオサムネイルによって決まります。

ヒーロー画像の最適化：

• WebP形式で画像を配信（JPEG/PNGより30〜50%小さい）
• LCP画像にfetchpriority="high"を設定：
• LCP画像の遅延読み込みを明示的に無効化：loading="eager"

TTFB（Time to First Byte）の短縮： 遅いサーバーはすべてを遅延させます。ホスティングプロバイダーを確認してください — WordPressにはサーバーサイドキャッシュのあるプロバイダーが推奨されます。目標：TTFBは800ms以内。

クリティカルCSSのインライン化： CSSファイルはレンダリングをブロックします。WP RocketやNitroPackなどのツールは、クリティカルCSSを自動的に抽出してにインライン化し、残りを非同期で読み込むことができます。

LCPに推奨されるプラグイン：

• WP Rocket — プリロード、クリティカルCSS、TTFB最適化を備えたオールインワンソリューション
• Imagify / ShortPixel — 自動WebP変換と圧縮
• Cloudflare（無料） — CDNがグローバルにTTFBを大幅に短縮

INPの改善：ページを入力に反応させる

INPは2024年に旧FID指標に取って代わり、すべてのユーザーインタラクション（クリック、タップ、キーボード入力）の応答時間を測定します。

JavaScriptの肥大化を削減： 不要なプラグインはそれぞれJavaScriptを読み込みます。必要のないプラグインは無効化しましょう。Chrome DevToolsのPerformanceタブで、どのスクリプトが最も長くブロックしているかを確認できます。

スクリプトのオンデマンド読み込み： Perfmattersなどのプラグインを使用すると、特定のページでのみ、またはユーザーの操作後にのみスクリプトを読み込むことができます（defer、async）。

レンダリングブロックリソースの排除： 内のdeferやasyncのないスクリプトは、レンダリングを完全にブロックします。最新のプラグインのほとんどは正しく読み込まれますが、古いテーマやプラグインはそうでないことが多いです。

CLSの排除：レイアウトのずれをなくす

読み込み中にページがずれて間違ったボタンをクリックしてしまうほど、ユーザーをイライラさせるものはありません。

常に画像のサイズを指定： widthとheight属性がないと、ブラウザは画像が読み込まれる前にどれだけのスペースが必要かわかりません：

<img src="image.webp" width="800" height="450" alt="..." />

Webフォントの安定化： カスタムフォントはFlash of Invisible Text（FOIT）やFlash of Unstyled Text（FOUT）を引き起こします。解決策：CSS宣言でfont-display: swapを使用。さらに良い方法：Google Fontsから読み込む代わりにフォントをローカルにホストする。

広告と埋め込みのスペースを確保： 広告、YouTube埋め込み、Cookieバナーが読み込み後にページに挿入されると、レイアウトがずれます。CSSでこれらの要素に常に固定の高さを確保してください。

モニタリング：長期的に値を監視する

最適化は一度きりの作業ではありません。新しいプラグインやテーマのアップデートがCore Web Vitalsを悪化させる可能性があります。

Google Search Consoleは、ページが「不良」カテゴリに落ちると自動的に通知します。

AniSEOはWordPressサイトを継続的に監視し、ランキングの低下が発生する前に積極的に最適化を提案します。

AniSEOでCore Web Vitalsを自動監視 →

---

関連記事：

• WordPress SEO監査：ステップバイステップガイド 2026
• WordPressのオンページSEO：完全ガイド 2026
• WordPressのSchema Markup：リッチスニペット 2026