?>

Core Web Vitals完全解説：LCP、INP、CLS – 初心者向け完全ガイド（2026年版）

Core Web Vitalsは、実際のページ体験を測定するGoogleのユーザー中心の指標セットです。2021年からランキング要素となっており、2026年にはこれまで以上に重要になっています – これらをパスすることで、検索順位とコンバージョン率を直接改善できます。このガイドでは、各指標の説明、測定方法、一般的な問題の正確な修正方法を説明します。

Core Web Vitalsが重要な理由（ビジネスケース）

• Core Web Vitalsをパスするページは離脱される可能性が24％低くなります。
• LCPが0.5秒改善すると、コンバージョンが12～15％増加する可能性があります（Googleのケーススタディ）。
• Core Web Vitalsの悪さはタイブレーカーです – 2つのページの関連性が類似している場合、より高速で安定したページが上位にランクされます。

サイトが3つの指標のいずれかに失敗している場合、あなたはお金とランキングを無駄にしています。

3つのCore Web Vitals – 詳細な内訳

1. LCP（Largest Contentful Paint）– 読み込み速度

測定内容：最も大きな可視要素（ヒーロー画像、見出し、動画）のレンダリングにかかる時間。良好：2.5秒未満。不良：4秒超。

重要な理由：ユーザーはメインコンテンツが表示されるタイミングに基づいて速度を知覚します。LCPが遅いと、サイトが壊れているように感じます。

LCPが悪い一般的な原因：

• 大きなヒーロー画像（>200KB）。
• サーバーの応答時間が遅い（TTFB >600ms）。
• レンダリングをブロックするCSSまたはJavaScript。
• 描画を遅らせるクライアントサイドレンダリング（React/Vue）。

2. INP（Interaction to Next Paint）– 応答性

測定内容：ユーザーの操作（クリック、タップ、キー押下）から次の視覚的更新までの時間。良好：200ミリ秒未満。2024年にFIDを置き換えました。

重要な理由：INPが遅いと、サイトが遅く感じられます。ユーザーがボタンをクリックしても何も起こらない – 壊れていると思われます。

INPが悪い一般的な原因：

• メインスレッドをブロックする長いJavaScriptタスク（>50ms）。
• 操作ごとの重いイベントハンドラ。
• 操作時に実行されるサードパーティスクリプト（アナリティクス、チャットウィジェット）。

3. CLS（Cumulative Layout Shift）– 視覚的安定性

測定内容：可視要素の予期しないレイアウトシフト（動き）の量。良好：0.1未満。不良：0.25超。

重要な理由：コンテンツが移動すると、ユーザーは位置を見失い、誤って広告をクリックしたり、フラストレーションを感じたりします。これは直接的なユーザー体験の失敗です。

CLSが悪い一般的な原因：

• 明示的な`width`と`height`がない画像や動画。
• 遅れて読み込まれるフォントによるテキストの入れ替えや移動。
• 既存のコンテンツを押し下げる動的に挿入されるコンテンツ（広告、バナー）。

サイトのCore Web Vitalsの測定方法

• フィールドデータ（実際のユーザー、ランキングを決定）： Google Search Console → Core Web Vitalsレポート。また、CrUX（Chrome UXレポート）。
• ラボデータ（シミュレーション、デバッグ用）： PageSpeed Insights、DevToolsのLighthouse、WebPageTest。

ランキングへの影響についてはフィールドデータに焦点を当てますが、問題を見つけて修正するにはラボデータを使用します。

LCPが悪い場合の修正 – ステップバイステップ

1. ヒーロー画像を最適化する

WebPに変換し、SquooshやImageOptimなどのツールで圧縮します。`srcset`を使用して、デバイスごとに適切なサイズの画像を提供します。

<code>&lt;img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" width="800" height="500" fetchpriority="high" alt="ヒーロー"&gt;</code>

2. LCP要素をプリロードする

<code>&lt;link rel="preload" as="image" href="hero.webp" fetchpriority="high"&gt;</code>

3. TTFB（Time to First Byte）を改善する

• 共有ホスティングではなくVPSを使用する。
• OPcacheを使用してPHP-FPMを有効にする。
• データベースインデックスとキャッシュ（RedisまたはMemcached）を実装する。
• グローバル配信のためにCDN（Cloudflare、Bunny.net）を検討する。

4. レンダリングをブロックするリソースを排除する

クリティカルCSSをインライン化し、非クリティカルCSSを遅延させ、JavaScriptファイルに`defer`または`async`を追加します。

<code>&lt;style&gt; /* クリティカルCSS */ &lt;/style&gt;<br>&lt;link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'"&gt;<br>&lt;script defer src="analytics.js"&gt;&lt;/script&gt;</code>

INPが悪い場合の修正 – 応答性の詳細分析

1. 長いJavaScriptタスクを分割する

<code>function heavyTask() {<br>  let i = 0;<br>  function chunk() {<br>    const start = performance.now();<br>    while (i < items.length && performance.now() - start < 5) {<br>      process(items[i]);<br>      i++;<br>    }<br>    if (i < items.length) setTimeout(chunk, 0);<br>  }<br>  chunk();<br>}</code>

2. イベントハンドラを最適化する

<code>addEventListener('scroll', () => { ... }, { passive: true });</code>

3. サードパーティスクリプトを削除または遅延させる

<code>document.getElementById('chat-trigger').addEventListener('click', () => {<br>  const script = document.createElement('script');<br>  script.src = 'https://chatwidget.com/script.js';<br>  document.head.appendChild(script);<br>});</code>

CLSが悪い場合の修正 – レイアウトシフトを排除する

1. すべてのメディアに明示的な幅/高さを追加する

<code>&lt;img src="image.webp" width="800" height="500"&gt;</code>

2. フォントのスペースを確保する

<code>@font-face {<br>  font-family: 'Inter';<br>  font-display: swap;<br>  /* ... */<br>}</code>

3. 既存のコンテンツの上にコンテンツを挿入しない

バナーや通知を表示する必要がある場合は、固定高さのプレースホルダdivを使用してスペースを確保します。

Core Web VitalsにおけるWordPressとカスタムPHPの比較

カスタムPHPサイトは一貫して高いスコアを獲得します。なぜなら、プラグインの肥大化、テーマのオーバーヘッド、強制されるJavaScriptがないからです。デフォルトのWordPressインストールは、管理バーがログインユーザーに対してコンテンツを移動させるため（訪問者は見えなくても）、CLSに失敗することがよくあります。カスタムPHPでは、すべてのバイトを制御できます。クリティカルCSSをインライン化し、必要なものを正確にプリロードし、レイアウトシフトを完全に回避できます。

実際のクライアント事例：不合格から合格まで7日間

ある住宅サービス会社は、Core Web Vitalsが悪いWordPressサイトを持っていました：LCP 4.2秒、INP 540ミリ秒、CLS 0.29。フロントエンドをカスタムPHP静的サイトに移行しました（予約用の既存のバックエンドは維持）。

実施したアクション：

• ヒーロー画像をWebPに変換しプリロード。
• ヒーローセクションとナビゲーションのクリティカルCSSをインライン化。
• すべてのJavaScriptを`defer`に移動するか、ユーザー操作後に読み込むように変更。
• すべての画像とiframeに明示的な寸法を設定。

1週間後の結果（GSCからのフィールドデータ）：

• LCP：4.2秒 → 1.1秒（合格）。
• INP：540ミリ秒 → 98ミリ秒（合格）。
• CLS：0.29 → 0.02（合格）。
• オーガニックトラフィック：+34%（60日後、ランキング改善による）。

クライアントは現在、プラグインの継続的な費用を支払うことなく、軽量で高速なコードを所有しています。

Core Web Vitalsを修正するためのステップバイステップのアクションプラン

1. 現在の状態を測定する – PageSpeed Insightsを実行します。モバイルのLCP、INP、CLSを記録します。
2. 簡単な問題を修正する – 画像を圧縮し、キャッシュを有効にし、CDNを使用します。
3. LCP > 2.5秒の場合： ヒーロー画像をプリロードし、クリティカルCSSをインライン化し、サーバーの応答を改善します。
4. INP > 200ミリ秒の場合： 長いJSタスクを分割し、サードパーティスクリプトを遅延させ、イベントハンドラを最適化します。
5. CLS > 0.1の場合： すべてのメディアに寸法を追加し、`font-display: swap`を使用し、ファーストビューの上に動的コンテンツを挿入しないようにします。
6. 再テストして監視する – Google Search ConsoleのCore Web Vitalsレポートを使用して、時間の経過に伴う実際のユーザーデータを追跡します。

WordPressを使用している場合は、軽量なテーマ（GeneratePress、Kadence）への切り替え、不要なプラグインの削除、PerfmattersやFlyingPressなどのプラグインの使用を検討してください。しかし、究極のソリューションは、パフォーマンスのために構築されたカスタムPHPサイトです。

Core Web Vitalsをパスしてランキングを上げる準備はできましたか？

私はLighthouseで100を獲得し、すべてのCore Web VitalsをすぐにパスするカスタムPHPウェブサイトを構築します。あなたは一回限りの料金を支払うだけ – サブスクリプションも隠れたコストもありません。移行の準備ができていない場合は、既存のサイトのCore Web Vitalsも修正します。

あなたのサイトについて話しましょう – 無料のCore Web Vitals監査を提供します。

データは実際のクライアントプロジェクトとGoogleが公開したケーススタディに基づいています。個々の結果はサイトの複雑さとコンテンツによって異なる場合があります。