株式会社renue
AI導入・DXの悩みをプロに相談してみませんか？
AIやDXに関する悩みがありましたら、お気軽にrenueの無料相談をご利用ください。 renueのAI支援実績、コンサルティングの方針や進め方をご紹介します。
ページスピードとCore Web Vitalsが2026年のSEOで重要な理由
Core Web Vitals（CWV）は、Googleがユーザー体験を評価するための3つの指標で、2026年のSEOランキングにおける重要なシグナルです。Googleはページ体験をURL群レベルでCrUX（Chrome User Experience Report）データに基づいて評価しており、CWV基準を満たすサイトはバウンス率の低下やオーガニックパフォーマンスの向上が報告される場合があります。
しかし、2026年時点でモバイルサイトの47〜48%、デスクトップサイトの約56%しかCWV基準を満たしていません。特にINP（Interaction to Next Paint）は43%のサイトが200msの閾値を超えており、最も不合格率の高い指標です。パフォーマンスの低いサイトでは機会損失が生じる場合があるとされています。
Core Web Vitals 3指標の基準値（2026年版）
| 指標 | 測定対象 | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP（Largest Contentful Paint） | 読み込み速度 | 2.5秒以下 | 2.5〜4.0秒 | 4.0秒超 |
| INP（Interaction to Next Paint） | 操作応答性 | 200ms以下 | 200〜500ms | 500ms超 |
| CLS（Cumulative Layout Shift） | 視覚的安定性 | 0.1以下 | 0.1〜0.25 | 0.25超 |
2024年の重要な変更：2024年3月にFID（First Input Delay）がINPに置き換わりました。FIDは最初のインタラクションのみを測定していましたが、INPはページ上のすべてのインタラクション（クリック・タップ・キーボード入力）を評価し、75パーセンタイルで最も遅いインタラクションを報告します。
最適化の優先順序：TTFB → LCP → INP → CLS
最も効果的な改善順序はTTFB（Time to First Byte）→ LCP → INP → CLSです。上流の改善が下流に波及するため、この順序が効率的です。
LCP最適化（読み込み速度）
LCPはページの最も大きな可視要素（ヒーロー画像・見出しテキスト等）の表示完了時間を測定します。
- 画像のプリロード：ヒーロー画像にpreloadヒントを付与し、早期に読み込みを開始させる
- クリティカルCSSのインライン化：ファーストビューに必要なCSSをHTML内に埋め込み、外部CSS読み込みの待機を排除
- フォントの最適化：font-display: swapでフォント読み込み中もテキストを表示。Web Font Loaderの活用
- サーバーサイドレンダリング（SSR）：Next.jsのSSRやISR（Incremental Static Regeneration）でサーバー側でHTMLを事前生成
- CDNの活用：ユーザーに近いエッジサーバーからコンテンツを配信
- 画像フォーマットの最適化：WebP/AVIFフォーマットへの変換で画像サイズを50〜80%削減
INP最適化（操作応答性）——2026年の最重要課題
INPは2026年において最も改善が難しく、かつ最もインパクトの大きい指標です。従来のFIDと異なり、ページ全体のインタラクション品質を評価するため、根本的なJavaScriptアーキテクチャの見直しが必要になります。
- ロングタスクの分割：50ms以上のJavaScriptタスクをasync/awaitやsetTimeoutで分割し、メインスレッドを解放
- Web Workerの活用：重い計算処理をメインスレッドからWeb Workerに移動
- React Server Componentsの活用：Next.js App Routerでサーバーコンポーネントを使い、クライアントに送るJavaScriptを削減
- イベントハンドラーの最適化：不要なre-renderを防ぐmemo化、debounce/throttleの適用
- DOM複雑度の削減：DOM要素数を1,500以下に抑え、深いネストを避ける
- サードパーティスクリプトの遅延読み込み：広告・分析タグ等をIntersection Observerで遅延読み込み
CLS最適化（視覚的安定性）
CLSは3指標の中で最も改善しやすい指標です。
- 画像・動画にwidth/heightを明示：ブラウザがレイアウト計算前にスペースを予約
- 広告・動的コンテンツの領域確保：広告枠や遅延読み込みコンテンツに事前にmin-heightを設定
- font-display: swapの設定：フォント切り替え時のレイアウトシフトを最小化
- アニメーションにtransformを使用：top/leftではなくtranslateを使い、レイアウト再計算を回避
Next.jsサイトでのCWV最適化：renueの実践知見
renueでは、3,000記事以上を掲載するNext.jsコーポレートサイト（renue.co.jp）のCWV最適化を継続的に実施しています。大規模コンテンツサイト特有の課題と実践的な解決策を紹介します。
next/imageによるLCP最適化
Next.jsのnext/imageコンポーネントは、自動的にWebP/AVIF変換・レスポンシブ画像生成・遅延読み込みを実行します。ヒーロー画像にはpriority属性を付与してプリロードし、LCPの改善に直結させます。自社サイトでもCDN経由での最適化画像配信を標準化しています。
CWV自動モニタリングの仕組み
renueではSEOツール基盤の一部としてCore Web Vitalsの自動取得機能を実装しています。対象ページのCWVスコアをプログラマティックに取得・記録し、閾値を超えた場合に通知する仕組みを運用しています。さらに、社内向けダッシュボードにCWVの可視化パネルを組み込み、技術指標と事業指標を一元管理しています。
3,000記事サイトのパフォーマンス戦略
- ISR（Incremental Static Regeneration）：全ページの静的生成は不可能なため、ISRでアクセス時に段階的に再生成
- 動的サイトマップとの連携：CMSから全記事を動的に取得してサイトマップを生成し、lastmodの正確性を保つ
- クリティカルCSSの自動抽出：Next.jsのApp Routerが自動でページ固有のCSSのみを配信
- サードパーティスクリプトの管理：next/scriptのstrategy="lazyOnload"でGA4・GTM等の分析タグを遅延読み込み
CWV計測ツール比較
| ツール | データ種類 | 特徴 |
|---|---|---|
| PageSpeed Insights | ラボ+フィールド | CrUXデータ（実ユーザー）とLighthouseデータを両方表示 |
| Google Search Console | フィールド | サイト全体のCWVステータスをURL群単位で確認 |
| Lighthouse | ラボ | ローカル環境でのシミュレーション計測。CI/CDに統合可能 |
| Chrome DevTools | ラボ | パフォーマンスパネルでLong Taskやレイアウトシフトを特定 |
| web-vitals（npm） | フィールド | JavaScriptライブラリで実ユーザーのCWVをリアルタイム収集 |
| CrUX Dashboard | フィールド | Data StudioでCWVの月次トレンドを可視化 |
重要な注意点：SEOランキングに影響するのは「フィールドデータ」（CrUX = 実ユーザーのデータ）です。Lighthouseのスコアが良くても、CrUXデータが基準未達ならランキングへの効果はありません。
よくある質問（FAQ）
Q1: Core Web Vitalsはどの程度SEO順位に影響しますか？
CWVは「タイブレーカー」（同程度のコンテンツ品質のページ間で順位を決める要因）として機能します。コンテンツの関連性・権威性が最優先ですが、競合サイトと品質が拮抗している場合にCWVが順位差を生みます。
Q2: FIDからINPに変わって何が変わりましたか？
FIDは「最初のインタラクション」だけを測定していたため、ページ遷移後のボタンクリックやフォーム入力の遅延は評価対象外でした。INPはすべてのインタラクションを評価するため、ページ全体のJavaScriptパフォーマンスが問われます。43%のサイトがINP基準を未達成です。
Q3: モバイルとデスクトップで別々に評価されますか？
はい。Googleはモバイルファーストインデックスを採用しており、モバイルのCWVデータが主に評価されます。デスクトップは別のデータセットとして評価されますが、SEOへの影響はモバイルが主です。
Q4: SPAやNext.jsサイトでもCWVは計測されますか？
はい。Next.jsのSSR/ISRページはCWVが正常に計測されます。CSR（クライアントサイドレンダリング）のみのSPAではLCPの計測が不安定になる場合があるため、SSRまたはSSGの併用を推奨します。
Q5: CWV改善の費用対効果は？
画像最適化やfont-display設定といった基本対策は工数が小さく効果が大きいため、最初に着手すべきです。INPの本格改善はJavaScriptアーキテクチャの見直しが必要で工数がかかりますが、コンバージョン率15〜30%向上という効果が報告されています。
ページスピード・Core Web Vitals改善のご相談
renueでは、Next.jsサイトのCWV最適化からSEOパフォーマンス改善まで支援しています。3,000記事以上のコンテンツサイト運営で培った大規模サイト最適化の知見をもとに、技術とSEOの両面からサポートいたします。
無料相談はこちら →
