Core Web Vitalsを改善してもスコアが上がらないときのチェックポイント10選

1. 評価対象がモバイルになっているか？

PageSpeed Insightsのデフォルトはモバイル評価です。
デスクトップで問題がなくても、モバイルではスコアが低いことがあります。

確認方法：
PageSpeed Insights上部の「モバイル」タブを選択

対策：
モバイル表示でのLCPやINPの位置や読み込み順を見直し、レスポンシブ最適化を。

---

2. 実測値（Field Data）とラボデータ（Lab Data）の違いを理解しているか？

スコアが反映されるのは**実測値（Chrome UX Report）**が中心です。
ラボデータ（開発者のPC上のシミュレーション結果）を改善しても、スコアはすぐに反映されません。

対策：

• web-vitalsライブラリを導入して自社計測に切り替える
• GA4やBigQuery連携でINPなどの実測を追跡

---

3. キャッシュやCDNが古いままになっていないか？

改善を行っても、CDNやブラウザキャッシュにより旧ファイルが読み込まれている可能性があります。

確認ポイント：

• Cloudflare、AWS CloudFront、Vercelなどのキャッシュ削除を実施
• ?v=xxxのようなクエリ付きでキャッシュバスティングを行う

---

4. INPの対象イベントが正しく改善できていない

INPはクリックやタップの**「反応」**に関する指標です。setTimeoutや重いイベントリスナーが残っていると数値が悪化します。

改善例：

// 悪い例：非同期処理を直接イベント内に書いている
button.addEventListener("click", () => {
  fetch('/api/heavy-process');
});

// 良い例：requestIdleCallbackを使ってユーザー応答を先に処理
button.addEventListener("click", () => {
  handleUI(); // 即応答
  requestIdleCallback(() => fetch('/api/heavy-process'));
});

---

5. Webフォントの読み込みで遅延が発生している

WebフォントはLCPの悪化要因。読み込み中にテキストが表示されない“FOIT”が発生しているかも。

対策：

• font-display: swap; を使用
• preloadを活用

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

---

6. 画像のlazyloadが逆にLCPを悪化させている

LCP要素（メイン画像）にloading="lazy"を付けると、表示遅延の原因になることがあります。

対策：
ファーストビューの画像にはloading="eager"もしくは何も付けない設定に。

---

7. JavaScriptの遅延読み込みが正しく機能していない

deferやasyncを使ったつもりでも、依存関係のあるスクリプトがブロッキングしている場合があります。

対策例：

<!-- 依存関係がないなら async -->
<script src="/js/analytics.js" async></script>

<!-- 順番が大事な場合は defer -->
<script src="/js/vendor.js" defer></script>
<script src="/js/main.js" defer></script>

---

8. メインスレッドが重すぎてINPが悪化している

重いJavaScript処理がページ描画後も続いていると、ユーザー操作への応答が遅れるためINPが下がります。

対策：

• Web Workerで分離
• 処理をrequestIdleCallbackやsetTimeoutで分割

---

9. 外部リソース（広告・SNS連携）が足を引っ張っている

YouTube埋め込みやSNSのウィジェット、Google Adsなどはレンダリングを阻害することがあります。

対策：

• 必要なページのみに読み込む
• iframeを<template>＋JSで後から挿入

<template id="youtube-embed">
  <iframe src="https://www.youtube.com/embed/XXXX"></iframe>
</template>

<script>
  window.addEventListener('DOMContentLoaded', () => {
    const tpl = document.getElementById("youtube-embed");
    document.body.appendChild(tpl.content.cloneNode(true));
  });
</script>

---

10. スクロールやレイアウトの変化がCLSの原因になっている

アコーディオンメニューや画像読み込み後の高さ変化が、CLSを悪化させる原因です。

対策：

• CSSで高さを事前に確保（min-height）
• アニメーションや展開要素にはoverflowやtransitionで滑らかに調整

---

まとめ：スコアだけに惑わされず、ユーザー体験全体を見よう

Core Web Vitalsのスコアは改善の目安であり、ゴールではありません。スコアを上げるために無理な最適化をするよりも、「ユーザーにとって本当に速く、分かりやすく、使いやすい」サイトを目指しましょう。

そのうえで、スコアが上がらないときはこの記事の10チェックポイントを丁寧に見直してみてください。意外なボトルネックが見つかるかもしれません。