ページ速度改善｜Core Web Vitals最適化

画像の最適化（WebP変換・適切なサイズ・Lazy Load）

画像はWebPまたはAVIF形式に変換してファイルサイズを削減。表示サイズに合わせたリサイズ・Lazy Load（遅延読み込み）・next/imageによる自動最適化を実装します。

不要なJavaScriptの削除・遅延読み込み

使用していないJavaScriptライブラリの削除・サードパーティスクリプト（広告・ウィジェット等）の非同期読み込み・クリティカルでないスクリプトの遅延実行を実施します。

CSSの最適化・Critical CSS

使用していないCSSの削除・ファーストビューに必要なCSSをインラインで記述するCritical CSS実装で、レンダリングブロッキングを解消します。

CDN（コンテンツデリバリーネットワーク）の活用

Vercel Edge Network・Cloudflare CDNを活用してコンテンツを世界中のサーバーから配信。物理的な距離による遅延を最小化します。

ブラウザキャッシュ・サーバーキャッシュの設定

静的リソース（CSS・JS・画像）に適切なキャッシュヘッダーを設定し、再訪ユーザーの表示速度を大幅に改善します。

フォント読み込みの最適化

font-display: swapの設定・next/fontによる最適化・可変フォントの活用で、フォント読み込みによる表示遅延（CLS）をゼロにします。

Next.js+Vercel構成での根本的な高速化

既存サイトの改修で限界がある場合は、Next.js+Vercel構成での再構築が最も効果的です。SSGによる静的配信でLighthouseパフォーマンスを90台以上にすることを目指します。

Lighthouseスコアが低い（50以下）

複数の問題が重なって発生します。画像の未最適化・大量のサードパーティスクリプト・レンダリングブロッキングCSSの組み合わせが主因です。Lighthouseの「Opportunities」と「Diagnostics」を起点に優先度を整理することが重要です。

LCPが遅い（3秒以上）

ファーストビューの最大コンテンツ要素（多くはヒーロー画像）の読み込みが遅いことが原因です。next/imageのpriority属性付与・画像のサイズ最適化・CDNキャッシュ設定で改善できます。

CLSが高い（0.1以上）

フォント・画像・広告の読み込み完了時にレイアウトがズレることで発生します。画像にwidth/heightを明示するかnext/imageのアスペクト比固定、およびnext/fontによるフォント最適化で解消できます。

画像が最適化されていない

JPEGやPNGの大容量画像がそのまま使用されているケースです。WebP変換で30〜50%のファイルサイズ削減が可能で、next/imageを使うと自動的にWebP/AVIFに変換・サイズ最適化されます。

JavaScriptの読み込みが多い

使用していないnpmパッケージ・大容量UIライブラリの全体インポートが原因です。Tree-shakingの有効化・Dynamic Import（next/dynamic）・Bundle Analyzerを使ったサイズ分析が有効です。

CSSが大きすぎる

WordPressテーマに含まれる未使用CSSや、UIフレームワークの全量インポートが主因です。PurgeCSSによる未使用CSS削除・Critical CSSの抽出・Tailwind CSSのJITモードで解決できます。

サーバーレスポンスが遅い（TTFB高）

サーバーのスペック不足・PHPの動的処理・データベースクエリの非効率が原因です。CDNキャッシュの設定・Next.jsのSSGによるサーバー処理排除・ホスティングのアップグレードが有効です。

フォントの読み込みが重い

外部フォントサービス（Google Fonts等）へのリクエストとfont-swapの未設定が原因です。next/fontで自己ホスティング化すると外部リクエストがなくなり、CLSも解消されます。

未使用のCSSが多い（WordPress）

WordPressテーマやプラグインが不要なCSSを大量に出力することが原因です。WP RocketなどのキャッシュプラグインのCSS最適化機能・手動でのCritical CSS実装が選択肢です。

第三者スクリプト（広告・分析）が重い

Google Ads・Facebook Pixel・Hotjar・チャットウィジェットがメインスレッドをブロックします。scriptタグへのdeferまたはasync追加・ユーザー同意後の遅延読み込み実装で影響を最小化できます。

Lighthouse・PageSpeed Insightsで現状計測

改善前のベースラインをモバイル・PCそれぞれで記録します。PageSpeed Insightsのフィールドデータ（実ユーザーデータ）とLabデータの両方を確認し、改善優先度を決定します。

Core Web Vitals確認（LCP/CLS/INP）

Google Search ConsoleのCore Web Vitalsレポートでページグループ別の状態（良好・改善が必要・不良）を確認。影響範囲の大きいページから優先して対応します。

画像最適化（WebP変換/next/image/遅延読み込み）

全画像をWebPまたはAVIFに変換し、next/imageに置き換えます。ファーストビューの主要画像にはpriority属性を付与し、それ以外はLazy Loadを適用します。

JavaScript最適化（Code Splitting/Dynamic Import）

webpack Bundle Analyzerで大容量パッケージを特定。next/dynamicによるDynamic Importでページ初期バンドルを削減。サードパーティスクリプトはdeferまたはasyncで非同期化します。

CSS最適化（PurgeCSS/Critical CSS）

未使用CSSをPurgeCSSまたはTailwindのJITモードで削除。ファーストビューに必要なCSSをCritical CSSとして抽出しインライン化することでFCPを改善します。

フォント最適化（next/font/display:swap）

Google Fontsをnext/fontに置き換えて自己ホスティング化。font-display: swapの設定でFOUT（フォント非表示期間）を最小化し、CLSに影響しないよう調整します。

第三者スクリプト遅延読み込み

Google Analytics・Facebook Pixel・チャットウィジェットなどを、ページ読み込み完了後またはユーザーインタラクション後に遅延読み込みする設定を実装します。

サーバーレスポンス改善（CDN/キャッシュ）

Vercel Edge NetworkまたはCloudflare CDNを設定し、静的リソースのキャッシュTTLを最適化。WordPressの場合はWP Rocketなどのキャッシュプラグインでサーバー応答を高速化します。

計測・検証

実装後にPageSpeed Insights・Lighthouseで再計測し改善前後のスコアを比較。目標値（Lighthouse 90+・LCP 2.5秒以内・CLS 0.1以下）に達するまで改善を繰り返します。

継続的モニタリング

Vercel Analytics・Google Search ConsoleのCore Web VitalsレポートとGA4を連携し、リリース後の数値変化を月次でモニタリング。スコア低下の早期検知と定期的な最適化を継続します。

Lighthouse Performanceスコア（目標90+）

Chrome DevToolsまたはLighthouse CIで計測。モバイル・PCの両方でスコアを記録し、改善前後の比較に使用します。継続的な計測にはLighthouse CIのCI/CD統合が有効です。

LCP（目標2.5秒以内）

PageSpeed InsightsとSearch ConsoleのCore Web Vitalsレポートで確認。フィールドデータ（実ユーザー）とLabデータ（シミュレーション）の両方を参照して改善効果を検証します。

CLS（目標0.1以下）

レイアウトシフトの累積スコアです。Chrome DevToolsのPerformanceタブでシフト発生箇所を特定し、画像・フォント・広告の読み込み調整で数値を下げます。

FID/INP（目標100ms/200ms以下）

ユーザー操作への応答速度です。FIDは廃止されINPに移行しています。JavaScriptのメインスレッド占有時間を削減することで改善します。Long Tasksの解消が鍵です。

PageSpeed Insightsスコア（モバイル/PC）

pagespeed.web.devで公開URLを入力し計測。モバイルとPCそれぞれのスコアと改善提案を月次で記録し、トレンドを追跡します。

直帰率改善率

GA4で速度改善前後の直帰率（Bounce Rate）を比較。表示速度の改善はモバイルからの訪問者の直帰率低下に最も効果が出やすいため、デバイス別で比較します。

CVR改善率

速度改善後のコンバージョン率（問い合わせ・購入・資料DL等）の変化をGA4のコンバージョンレポートで追跡。速度改善は直接のCVR向上につながる施策です。

オーガニック検索順位・流入数の変化

Google Search ConsoleでCore Web Vitals改善後のオーガニック流入数・インプレッション数・平均順位の推移を確認。速度改善はSEO効果として2〜3ヶ月後に現れることが多いです。