Core Web Vitals 2026年完全攻略ガイド — LCP・INP・CLSの改善手順

改善1 画像の最適化

効果：最高

ECサイトのLCP改善で最も効果が大きいのは画像最適化です。

実施手順：

• LCP要素をChrome DevToolsの Performance タブで特定
• 画像フォーマットをWebP/AVIFに変換（JPEG比で30-50%削減）
• srcset で適切なサイズの画像をデバイスに応じて配信
• LCP画像に fetchpriority="high" を付与
• LCP画像には loading="lazy" を付けない（遅延読み込みはLCPを悪化させる）

<!-- LCP画像の推奨記述 -->
<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  fetchpriority="high"
  alt="商品名 カラー"
  width="800"
  height="800"
>

改善2 サーバーレスポンスタイム（TTFB）の短縮

効果：高

TTFBが遅いと、どれだけフロントエンドを最適化してもLCPは改善しません。

改善ポイント：

• CDNの導入（Cloudflare, Fastly等）
• サーバーサイドキャッシュの有効化
• データベースクエリの最適化
• 不要なリダイレクトの排除

目標TTFB： 200ms以下（理想は100ms以下）

改善3 レンダリングブロックリソースの排除

効果：中 内の同期的なCSS/JSが、コンテンツの表示を遅延させます。

• クリティカルCSSをインラインに記述し、残りは非同期読み込み
• サードパーティスクリプト（GTM, チャット, 広告タグ）は async or defer
• フォント読み込みに font-display: swap を指定

改善4 メインスレッドのブロック解消

効果：最高

長時間のJavaScript実行がメインスレッドをブロックすると、ユーザーの操作に対する応答が遅れます。

よくある原因：

• サードパーティスクリプト（GTM, A/Bテスト, レコメンドエンジン）の同時読み込み
• 大量のDOM操作（商品一覧の描画）
• 同期的なAPI呼び出し（在庫チェック、価格計算）

改善方法：

• Long Taskを50ms以下に分割（requestIdleCallback or scheduler.yield()）
• 非表示の商品カードは content-visibility: auto で描画を遅延
• サードパーティスクリプトのasync化と優先順位の見直し

改善5 イベントハンドラの最適化

効果：中

「カートに追加」ボタンのクリックハンドラ内で重い処理を実行していないか確認してください。

• DOM更新は最小限に（変更された要素だけ再描画）
• アニメーションは CSS transition に委任（JSで制御しない）
• 在庫確認APIは楽観的更新（UIを先に更新、APIレスポンスで補正）

改善6 画像・動画にwidth/height属性を設定

効果：最高 とにwidthとheight属性を明示的に設定してください。ブラウザは読み込み前にアスペクト比を計算し、適切なスペースを確保します。

<!-- ❌ CLSの原因 -->
<img src="product.jpg" alt="商品">

<!-- ✅ CLS防止 -->
<img src="product.jpg" alt="商品" width="800" height="800">

改善7 動的に挿入されるコンテンツの制御

効果：中

以下の要素が遅れて挿入されると、既存コンテンツを押し下げてCLSが発生します：

• ヘッダーの告知バー（「本日送料無料」等）
• クッキー同意バナー
• レビュー表示ウィジェット
• 広告枠

対策： これらの要素のスペースをCSS（min-height）で事前に確保するか、コンテンツの上部ではなく下部やオーバーレイとして表示してください。