ECサイト制作

ECサイトのコアウェブバイタル徹底対策｜LCP・INP・CLS改善でGoogle検索上位を狙う

更新日: 2026-07-14

はじめに
コアウェブバイタルとは？ECサイトへの影響を理解する
1. なぜECサイトでコアウェブバイタルが重要なのか
コアウェブバイタルの目標値と評価基準
LCP（Largest Contentful Paint）の改善方法
INP（Interaction to Next Paint）の改善方法
CLS（Cumulative Layout Shift）の改善方法
コアウェブバイタルの計測ツールと活用方法
ShopifyなどECプラットフォームでの実践ポイント
1. Shopifyでの具体的な対策
2. ECサイト改善の優先順位の付け方
まとめ

本記事では、ECサイトの売上とSEOに直結するコアウェブバイタルについて、LCP・INP・CLSの各指標の目標値から、具体的な改善策、計測ツールの使い方までを網羅的に解説します。Shopifyでの実践ポイントも紹介しており、技術的な知識に自信がない担当者の方でも、明日から取り組めるアクションプランが見つかります。

はじめに

「ECサイトの表示が遅い」「スクロール中にレイアウトがガタつく」「カートボタンを押しても反応が遅い」——こうした体験は、ユーザーの離脱を招くだけでなく、Googleの検索順位にも直接影響します。

Googleが導入したコアウェブバイタル（Core Web Vitals） は、ユーザー体験を数値化した3つの指標で構成されており、ページエクスペリエンスシグナルの一部として検索アルゴリズムに組み込まれています。ECサイトは商品画像・動画・決済フォームなど重いコンテンツを多く抱えるため、他業種のサイトと比べてコアウェブバイタルの改善が特に重要です。

本記事では、ECサイト担当者がコアウェブバイタルを正しく理解し、優先順位を付けて改善できるよう、各指標の意味から具体的な対策・計測ツールの使い方まで体系的に解説します。

コアウェブバイタルとは？ECサイトへの影響を理解する

コアウェブバイタルとは、Googleが定義するウェブページのユーザー体験品質を測る主要指標の総称です。現時点では以下の3指標で構成されています。

指標	正式名称	計測する体験
LCP	Largest Contentful Paint	読み込み速度（メインコンテンツの表示速度）
INP	Interaction to Next Paint	応答性（操作に対するレスポンス速度）
CLS	Cumulative Layout Shift	視覚的安定性（レイアウトのずれ）

Googleは2024年3月にFID（First Input Delay）を廃止し、より包括的なINP（Interaction to Next Paint） を正式指標として採用しました。ECサイト運営者はこの変更を踏まえた対策が求められます。

出典: Web Vitals | web.dev

なぜECサイトでコアウェブバイタルが重要なのか

ECサイトにとってコアウェブバイタルが特に重要な理由は3点あります。

SEOへの直接影響: Googleの検索ランキングアルゴリズムに組み込まれており、スコアが低いと競合サイトに検索順位で後れを取りやすくなります
直帰率・売上機会への影響: 表示が遅いページはユーザーが離脱しやすく、特にモバイルでの購買機会損失につながります
モバイルユーザーへの影響: ECサイトへのアクセスの多くはスマートフォン経由であり、端末性能や通信環境の差がユーザー体験に大きく影響します

コアウェブバイタルの目標値と評価基準

各指標には「良好（Good）」「改善が必要（Needs Improvement）」「不良（Poor）」の3段階評価があります。Googleはすべての指標において、実際のユーザーデータの75パーセンタイルでの達成を目標として推奨しています。

指標	良好（Good）	改善が必要	不良（Poor）
LCP	2.5秒以内	2.5〜4.0秒	4.0秒超
INP	200ms以内	200〜500ms	500ms超
CLS	0.1未満	0.1〜0.25	0.25以上

75パーセンタイルでの計測とは、条件の悪い環境（低速回線・低スペック端末）でアクセスするユーザーも含めた総合的な改善を意味します。ECサイトのターゲットユーザーが多様であるほど、この点への配慮が重要です。

出典: Understanding Core Web Vitals and Google search results | Google for Developers

LCP（Largest Contentful Paint）の改善方法

LCPは、ページ読み込み開始からメインコンテンツ（多くの場合、ヒーロー画像や商品メイン画像）が表示されるまでの時間です。ECサイトではトップページや商品詳細ページの大きな商品画像がLCPの対象になることが多く、画像最適化が最優先課題となります。

1. 画像の最適化

WebPフォーマットの採用: JPEGやPNGと比較して、同等画質でファイルサイズを大幅に削減できるWebP形式への変換を推奨します
適切な画像サイズの指定: 表示サイズより大きな画像を配信しない（レスポンシブ画像の設定で端末に合わせた解像度を配信）
fetchpriority="high"の指定: LCP要素となるメインビジュアルには、ブラウザが最優先で読み込むよう属性を付与する
画像CDNの活用: CloudflareやImageKitなどの画像CDNを使うことで、自動的に最適なフォーマットとサイズで配信できます

2. サーバーレスポンス（TTFB）の改善

CDNの導入: CloudflareやAmazon CloudFrontなどのCDNを使い、ユーザーの地理的に近いサーバーからコンテンツを配信する
サーバーキャッシュの最適化: 動的コンテンツが多いECサイトでは、適切なHTTPキャッシュヘッダーの設定が重要です
ホスティング環境の見直し: 共有サーバーからVPSや専用サーバーへの移行で、LCPが大幅に改善するケースがあります

3. レンダリングブロックリソースの解消

CSSの最適化: ページ表示に必要なスタイルのみを優先して読み込み、残りは非同期化する
JavaScriptの遅延読み込み: deferやasync属性の活用、または重要でないJSの遅延読み込み（Lazy Load）
サードパーティスクリプトの見直し: アナリティクス・チャット・広告タグなどのサードパーティスクリプトは、LCPに大きな影響を与えることがあります

INP（Interaction to Next Paint）の改善方法

INPは、ユーザーがページを操作（クリック・タップ・キーボード入力）してから次の画面描画が完了するまでの遅延を計測します。旧指標のFIDが最初の操作のみを計測していたのに対し、INPはページ滞在中のすべての操作の遅延を評価します。

ECサイトではカートへの追加ボタン・絞り込みフィルター・数量変更など操作が多く、INPが特に問題になりやすいです。

1. JavaScriptの最適化

不要なJSの削除・コード分割: ページで実際に使用しないJavaScriptを読み込まないようにします
Long Tasksの分割: 50ms以上かかる処理（Long Task）はChrome DevToolsのPerformanceタブで特定し、分割または非同期化する
メインスレッドの負荷軽減: 重い計算処理はWeb Workersを使ってメインスレッドから切り離すことを検討する

2. カートや検索機能の最適化

デバウンス・スロットリングの実装: 商品検索の入力イベントなど、高頻度で発火するイベントには処理回数を制限する
楽観的UI更新（Optimistic UI）: カートへの追加後にAPIレスポンスを待たずにUIを先に更新し、体感速度を向上させる
仮想スクロールの活用: 大量の商品リストを表示するページでは、表示範囲のDOMのみレンダリングする仮想スクロールを検討する

3. 不要なイベントリスナーの整理

イベント委任パターンの採用: 多数の要素に個別にイベントリスナーを付けず、親要素で一括して処理する
使用しないサードパーティウィジェットの削除: チャットやレビューウィジェットはJSが重く、INPを悪化させることがあります

CLS（Cumulative Layout Shift）の改善方法

CLSは、ページ読み込み中や操作中に発生するレイアウトのずれを計測します。「気づかずにリンクをクリックしたら別のリンクにジャンプした」「読んでいたテキストが急にずれた」といった体験が数値化されます。

ECサイトでは遅延読み込みされる商品画像・バナー広告・フォントの置き換えによるCLSが多発します。

1. 画像・動画のサイズ明示

HTMLにwidthとheight属性を指定するか、CSSでaspect-ratioを設定して、画像読み込み前にブラウザがスペースを確保できるようにします。

<!-- NG: サイズ未指定 -->
<img src="product.jpg" alt="商品画像">

<!-- OK: サイズ明示 -->
<img src="product.jpg" alt="商品画像" width="800" height="600">

2. ウェブフォントの最適化

font-display: optionalの使用: フォントの読み込みが完了していない場合、システムフォントで表示し続けてレイアウトずれを防ぐ
フォントのプリロード: <link rel="preload">でページ表示前にフォントを先読みし、フォント置き換えによるずれを防ぐ
可変フォント（Variable Font）の検討: 複数のウェイトをひとつのファイルにまとめて読み込み回数を削減する

3. 動的コンテンツの適切な配置

広告スペースのサイズ固定: バナー広告は読み込み前からCSSでスペースを確保し、表示後のずれを防ぐ
スケルトンスクリーンの活用: コンテンツ読み込み中はプレースホルダー（骨格）を表示し、レイアウトずれを最小化する
お知らせバナーの実装見直し: ページ上部に突然挿入されるポップアップやお知らせバナーはCLSの主要原因のひとつです。固定スペースを事前に確保するか、画面端に表示するスタイルに変更することを推奨します

コアウェブバイタルの計測ツールと活用方法

改善には現状把握が欠かせません。以下のツールを組み合わせることで、問題箇所を効率的に特定できます。

PageSpeed Insights（PSI）

GoogleのPageSpeed InsightsはURLを入力するだけでコアウェブバイタルのスコアと改善提案を無料で確認できるツールです。

フィールドデータ（実測値）: 実際のユーザーの閲覧データ（Chrome User Experience Report = CrUX）を元にしたリアルな計測値。Googleの検索順位における評価には、このフィールドデータが用いられます。
ラボデータ（シミュレーション値）: Lighthouseによる模擬計測。即時確認や施策後の検証に適している
改善提案: スコア低下の原因と具体的な対策がリスト表示される

Google Search Console

Search Consoleの「ウェブに関する主な指標」レポートでは、サイト全体のURLをグループ別（トップ・商品一覧・商品詳細など）に評価できます。どのページタイプが特にスコアが低いかを俯瞰的に把握でき、改善の優先順位付けに最適です。

Chrome DevTools（Lighthouseタブ・Performanceタブ）

ブラウザのDevToolsから実行できるLighthouseは、ローカル環境や認証が必要なページの計測に便利です。PerformanceタブではLong Tasksの発生箇所やJSの実行時間を詳細に確認でき、INP改善の手がかりになります。

web-vitals ライブラリ

Googleが提供するJavaScriptライブラリweb-vitalsをサイトに組み込むことで、実際のユーザーのコアウェブバイタル計測値をリアルタイムで収集できます。Google Analytics 4（GA4）と組み合わせることで、継続的なモニタリング基盤を構築できます。

ShopifyなどECプラットフォームでの実践ポイント

ShopifyなどのSaaS型ECプラットフォームでは、インフラ部分はプラットフォームが管理しているため、カスタマイズできる範囲が限られる面もあります。しかし、以下の対策は多くのプラットフォームで実施可能です。

Shopifyでの具体的な対策

テーマの選定: Shopify公式テーマ（DawnなどのOS 2.0テーマ）はコアウェブバイタルへの配慮がなされており、初期スコアが高い傾向があります
不要なアプリの削除: インストールしているShopifyアプリはそれぞれJavaScriptやCSSを読み込むため、使用していないアプリは積極的にアンインストールする
セクション設定の見直し: テーマエディタで使用していないセクションは非表示にして、読み込みリソースを削減する
画像はWebP形式で入稿: ShopifyはアップロードされたJPEG・PNG画像を自動でWebPに変換して配信する機能があります。ただし、適切な解像度の画像を入稿することが前提です