Shopifyの表示速度を改善する5ステップ｜ウェブパフォーマンスレポートで遅い原因を絞り込む

2026.10.15

「ストアが重い気がする」「スマホだと商品ページの表示が遅い」。こうした相談は多いのですが、体感だけで画像を圧縮したりアプリを外したりすると、効かない作業に時間を使ってしまいます。

本記事の主キーワードはShopify 表示速度改善です。Shopifyの管理画面にある「ウェブパフォーマンスレポート」を使い、どの指標が・どのページで・いつから悪いのかを絞り込んでから手を付ける順番を、5つのステップで整理します。画面名や基準値は2026年10月時点のShopifyヘルプセンターとGoogleのweb.devの記載にもとづきます。作業前に自社の管理画面で表示を確認してください。

この記事でできること

Shopifyの表示速度を、Core Web Vitals（LCP・INP・CLS）の3つの指標で読めるようになる
遅いのが「全体」なのか「特定のページテンプレート」なのか「特定の日から」なのかを切り分けられる
アプリ・テーマ・タグ・画像のうち、どこから見直すかを決められる
外部の診断ツールが出す提案のうち、Shopifyでは対応不要なものを見分けられる

前提：「速さ」は3つの指標で測る

Shopifyのウェブパフォーマンスレポートは、GoogleのCore Web Vitalsと同じ3つの指標でストアを評価します。評価は、実際に訪れたユーザーの体験のうち75パーセンタイル（遅い側から4分の1を除いたあたり）の値で決まります。

指標	何を測るか	良好	低い
LCP（最大コンテンツ表示）	画面でいちばん大きな要素が表示されるまでの時間。読み込みの速さ	2,500ミリ秒以下	4,000ミリ秒を超える
INP（Interaction to Next Paint）	ボタンやリンクを押してから画面が反応するまでの時間	200ミリ秒以下	500ミリ秒を超える
CLS（Cumulative Layout Shift）	読み込み中にレイアウトが予期せずずれる量	0.1以下	0.25以上

その間は「改善が必要」です。「重い」と一口に言っても、最初の表示が遅いのか（LCP）、押したあとの反応が鈍いのか（INP）、画面がガタつくのか（CLS）で、原因も直し方も変わります。

ステップ1：管理画面で3指標のランクを確認する

Shopify管理画面の「オンラインストア」を開くと、テーマページにパフォーマンス指標のサマリーが表示されます。過去30日間の実際のユーザーデータをもとに、LCP・INP・CLSそれぞれに「良好」「改善が必要」「低い」のランクが付きます。デバイスタイプ別のセッション数もここで確認できます。

見るときの注意点は3つです。

データは最大36時間遅れ、過去90日分しか残らない。施策の前後を比べたいなら、変更前の数値を控えておく
新しいストアやプライベートモードのストアでは、指標が出ないことがある
アクセスが少ないストアは日ごとのブレが大きい。ヘルプでも、変動が大きいときは週単位・月単位で見るよう案内されている

ステップ2：「いつから」「どのページ型で」悪いのかを絞る

ランクが「改善が必要」か「低い」の指標があれば、「分析」の「レポート」から詳しいレポートを開きます。各指標に、時系列・ページタイプ別・ページURL別の3種類があります。

時系列：グラフに、アプリのインストールやテーマの更新などストアへの変更が番号付きの縦線で表示される。数値が悪くなった日と、その日に入れた変更を突き合わせられる
ページタイプ別：商品ページ、コレクションページなど、特定のページテンプレートだけが遅いのかがわかる
ページURL別：特定のページだけが足を引っ張っていないかを見る

たとえば「コレクションページのLCPだけが悪い」なら、そのテンプレートに置いたセクションや、一度に並べる商品の数から疑います。「ある日からINPが悪化した」なら、その日に追加したアプリやタグが最初の候補です。

ステップ3：アプリとタグを棚卸しする

Shopifyのヘルプでは、ウェブパフォーマンスに影響する最大の要因として、テーマ、インストールしたアプリ、タグマネージャーなど手動で追加した外部サービスのコードの3つが挙げられています。特にINPが悪い場合は、テーマ・アプリ・タグのどこかでJavaScriptが多すぎる可能性がある、とされています。

棚卸しは次の順で進めると判断しやすくなります。

インストール済みのアプリを一覧にし、売上や業務に今も役立っているかを1つずつ確認する
役目を終えたアプリはアンインストールする。アンインストールしてもテーマからコードが自動で消えるとは限らないため、完全な削除方法はアプリ開発者に確認する
タグマネージャーを開き、使っていない計測タグや、目的のはっきりしないタグを外す
1つ外すごとに、ステップ1・2のレポートで変化を見る（反映には時間がかかる）

レビューアプリ、ポップアップ、SNSフィード、チャットなど、「入れたままで誰も見ていない」ものが残っていないかが確認のポイントです。

ステップ4：テーマのセクションと画像を見直す

アプリとタグを整理しても改善しない場合は、テーマ側を見ます。Shopifyのヘルプで挙げられている見直し点は次のとおりです。

ページテンプレートにセクションを詰め込みすぎない。セクションが増えるほど遅くなる可能性がある
ページ切り替えなどのアニメーションは、有効にする前後で数値を比べる
商品数の多いコレクションはページネーションを有効にして、一度に読み込む商品を減らす
画像は表示サイズに合わせてからアップロードする。写真はJPG、透過が必要なグラフィックはPNGが目安

CLSが悪い場合は、読み込み後に差し込まれるバナーやポップアップ、サイズ指定のない画像でレイアウトが押し下げられていないかを確認します。テーマ自体が大きく足を引っ張っているときは、Shopifyが提供する最適化済みのテーマ（HorizonファミリーやOnline Store 2.0テーマ）への切り替えも選択肢になります。テーマのコードに手を入れる前の考え方はShopifyテーマカスタマイズ、コードを触る前に決める4つのチェックポイントで整理しています。

ステップ5：外部ツールの提案は「Shopifyで対応済みか」で仕分ける

PageSpeed Insightsなどの外部ツールは、ページごとの詳しい数値を見るのに役立ちます。一方で、Shopifyのヘルプには、外部ツールの提案の多くはShopifyがすでに実装済みか、Shopifyストアには当てはまらないと書かれています。

よくある提案	Shopifyでの扱い
CDNを導入する	Cloudflareが運営するCDNが標準で含まれている
Gzip圧縮・キャッシュ設定・サーバー設定を見直す	Shopifyのインフラ側で対応済み。ストア側で設定するものではない
CSS・JavaScriptを圧縮（最小化）する	ストアフロントから要求された際に自動で最小化される
画像を最適化する	画像CDNで自動的に圧縮・変換されるが、アップロードする画像のサイズはストア側で見直す価値がある

また、Lighthouseのようにユーザーがいない環境で測るツールではINPを測れず、代わりにTBT（Total Blocking Time）が使われます。ツールのスコアと実際のユーザーの体験はずれることがあるため、最終的な判断はステップ1・2の実データで行うのが安全です。

速度改善は「何を外すか」の判断が中心になる

ここまでの手順で見えてくるのは、Shopifyの表示速度の改善が、サーバーの設定ではなく「何を載せて、何を外すか」の判断でほぼ決まるということです。アプリやセクションを外すと、その機能が担っていた売上や業務にも影響します。外す前に、そのアプリ経由の売上や使われ方を確かめておくと、速さと売上のどちらも落とさずに済みます。

商品ごとの売上や広告費まで含めて「その機能が本当に効いているか」を見たい場合は、株式会社MoreChoiceが提供するEC Choice AIで、Shopify・Amazon・楽天市場などの売上と広告費をまとめて確認できます。

まとめ

Shopifyの表示速度は、LCP（読み込み）・INP（反応）・CLS（ガタつき）の3指標で見る。良好の目安はそれぞれ2,500ミリ秒以下・200ミリ秒以下・0.1以下
まず「オンラインストア」のパフォーマンス指標サマリーでランクを確認し、データの遅れ（最大36時間）と保存期間（90日）に注意する
時系列・ページタイプ別・ページURL別のレポートで、「いつから」「どのページ型で」悪いのかを絞る
アプリ・タグの棚卸し、テーマのセクションと画像の見直しの順で手を付け、1つ変えるごとに数値を確認する
外部ツールの提案のうち、CDN・圧縮・キャッシュなどはShopify側で対応済み

アプリの整理やテーマの改修、速度低下の原因調査からまとめて相談したい場合は、株式会社MoreChoiceへのお問い合わせからご相談ください。カートに入ったあとの離脱が気になる場合はShopifyのカゴ落ち対策は4ステップ、サイト全体を作り直すべきか迷っている場合はECサイトリニューアル、「改善」で足りるか「作り直し」かの判断チェックリストもあわせてご覧ください。