ページ速度最適化

LCP（ページの最大コンテンツの描画時間）を2.5秒以内にするには、①ファーストビューの画像をWebP/AVIFに変換してサイズを最適化、②LCP要素へのpreload設定（`<link rel="preload">`）、③サーバー応答時間の短縮（TTFB改善・CDN活用）、④フォントの最適化（font-display: swap）、⑤fetchpriorityを「high」に設定することが主な施策です。Next.jsでは`<Image priority>`を付けるだけでpreloadが自動適用されます。

CLS（レイアウトシフト）を0.1以下にするには、①画像・動画・iframeに必ずwidth/heightを指定（アスペクト比を保持）、②フォントの読み込み時のスペース確保（font-display: optional）、③広告・Webフォントの読み込みによるシフトを防ぐ事前スペース確保、④ダイナミックコンテンツの上部への突然の挿入を避けること、⑤アニメーションにはtransform/opacityを使いlayout変化を発生させないことが重要です。

INP（ユーザー操作への応答性）を200ms以下にするには、①重いJavaScript処理をWeb WorkerやrequestIdleCallbackに移す、②長いタスク（50ms以上）を分割する（scheduler.yield APIの活用）、③不要なJavaScriptの除去・コード分割（Dynamic Import）、④サードパーティスクリプト（タグマネージャー・チャット等）の読み込み遅延化が主な施策です。Chrome DevToolsのPerformanceタブで長いタスクを特定することが第一歩です。

①WebP/AVIF形式への変換（JPEG比で30〜50%軽量化）、②適切なサイズへのリサイズ（表示サイズより大きい画像を使わない）、③遅延読み込み（loading="lazy"）の設定、④ファーストビュー画像のpreload・priority設定（Next.jsでは`priority`prop）の4つが主な施策です。Next.jsの`next/image`コンポーネントを使うと自動でWebP変換・遅延読み込み・srcset生成が適用されます。

よくある原因として、①サードパーティスクリプト（Google Analytics・タグマネージャー・チャットウィジェット）の読み込みコスト、②最適化されていない大きな画像、③レンダーブロッキングリソース（CSSとJavaScript）、④適切に最適化されていないフォント、⑤過度なDOM要素数（1,500超）が挙げられます。Chrome DevToolsのPerformanceタブとLighthouseレポートの「Opportunities」セクションで具体的なボトルネックを特定することが先決です。

Lighthouseはブラウザ（Chrome DevTools）やCLIで実行する計測ツールで、主にシミュレーション環境（ラボデータ）でのスコアを測定します。PageSpeed Insightsはそのスコアに加えて、実際のChromeユーザーのデータ（フィールドデータ・Core Web Vitalsの実績値）も表示します。Googleのランキング評価にはフィールドデータ（実際のユーザー体験）の方が直接的に影響します。

CDNは世界中のエッジサーバーにコンテンツをキャッシュし、ユーザーに最も近いサーバーから配信することでTTFB（Time to First Byte）を大幅に短縮します。日本国内向けサイトではVercel・Cloudflare・Amazon CloudFrontなどが一般的です。Next.jsのVercelデプロイはCDNが標準で組み込まれており、追加設定なしでエッジ配信が有効になります。

Next.jsはSSG/SSR・画像最適化（next/image）・フォント最適化（next/font）・コード分割・App RouterによるReact Server Componentsなど、パフォーマンスのベストプラクティスが組み込まれています。適切に実装すれば、WordPressなど従来のCMSより高いパフォーマンスを得やすい構成です。ただし不適切な実装（クライアントコンポーネントの多用・重いアニメーション・大きなサードパーティ）は逆効果になります。

TTFBはブラウザがHTTPリクエストを送信してから最初の1バイトを受け取るまでの時間です。800ms以下が目標値とされています。TTFBを改善するには、①CDNの活用、②サーバーサイドの処理時間短縮（クエリ最適化・キャッシュ活用）、③Next.jsのStatic GenerationやEdge Runtimeの活用、④ホスティング環境のグレードアップが有効です。

①next/fontを使ってフォントをセルフホスティング化する（Google Fontsへのリクエスト削減）、②font-display: swapでFOUT（テキスト非表示の期間）を防ぐ、③必要なサブセット（日本語なら「latin」のみなど）だけ読み込む、④preconnectでGoogleFontsへの接続を事前確立する、⑤可能であればシステムフォントを使うことで読み込みコストをゼロにする、といった施策があります。

レンダーブロッキングリソースとは、ブラウザがページの表示を開始する前に読み込みを完了しなければならないCSSやJavaScriptファイルのことです。解決策として、①CSSはクリティカルCSSのみをインライン化し残りを遅延読み込み、②JavaScriptには`defer`や`async`属性を追加、③不要なJSは除去するかDynamic Importで遅延読み込みに変換します。

WordPressでの速度改善は、①キャッシュプラグイン（WP Rocket・W3 Total Cache）の導入、②画像圧縮プラグイン（Imagify・ShortPixel）の使用、③CDNの設定（Cloudflare等）、④重いテーマ・プラグインの見直し、⑤データベース最適化が主な施策です。ただしWordPressの構造的な限界から、根本的な速度改善にはNext.js等への移行が有効な場合もあります。

Lighthouseはモバイルテストで遅いCPUと低速回線をシミュレートするため、PCより厳しいスコアになります。モバイル改善の優先施策は、①画像のさらなる最適化（モバイル向けの小さいsrcsetを設定）、②JavaScript量の削減（モバイルはCPU処理が遅い）、③タッチターゲットの適切なサイズ確保（44px以上）、④ビューポートの正しい設定、⑤モバイルでのフォントサイズ最適化です。

GoogleはCore Web Vitalsを「Page Experience」シグナルの一部として公式にランキング要因に採用しています。ただしコンテンツの品質・関連性が最優先であり、Core Web Vitalsは同等コンテンツ間の比較で差別化要因になります。「不良」から「良好」に改善することは順位改善の一因になり得ますが、単独で大幅な順位変動を起こすわけではありません。コンテンツ品質と速度の両方を高めることが重要です。

Dynamic Importとは、JavaScriptモジュールをページ読み込み時ではなく必要なタイミングで読み込む技術です。Next.jsでは`next/dynamic`を使って実装します。例えばモーダルやタブ内のコンテンツ、スクロールで表示されるセクションのJSは初期読み込みに含める必要がないためDynamic Importが有効です。バンドルサイズを削減し、初期表示速度を改善できます。

Google Analytics（GA4）のスクリプトはサードパーティリクエストとして読み込みコストが発生します。軽減策として、①`async`属性での非同期読み込み（デフォルト）、②Google Tag Managerを通じた管理（タグを1スクリプトに集約）、③`partytown`ライブラリでWeb Workerに移す方法があります。AnalyticsそのものはINPにも影響する可能性があるため、不要なカスタムイベントは削除することを推奨します。

①PageSpeed InsightsでBefore/Afterのスコアを記録する（URLを変えずに計測）、②Google Search ConsoleのCore Web Vitalsレポートで実ユーザーの「良好」割合の変化を確認する、③Google AnalyticsのPage Speed（ページ速度）レポートで直帰率・エンゲージメント時間の変化を追う、④Chrome UX Report（CrUX）のフィールドデータで改善を月次確認する、という方法が一般的です。

・preload: 現在のページで確実に必要なリソース（LCP画像・クリティカルフォント）を高優先度で事前取得します。・preconnect: サードパーティサーバー（Google Fonts・Analytics等）への接続を事前確立し、DNSルックアップ・TLSハンドシェイクの時間を短縮します。・prefetch: 次のページで必要になりそうなリソースをアイドル時間に先読みします。Next.jsの`<Link>`コンポーネントはビューポート内リンクを自動的にprefetchします。

クリティカルCSSとは、ファーストビュー（スクロールなしで見える領域）の表示に必要な最小限のCSSのことです。このCSSをHTMLの`<head>`内にインラインで記述することで、外部CSSファイルの読み込みを待たずに初期表示が始まります。Lighthouseの「Eliminate render-blocking resources」の警告が出る場合は、クリティカルCSSの分離が有効です。Next.jsではApp RouterのServer Componentsが自動的にCSS読み込みを最適化します。

改善範囲・サイトの現状・技術スタックによって大きく異なります。画像・フォント中心の部分的な最適化か、JavaScriptアーキテクチャの見直しやCDN設定・サーバー改善を含む総合的な改善かで、作業量が変わります。まず無料の診断で優先度の高い改善項目を特定し、その範囲で個別にお見積りします。