Webサイトの表示速度改善：Core Web Vitalsを向上させる方法

どれほど見栄えの良いサイトでも、表示が遅ければ多くの訪問者はページを閉じてしまいます。Googleの調査によると、読み込みに3秒以上かかるとユーザーの53%が離脱します。さらにGoogleは表示速度を直接の順位要因として扱っています。このガイドでは、Core Web Vitalsをわかりやすく説明し、実際に効果のある最適化手法を順に紹介します。

Core Web Vitalsとは？

Core Web Vitalsは、Googleが2020年に発表し、2021年から検索順位に組み込んだ3つの主要なユーザー体験指標です。実験室のテストではなく、実際のユーザーデータに基づいています。

1. LCP — Largest Contentful Paint（最大コンテンツの描画）

ページ内で最も大きな表示要素（多くはメイン画像や大きな見出し）が表示されるまでの時間です。

• 良好： 2.5秒以内
• 改善が必要： 2.5〜4秒
• 不良： 4秒超

主な要因：大きな画像ファイル、遅いサーバー応答、レンダリングを妨げるJavaScript/CSS。

2. INP — Interaction to Next Paint（操作への応答）

ユーザーがクリック、タップ、キー入力をしたときに、ページがどれだけ早く反応するかを測ります。2024年に従来のFIDに代わりました。

• 良好： 200ミリ秒以内
• 改善が必要： 200〜500ミリ秒
• 不良： 500ミリ秒超

長いJavaScript処理、重いサードパーティスクリプト、非効率なイベント処理がINPを悪化させます。

3. CLS — Cumulative Layout Shift（レイアウトのずれ）

読み込み中に要素がどれだけ「ずれる」かを測ります。読んでいる途中で文章が動く、誤ってクリックしてしまうといった現象です。

• 良好： 0.1以下
• 改善が必要： 0.1〜0.25
• 不良： 0.25超

サイズ未指定の画像、動的に挿入されるコンテンツ、遅れて読み込まれる広告が主な原因です。

どこで計測するか

Google PageSpeed Insights — URLを入力するだけで、ラボデータと実ユーザーデータ（CrUX）を確認できます。無料で簡単です。

Google Search Console → Core Web Vitalsレポート — 実際のユーザー体験をURLグループごとに分類し、問題のあるページを特定できます。

WebPageTest — 上級者向け。ウォーターフォール、動画比較、多段階テストが可能です。

Chrome DevTools → Lighthouse — ローカル開発中の即時計測に最適です。

LCPの改善：具体的な手順

画像を最新フォーマットに

JPEGやPNGをWebPやAVIFに変換すると、画質をほぼ落とさずにファイルサイズを30〜50%削減できます。

``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``

Next.jsなら <Image> コンポーネントが自動で変換してくれます。

メイン画像をプリロード

``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``

サーバー応答時間（TTFB）の短縮

• 静的生成（SSG）やISRで、リクエストごとに生成せず事前生成したHTMLを返す
• CDNで、ユーザーに近いサーバーから配信する
• リソース不足ならVPSやクラウドに移行する

クリティカルCSSのインライン化

ファーストビューのスタイルをHTMLに直接埋め込むと、描画までの時間が短くなります。CriticalやCrittersなどのツールで自動化できます。

INPの改善：JavaScriptの負荷を減らす

長いタスクを分割する

50ミリ秒を超えるJavaScriptの処理は「長いタスク」となり、操作をブロックします。setTimeout(..., 0) や scheduler.yield() で分割しましょう。

``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // 50件ごとにメインスレッドに一息つかせる if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``

不要なサードパーティスクリプトを削除

チャットウィジェット、広告ネットワーク、分析ツール、SNSボタンはINPに大きな負担をかけます。スクリプトごとに「このページで本当に必要か？」を確認し、Googleタグマネージャーも定期的に見直しましょう。

React/Next.jsでのコード分割

``javascript const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <div>読み込み中…</div>, }); ``

CLSをゼロに近づける

すべての画像にサイズを指定

``html <img src="product.jpg" alt="商品画像" width="800" height="600" /> ``

``css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``

フォントによるFOUT/FOITを防ぐ

font-display: optional または swap を使い、フォントをプリロードしましょう。

``html <link rel="preload" href="/fonts/Brand.woff2" as="font" type="font/woff2" crossorigin /> ``

動的コンテンツにはプレースホルダーを

``css .content-area { min-height: 120px; / 読み込みまで領域を確保 / } ``

Next.jsによる自動最適化

Next.jsで作られたサイトなら、次の機能が最初から使えます。

| 機能 | 効果 | |---|---| | <Image> コンポーネント | WebP/AVIFへの自動変換、遅延読み込み、サイズ指定 | | <Script strategy="lazyOnload"> | 重要でないスクリプトを後回しに | | 静的生成（SSG） | TTFBを最小化 | | フォント最適化 | セルフホスティング、swap戦略 | | 自動コード分割 | 各ページが必要なJSだけを読み込む |

これらがCore Web Vitalsに直接貢献することは、コーポレートサイトの費用の記事でも触れています。

優先順位：どこから始めるか

1. 画像の最適化 — 多くのサイトでは、これだけでLCPが30〜40%改善します。

2. 未使用のJavaScriptを削除 — Chrome DevToolsのCoverageツールで確認できます。

3. レンダリングを妨げるリソースを減らす — async/defer やクリティカルCSSのインライン化で対応します。

4. サーバー性能を見直す — 共用サーバーでTTFBが800ミリ秒を超えるなら、サーバーの変更を検討しましょう。

5. サードパーティスクリプトを監査する — PageSpeed Insightsの「サードパーティのコード」で影響を確認できます。

まとめ：速度はぜいたくではなく必須

Core Web Vitalsの改善は、もはや任意のパフォーマンス施策ではなく、検索順位、ユーザー満足度、コンバージョンのための必須の土台です。一度きりの作業ではなく、継続的な計測と改善のサイクルとして取り組むことで、持続的な成果が得られます。

サイトのCore Web Vitalsの状況を知りたい方、プロによる速度改善をご希望の方はお問い合わせください。無料の簡易診断を行っています。