Core Web Vitals で
スコアを上げる5つの実践

01Core Web Vitals の3指標

• LCP（Largest Contentful Paint）：最大のコンテンツが表示されるまでの時間。2.5秒以内が良好
• INP（Interaction to Next Paint）：ユーザー操作への応答時間。200ms以内が良好
• CLS（Cumulative Layout Shift）：ページのレイアウト変動。0.1未満が良好

3指標すべてが "良好" でないと、Google からの評価は下がります。

02スコア改善 5つの実践

1. 画像を最適化

• WebP / AVIF 形式を使う（JPEG/PNG より40〜60%軽い）
• 適切なサイズで配信（PC用とスマホ用を切替）
• 遅延読み込み（lazy loading）を活用

2. フォントを最適化

• font-display: swap で代替フォント表示
• preconnect で接続を先行
• 使う字体を絞る（Google Fonts なら 1〜2ファミリー）

3. JavaScript を軽量化

• 不要なライブラリを削除
• 非同期読み込み（async / defer）
• コード分割（必要なときだけ読み込む）

4. CSS を最適化

• 使っていないスタイルを削除
• Critical CSS の inline 化

5. CDN を活用

• Cloudflare / Vercel Edge で配信を高速化
• 世界中のサーバーから最寄りで配信

03計測ツール

• PageSpeed Insights：Google公式・URL入力だけ
• Lighthouse：Chrome DevTools 内蔵
• Web Vitals 拡張：リアルタイム計測
• Search Console：実ユーザーのスコア確認

04スコアと SEO の関係

Core Web Vitals は SEO 順位の "ランキング要因" の1つ。3指標すべて "良好" のサイトは、同じコンテンツでも上位表示されやすい。

逆に、すべて "不良" だと、コンテンツが優れていても順位が下がります。

05制作会社に確認すべきこと

• Core Web Vitals 対応をしてくれるか
• 納品時の PageSpeed スコアを保証するか
• 画像・フォント・JS最適化のレベル