「サイトが遅い」という問題は、ECサイトにおいて放置するには大きすぎるリスクです。Googleのデータによると、ページの読み込み時間が1秒から3秒に増加するだけで直帰率が32%増加し、5秒になると90%増加します。表示が遅いECサイトは、広告費をかけて集客した見込み客を、購入ページにたどり着く前に失ってしまいます。
また、2021年以降、Googleは「Core Web Vitals（コアウェブバイタル）」をSEOのランキング要因として正式に採用しています。表示速度の改善はCVRの向上だけでなく、検索順位の改善にも直結する施策です。
この記事では、自社ECサイトの表示速度とCore Web Vitalsを改善するために、指標の意味・計測方法・具体的な改善施策まで体系的に解説します。エンジニアでなくても理解できる視点で説明しますので、EC担当者の方にもご参考いただけます。
「ECサイトの表示速度を改善したい」「Core Web Vitalsのスコアを上げたい」といったご相談があれば、ぜひお気軽にお問い合わせください。▶ サービス紹介資料をダウンロードする（無料）
ECサイトの表示速度が売上に与える影響
表示速度がビジネスに与える影響は、データとして多数報告されています。AmazonとGoogleが行った調査では、1秒の遅延が約1〜2%の売上低下につながることが示されています。また、Deloitte（デロイト）の調査では、モバイルサイトの速度を0.1秒改善することで、リテール系のコンバージョン率が8.4%改善したという結果もあります。
これはECサイト運営者にとって、表示速度が「技術的な問題」ではなく「ビジネス課題」であることを示しています。表示速度の改善は、広告費を増やさずにCVRを向上させるコストパフォーマンスの高い施策です。
特にスマートフォンからのアクセスが主流になった現在、モバイルでの表示速度は特に重要です。4G・5Gの普及にもかかわらず、モバイルのネットワーク環境は場所によって不安定なことがあり、ページが重いとスマートフォンユーザーの離脱率は急激に上昇します。
Core Web Vitalsとは何か？3つの指標を解説
Core Web Vitals（コアウェブバイタル）は、Googleが定義するWebページの「ユーザー体験の品質」を測定する指標群です。2021年6月からSEOのランキング要因に採用され、ECサイトのSEO担当者にとって無視できない指標になっています。
2024年3月以降の現在のCore Web Vitalsは、LCP・INP・CLSの3指標で構成されています（FIDはINPに置き換えられました）。
LCP（Largest Contentful Paint）：最大コンテンツの描画
LCPは、ページが読み込まれてから、画面内で最も大きいコンテンツ（大きな画像・テキストブロックなど）が表示されるまでの時間を測定します。ECサイトでは、商品のメイン画像やヒーロー画像がLCPの対象になることが多いです。
Googleの基準では、LCPが2.5秒以下を「良好（Good）」、2.5〜4.0秒を「改善が必要（Needs Improvement）」、4.0秒超を「不良（Poor）」と評価します。LCPはCore Web Vitalsの中でも最も改善インパクトが大きく、ECサイトでの優先度が高い指標です。
INP（Interaction to Next Paint）：次の描画までのインタラクション
INPは2024年3月にFID（First Input Delay）に代わって採用された新しい指標です。ユーザーがページ上で操作（クリック・タップ・キーボード入力など）をしてから、ブラウザが視覚的に応答するまでの時間を測定します。FIDが最初のインタラクションのみを計測していたのに対し、INPはページ全体のインタラクションの遅延を評価します。
Googleの基準では、INPが200ミリ秒以下を「良好」、200〜500ミリ秒を「改善が必要」、500ミリ秒超を「不良」と評価します。ECサイトでは、カートへの追加ボタンのクリック応答・フォームの入力応答・フィルタ操作の反応速度がINPに影響します。
CLS（Cumulative Layout Shift）：累積レイアウトシフト
CLSは、ページの読み込み中にレイアウトがどれだけズレるかを測定します。画像や広告が遅れて読み込まれることで、テキストや他の要素が突然動く「レイアウトシフト」が起きます。購入ボタンを押そうとしたら別の要素が突然現れてボタンが動いた、という体験はCLSの問題によるものです。
Googleの基準では、CLSが0.1以下を「良好」、0.1〜0.25を「改善が必要」、0.25超を「不良」と評価します。ECサイトでは、商品画像の遅延読み込み・バナー広告の挿入・フォントの置き換えによるテキストズレなどがCLSの原因になりやすいです。
Core Web Vitalsの計測方法
まず自社ECサイトの現状を計測し、どの指標に問題があるかを把握することから始めます。
PageSpeed Insights（ページスピードインサイト）
Googleが提供する無料のページ速度計測ツールです。URLを入力するだけで、LCP・INP・CLSのスコアと「良好/改善が必要/不良」の判定が確認できます。モバイルとPCそれぞれのスコアが表示され、改善の優先度が高い問題点も具体的に提示されます。
PageSpeed Insightsは「ラボデータ」（シミュレーション環境でのデータ）と「フィールドデータ」（実際のユーザーが体験しているデータ）の両方を表示します。SEOランキングに影響するのは実際のユーザーの体験データ（フィールドデータ）であるため、両方を確認することが重要です。
Google Search Console（サーチコンソール）
Google Search Consoleの「ウェブに関する主な指標」レポートでは、サイト全体のページをCore Web Vitalsのスコア別（良好/改善が必要/不良）に分類して確認できます。どのページ・どのページグループに問題が集中しているかを把握するために有効です。
商品ページ・カートページ・カテゴリページなど、ページタイプ別の問題状況を把握した上で、優先的に改善すべきページを特定することが効率的です。
Lighthouse（ライトハウス）
Google Chromeのデベロッパーツールに搭載されている、Webページのパフォーマンス・アクセシビリティ・SEO・ベストプラクティスを評価するツールです。PageSpeed Insightsとほぼ同等のデータが確認でき、エンジニアがローカル環境での開発中にもチェックに活用します。
「Opportunities（改善の機会）」セクションに具体的な改善提案が表示されるため、何から着手すべきかの方針を立てやすくなっています。
LCP改善のための具体的な施策
LCPはCore Web Vitalsの中でもECサイトで最も問題になりやすく、改善によるインパクトも大きい指標です。LCPを改善する主な施策を解説します。
画像の最適化
LCPの主な要因は画像の読み込み時間です。特にECサイトの商品画像は高解像度になりやすく、ファイルサイズが大きいとLCPに直接影響します。
画像最適化の基本として、次世代フォーマット（WebP・AVIF）への変換があります。JPEGやPNGと比較して、WebPは同程度の画質で25〜35%程度ファイルサイズを削減できるとされています。多くの主要ブラウザがWebPに対応しており、ShopifyなどのECプラットフォームでは自動的にWebP変換する機能が標準で備わっているケースもあります。
適切なサイズへのリサイズも重要です。スマートフォンで表示するために必要な幅（375px〜500px程度）に対して、4000px×4000pxの画像を配信しているケースは珍しくありません。表示サイズに合わせた適切なサイズに変換することで、ファイルサイズを大幅に削減できます。
画像圧縮ツール（TinyPNG・Squooshなど）を使って、画質を維持しながらファイルサイズを削減することも有効です。
LCPの対象画像へのpreload（プリロード）設定
ファーストビューに表示される最大のコンテンツ（ヒーロー画像・商品メイン画像など）に対して、HTMLのhead内でpreload設定をすることで、ブラウザが優先的に読み込むよう指示できます。
特に、CSSやJavaScriptの処理よりも先に重要な画像を読み込ませることで、LCPの時間を短縮できます。ただし、過剰なpreloadはかえって逆効果になることもあるため、LCPに直接影響する画像に絞って設定することが重要です。
CDN（コンテンツデリバリーネットワーク）の活用
CDNとは、世界各地に分散したサーバーにコンテンツをキャッシュし、ユーザーに最も近いサーバーからコンテンツを配信する仕組みです。日本のユーザーへの配信では、国内にノードを持つCDNを利用することで、サーバーからの距離による遅延（レイテンシ）を短縮できます。
Shopifyは独自のCDNが組み込まれており、商品画像のCDN配信が標準で有効になっています。カスタム開発のECサイトでは、CloudflareやAmazon CloudFrontなどのCDNを導入することを検討します。
サーバーのレスポンス時間（TTFB）の改善
TTFB（Time to First Byte）とは、ブラウザがリクエストを送信してからサーバーが最初のバイトを返すまでの時間です。TTFBが長いと、すべての後続処理が遅れるため、LCPにも影響します。
TTFBの改善策として、サーバーのスペックアップ（共有ホスティングから専用サーバーやVPSへの移行）、キャッシュの活用（サーバーサイドキャッシュ・ブラウザキャッシュ）、データベースクエリの最適化（不要なプラグインの削除・データベースの整理）が挙げられます。
Lazy Loading（遅延読み込み）の設定
ファーストビュー外（スクロールしないと表示されない位置）の画像に対してLazy Loading（遅延読み込み）を設定することで、最初のページ読み込み時に必要な画像だけを優先して読み込み、LCPを改善できます。
loading=”lazy”属性を画像タグに追加するだけで実装できます。ただし、ファーストビューの画像（LCP要素）にはLazy Loadingを設定しないことが重要です。設定してしまうとLCPがかえって遅くなります。
INP改善のための施策
INPは2024年3月に新たに採用された指標で、ページ上のすべてのインタラクションの遅延を評価します。ECサイトでINPが悪化する主な原因と改善策を解説します。
JavaScriptの最適化
INP悪化の最大の原因は、メインスレッドを長時間占有する重いJavaScript処理（Long Tasks）です。カート機能・商品絞り込みフィルタ・レコメンドエンジンなど、ECサイトには多くのJavaScriptが使われており、これらが複雑になるとインタラクションへの応答が遅くなります。
改善策として、不要なサードパーティスクリプト（チャットツール・アナリティクス・広告タグなど）の見直しと削減があります。また、JavaScriptの非同期化（async・defer属性の活用）により、スクリプトの読み込みがページレンダリングをブロックしないよう設定します。コードの分割（Code Splitting）により、最初のページ読み込みに必要なコードのみを配信し、それ以外は必要になったタイミングで読み込む設計も有効です。
サードパーティスクリプトの管理
ECサイトには多数のサードパーティスクリプト（Google Analytics・Facebook Pixel・ライブチャット・ヒートマップツール・レビューツールなど）が設置されていることが多く、これらが重なるとINPやLCPに大きく影響します。
Google Tag Manager（GTM）を使ってタグを一元管理し、不要なタグを削除・整理することが有効です。重要度の低いスクリプトはdefer設定にすることで、メインスレッドへの影響を最小化できます。
CLS改善のための施策
CLSはレイアウトのズレによるユーザー体験の悪化を評価します。ECサイトでCLSが悪化する主な原因と改善策を解説します。
画像・動画のサイズ指定
CLSの最も一般的な原因は、サイズ指定のない画像です。ブラウザは画像のサイズを事前に知らないと、読み込み完了後に周囲のレイアウトを調整するため、ズレが発生します。すべての画像・動画タグにwidthとheight属性を明示的に指定することで、ブラウザが事前にスペースを確保し、CLSを防ぐことができます。
広告・バナーのスペース確保
広告やバナーが後から挿入されることでレイアウトがズレる問題は、広告用のコンテナに最小高さ（min-height）を設定しておくことで防げます。広告が表示される前から固定のスペースを確保しておくことで、CLSが発生しにくくなります。
Webフォントの最適化
Webフォントが遅れて読み込まれた際に、デフォルトフォントからWebフォントに切り替わる際にレイアウトが崩れる問題がCLSの原因になります。font-display: optionalまたはfont-display: swapの設定と、フォントのpreloadを組み合わせることでCLSを最小化できます。
ECサイト別・プラットフォーム別の表示速度改善ポイント
使用しているECプラットフォームによって、表示速度改善のアプローチが異なります。
Shopifyの表示速度改善
ShopifyはSaaS型のプラットフォームであるため、サーバーインフラは運営会社が管理しており、サーバー面での改善余地は限られています。一方で、テーマの設計・アプリの導入数・画像の最適化は事業者側がコントロールできる部分です。
Shopifyの表示速度改善で重要なのは、不要なアプリを削除すること（Shopifyアプリはインストールするだけでスクリプトが追加されるため）、軽量なテーマを選択すること（Dawn・Impulseなどの高速テーマへの移行）、商品画像をWebP形式に変換して最適なサイズにリサイズすること、アプリのJavaScriptを整理してGTMで管理することなどが挙げられます。
WordPress（WooCommerce）の表示速度改善
WordPressベースのECサイト（WooCommerce）は、プラグインや設定によって表示速度が大きく変わります。主な改善策として、キャッシュプラグイン（WP Rocket・W3 Total Cacheなど）の導入、画像最適化プラグイン（Imagify・ShortPixelなど）の活用、不要なプラグインの削除・整理、PHPバージョンの最新化、高速なホスティングへの移行（SiteGround・Kinstaなど）が挙げられます。
表示速度改善の優先順位とロードマップ
表示速度改善には多くの施策がありますが、すべてを一度に実施するのは現実的ではありません。効果とコストのバランスを考えた優先順位付けが重要です。
即効性が高く低コストな施策から着手する
最初に取り組むべき施策として、商品画像のWebP変換・リサイズ・圧縮（画像最適化ツールで担当者が対応可能）、不要なアプリ・プラグインの削除（設定変更のみで対応可能）、サードパーティスクリプトの整理（GTMで管理）が挙げられます。これらは比較的低コストで実施でき、LCP・INPへの改善効果が大きい施策です。
次のステップとして、CDNの導入（エンジニアと連携が必要な場合もある）、画像のLazy Loading設定（HTMLの変更で対応可能なことが多い）、LCP要素のpreload設定を実施します。さらなる改善として、JavaScriptの最適化・テーマの変更・プラットフォームの移行などの大規模改修を検討します。
改善効果のモニタリング
施策実施後は、PageSpeed InsightsとGoogle Search ConsoleでCore Web Vitalsのスコア変化を確認します。また、GA4でそのページの直帰率・CVRが改善しているかも追跡します。スコアの改善とビジネス指標（CVR・直帰率）の改善を両方追うことで、表示速度改善の投資対効果を正しく評価できます。
よくある質問
Q:Core Web VitalsはSEOにどのくらい影響しますか？
A:Googleは2021年以降、Core Web VitalsをSEOランキング要因の一つとして採用しています。ただし、コンテンツの質・被リンク・検索意図との一致性などの要因のほうがランキングへの影響は大きく、Core Web Vitalsはあくまでも要因の一つです。他のSEO要因が同等の場合に、Core Web Vitalsの優れたサイトが有利になるという位置づけです。ただしCVRや直帰率への影響は大きいため、SEOだけでなくビジネス指標の観点からも改善する価値があります。
Q:PageSpeed Insightsのスコアはどのくらいあればよいですか？
A:PageSpeed Insightsのスコアは0〜100で評価され、90以上が「良好」、50〜89が「改善が必要」、0〜49が「不良」とされています。ただし、スコアの数値よりもCore Web Vitals（LCP・INP・CLS）の実測値（フィールドデータ）がGoogleのランキングには重要です。まずLCP・INP・CLSを「良好」の基準に引き上げることを優先し、スコアの数値改善は二次的な目標として捉えることをおすすめします。
Q:Shopifyを使っていますが、表示速度の改善は自分でできますか？
A:Shopifyでは、商品画像の最適化（WebP変換・リサイズ・圧縮）と不要なアプリの削除は、エンジニアなしで担当者が対応できる施策です。テーマの変更（軽量テーマへの移行）はテーマの設定画面から行えますが、カスタマイズが多い場合は開発者の協力が必要な場合があります。JavaScriptの最適化やpreloadの設定はエンジニアの対応が必要です。まず担当者でできる画像最適化から始め、その効果を確認しながら開発者への依頼範囲を検討することをおすすめします。
Q:モバイルとPCどちらのスコアを優先して改善すべきですか？
A:Googleのモバイルファーストインデックスにより、SEOの評価基準はモバイル版サイトを主に判断しています。また、多くのECサイトではモバイルからのアクセスが60〜80%を占めているため、モバイルのスコア改善を優先することをおすすめします。PageSpeed InsightsでモバイルとPCの両方のスコアを確認しながら、モバイルを主軸に改善を進めることが最も効果的です。
まとめ
ECサイトの表示速度とCore Web Vitalsの改善は、CVRと検索順位の両方に影響する、費用対効果の高いEC改善施策です。
TSUMUGUでは、表示速度改善を含むECサイト全体のUX・CVR改善について、EC事業者さまの状況に合わせて一貫してサポートしています。まずはお気軽にご相談ください。→ まずは相談する（無料）
