Shopify：サイト表示速度の改善：画像圧縮と不要なアプリの見直し

はじめに：表示速度は「売上」に直結する

ECサイトの表示速度は、もはや「なんとなく速いほうがいい」というレベルではなく、
コンバージョン率（CVR）・売上・広告効果・SEOに直結する重要指標です。

海外の事例では、 読み込みが1秒遅くなるごとにコンバージョン率が数％ずつ低下するというデータもあり、
特にモバイルでの体感スピードがCVRに大きな影響を与えることが分かっています。

ShopifyにはCDN（コンテンツ配信ネットワーク）などの高速インフラが標準搭載されていますが、
それでも

• 重い画像
• 増えすぎたアプリ

によって、サイトがどんどん遅くなってしまうケースが少なくありません。

本記事では、Shopifyストアの表示速度改善の中でもインパクトが大きい 「画像圧縮」と「不要なアプリの見直し」 にフォーカスし、

• なぜ画像とアプリがボトルネックになりやすいのか
• どのような手順で最適化を進めればよいのか
• 1週間で取り組める実践的な改善プラン

を、Shopify運用者向けに分かりやすく解説します。

1. Shopifyサイトの表示速度と「何を見ればいいか」

1-1. Shopify Speed ScoreとCore Web Vitals

Shopify管理画面の「オンラインストア速度（Speed Score）」は、
Googleが公開している計測ツール「Lighthouse」のスコアをベースに、

• トップページ
• もっとも閲覧されている商品ページ
• もっとも閲覧されているコレクションページ

の3ページを対象に算出されています。
値は0〜100で、数値が高いほど高速・ユーザー体験が良好であると判断できます。

さらに近年は、Googleが提唱する Core Web Vitals（LCP / INP / CLSなど） も重要になっています。
これは

• LCP：ページが「見える」までの速さ
• INP：クリックなどに対する反応の速さ
• CLS：レイアウトがガタガタ動かないか

といった観点で、実際のユーザー体験を測る指標です。
Shopifyの「Webパフォーマンスレポート」やPageSpeed Insightsを使えば、これらの値も確認できます。

1-2. なぜ「画像」と「アプリ」が最優先なのか

Shopify公式ドキュメントでも、ストア速度を遅くする主な要因として、

• テーマ（テンプレート）
• インストールしているアプリ
• 追加した外部コード（タグマネージャー・計測タグなど）

が挙げられています。

その中でも、多くのストアで通信量の大半を占めるのが「画像」です。
さらに、アプリが増えれば増えるほど

• 外部サーバーへのリクエスト
• JavaScript / CSSの読み込み
• トラッキングタグ

が積み上がり、表示速度がじわじわ低下していきます。

つまり、 「画像」と「アプリ」の最適化だけでも、スコアと体感速度は大きく改善できるということです。

2. 表示速度を遅くする典型パターン

2-1. 画像まわりのよくある問題

Shopifyストアでよく見られる画像の問題は、例えば次のようなものです。

• PCフル幅スライド用に4000pxクラスの巨大画像を、そのままアップロードしている
• アイコンやロゴのような軽い画像にも関わらず、無圧縮PNGや透過PNGで保存している
• モバイル表示では小さく見えるのに、PC用と同じ画像を使っている
• TOPに動画やアニメーションGIFを多用している

これらはすべて、 「表示上は大きな違いがないのに、ファイルサイズだけ無駄に重い」 状態を生み出します。

2-2. アプリまわりのよくある問題

一方、アプリ周りでは次のような状態がよくあります。

• 過去にテストで入れたアプリが、そのまま有効化され続けている
• 似たような機能のアプリが重複している（例：レビューアプリが2つ、ポップアップアプリが2つ）
• アプリをアンインストールしても、テーマに埋め込まれたコードが残っている
• チャットウィジェットやポップアップが増えすぎて、読み込みリクエストが大量発生している

特に、 レビュー・ポップアップ・チャット・カウントダウンタイマー などのアプリは、外部スクリプトを多く読み込む傾向があります。
便利な反面、「入れ過ぎ」は確実にサイトの重さにつながります。

3. Shopifyで行う画像圧縮の基本

3-1. まずは「適正サイズ」と「形式」を決める

画像最適化の基本は、解像度とファイル形式の見直しです。

• 表示サイズより大きすぎる画像を使わない（例：表示幅1200pxのところに3000px画像を使わない）
• 写真系：JPEG・WebP、イラスト・ロゴ系：PNG・SVG（ベクター）が基本
• 背景にぼかしやテクスチャを使う場合は解像度を抑える

Shopify側でも、アップロードした画像を圧縮したり、対応ブラウザには自動でWebP配信を行ったりしていますが、
元画像が極端に重いと、どうしても限界があります。
元データを適切な大きさ＆形式で用意することが大前提です。

3-2. どの画像から手を付けるべきか（優先順位の付け方）

すべての画像を一気に最適化しようとすると、工数が膨大になります。
そこで、 「ユーザーが最初に目にする箇所」から優先的に手を付ける のが効率的です。

• トップページのキービジュアル（ヒーロー画像・スライダー）
• 商品一覧ページのサムネイル
• 商品詳細ページのメイン画像・サブ画像

PageSpeed Insights や ShopifyのWebパフォーマンスレポートで、
「Largest Contentful Paint（LCP）」 に該当する画像（もっとも大きな主要画像）を特定し、
そこから順に圧縮していくと、スコア改善のインパクトも大きくなります。

3-3. 実際の圧縮フロー（ツール＆アプリ活用）

画像圧縮の方法には、大きく分けて 「アップロード前に圧縮する」か、「Shopify上で一括最適化する」かの2パターンがあります。

アップロード前に圧縮する場合

• PhotoshopやAffinityなどの画像編集ソフトで、「書き出し用」に適切な解像度・圧縮率で保存
• もしくは TinyPNG / Squoosh などのオンラインツールでドラッグ＆ドロップ圧縮
• Web用に200〜300KB程度（ヒーロー画像でも500KB以内）を目安にする

Shopifyアプリで一括最適化する場合

• 「Image Optimizer」「SEO Image Optimizer」などの画像最適化系アプリを導入
• 一括圧縮＋リサイズ＋ALT自動付与などを設定し、夜間などアクセスの少ない時間帯に実行
• オリジナル画像のバックアップを取れるアプリを選ぶと安心

便利な一方で、画像最適化アプリ自体もスクリプトやコードを追加する場合があります。
「画像最適化アプリを入れすぎて逆に重くなる」本末転倒なケースもあるため、

• 導入するアプリは1つに絞る
• 不要になったらきちんとアンインストールする

といった運用ルールを決めておきましょう。

3-4. レイジーロード（遅延読み込み）とレスポンシブ画像

画像の「読み込みタイミング」も、体感速度に大きく関わります。

• レイジーロード（lazy-load）：画面に表示される直前まで画像を読み込まない
• レスポンシブ画像：画面サイズに応じて最適な解像度の画像だけを読み込む

最近のShopifyテーマは、これらの仕組みを標準で備えているものが多いです。
テーマ設定やセクション設定で

• 「遅延読み込みを有効にする」
• 「高解像度画像を強制しない」

といったオプションがあれば、積極的に活用しましょう。

4. 不要なアプリの見直しと削除フロー

4-1. Shopify公式も「アプリは速度に影響」と明言している

Shopify公式ヘルプでも、
ストアのWebパフォーマンスに大きく影響する要因として 「テーマ」「アプリ」「追加コード」 が挙げられています。

多くのアプリは、

• 外部JavaScriptファイルの読み込み
• 外部サーバーへのAPI通信
• トラッキングタグの追加

などを行うため、導入数が増えるほどページの読み込みが遅くなります。
特に、フロント側でウィジェットを表示するアプリ（レビュー・チャット・ポップアップなど）は影響が大きくなりがちです。

4-2. アプリ棚卸し：3つのカテゴリに仕分けする

まずは、管理画面の「アプリ」一覧を開き、全アプリを 次の3カテゴリに仕分けします。

1. 毎日・毎週、確実に使っているアプリ（必須）
2. たまに使うが、なくても代替手段がありそうなアプリ（要検討）
3. ほとんど使っていない／入れたまま放置しているアプリ（削除候補）

とくに「削除候補」が多いストアほど、サイト速度改善の余地が大きいと考えられます。

4-3. 「テーマに残ったコード」に要注意

アプリをアンインストールすると、管理画面上からは消えますが、
テーマのコード（theme.liquidやsnippets）にスクリプトが残ったままのケースがよくあります。

対応の流れとしては、

1. 現在使っているテーマを複製（バックアップ）
2. 複製テーマ内で、「アプリ名」や「app」「widget」などのキーワードでコード検索
3. 不要なスクリプトの{% include %}や<script>タグをコメントアウト or 削除
4. 動作確認が取れたら、本番テーマに同じ修正を反映

コード修正に不安がある場合は、開発者やShopifyパートナーにスポット依頼するのも一案です。
「不要スクリプトの削除」だけでも、体感速度が大きく変わることがあります。

4-4. 重くなりがちなアプリカテゴリと代替案

特に表示速度に影響しやすいアプリカテゴリと、その代替案を整理します。

• ポップアップ系（クーポン・メルマガ登録）
  • → 必要最低限のものに絞る
  • → テーマに組み込まれた簡易ポップアップ機能があればそちらを活用
• チャットウィジェット
  • → 使用頻度・対応体制に対してオーバースペックなものは削除
  • → 問い合わせフォームやLINE連携で代替できないか検討
• レビューアプリ
  • → 表示位置や表示件数を見直し、読み込み負荷を軽減
  • → シンプルなレビューアプリへリプレイスも検討
• アニメーション・カウントダウンタイマー
  • → CVRへの貢献が薄い場合は思い切って停止
  • → 静的なテキストやバナーで代替する

ポイントは、 「売上・CVRへの貢献度」と「速度悪化リスク」を天秤にかけて判断することです。
「なんとなく入れているアプリ」は、まず止めてみる価値があります。

5. 1週間で実行する「画像×アプリ」速度改善プラン

5-1. Day1：現状把握（計測）

まずは、現在地を明確にします。

• Shopify管理画面で「オンラインストア速度」のスコアを確認（スクリーンショット保存）
• PageSpeed Insightsで
  • トップページ
  • 代表的な商品ページ
  • 代表的なコレクションページ
  を計測し、レポートを控える
• レポートの「改善提案」のうち、
  • 画像関連（画像の最適化・次世代フォーマット・適切なサイズ）
  • JavaScript / サードパーティコード関連
  にチェックを付けておく

5-2. Day2〜3：主要画像の圧縮＆差し替え

次に、優先度の高い画像から圧縮していきます。

• LCPに該当する画像（PageSpeed Insightsで指摘される）
• TOPページのスライド・ヒーロー画像
• 売上上位商品のメイン画像

これらを

• 適切な解像度にリサイズ
• JPEG/WebPで圧縮（200〜300KB目安）
• 必要に応じて画像最適化アプリで一括圧縮

したうえで差し替えます。
差し替え後は、必ずPC・スマホ両方で実際の見え方を確認してください。

5-3. Day4〜5：アプリ棚卸しと削除・コードクリーンアップ

画像の次は、アプリです。

1. アプリ一覧をカテゴリ分け（必須／要検討／削除候補）
2. 削除候補からアンインストールを進める
3. テーマを複製し、不要アプリのコードが残っていないか確認・削除
4. 必要なアプリでも、「表示箇所を減らす」「モバイルだけ非表示」など負荷軽減策を検討

このタイミングで、ポップアップの出し過ぎ・チャットの常時表示なども見直すと効果的です。

5-4. Day6〜7：再計測と課題整理

画像圧縮とアプリ整理が一通り終わったら、Day1と同じ条件で再度計測します。

• Shopify Speed Scoreの変化を確認
• PageSpeed Insightsのスコアと、改善項目の変化を確認

そのうえで、

• まだ残っているボトルネック（例：テーマのLiquidコード・カスタムJavaScript）
• 今後の改善候補（例：フォント最適化・不要セクションの削減）

をリストアップしておきます。
ここまでで、 「最初の1ステップ」としては十分な速度改善 ができているはずです。

6. 画像とアプリ以外で、合わせて見直したいポイント

6-1. テーマの選定とカスタマイズのやり過ぎ

古いテーマや、カスタマイズを重ねすぎたテーマは、それだけでコードが肥大化しがちです。

• 速度に配慮した「軽量テーマ」への乗り換え
• 不要なセクション・スクリプト・CSSの整理

も、中長期的には検討する価値があります。

6-2. 計測タグの整理（Googleタグマネージャなど）

GA4・広告タグ・ヒートマップなどをタグマネージャ経由で入れている場合、
使っていないタグが残り続けていることも多いです。

• 停止済みキャンペーンのタグ
• 試験導入したが今は使っていない計測ツール

などを整理するだけでも、無駄なリクエストを減らせます。

7. 継続的に速度を維持するための運用ルール

7-1. 画像アップロード前のチェックリスト

今後、新しい商品やバナーを追加するときは、次のようなチェックリストを運用に組み込みましょう。

• 表示サイズに対して解像度はオーバースペックではないか
• ファイルサイズは200〜300KB以内（ヒーロー画像でも500KB以内）か
• Web向けに圧縮／最適化を行ったか（JPEG/WebPなど）

7-2. 新アプリ導入時のチェックリスト

アプリを追加するときも、事前に次の観点で確認します。

• 本当に必要な機能か（既存アプリやテーマ機能で代替できないか）
• レビューに「サイトが重くなった」などの声が多くないか
• 試験導入期間を決め、CVR・速度への影響を見たうえで正式採用するか

また、「半年に一度はアプリ棚卸しをする」といった社内ルールを決めておくと、
速度劣化を防ぎやすくなります。

7-3. 定期的な速度ヘルスチェック

最後に、速度改善を「やりっぱなし」にしないことが大切です。

• 月1回：Shopify Speed ScoreとPageSpeed Insightsで簡易チェック
• 四半期に1回：商品ページ・LPなどの主要導線をまとめて再計測

といったペースでヘルスチェックを行い、
数値が悪化し始めたタイミングで早めに手を打てるようにしておきましょう。

まとめ：まずは「画像」と「アプリ」から着手しよう

本記事では、 「Shopify：サイト表示速度の改善：画像圧縮と不要なアプリの見直し」 というテーマで、

• Shopifyの表示速度指標（Speed Score / Core Web Vitals）の概要
• サイトを重くする典型要因（大きすぎる画像・増えすぎたアプリ）
• 画像圧縮の基本と、優先度の高い画像から着手する手順
• アプリ棚卸しの進め方と、削除時のコードクリーンアップのポイント
• 1週間で実行できる「画像×アプリ」速度改善プラン
• 継続的に速度を維持するための運用ルール

を整理して解説しました。

Shopifyの速度改善は、テーマやコードのチューニングも含めると奥が深い領域ですが、
「画像」と「アプリ」という2つのレバーだけでも、

• 体感速度の向上
• CVR・直帰率の改善
• 広告LPの成果向上

に大きく貢献します。

まずは、本記事で紹介したステップを参考に、
自社Shopifyストアの画像圧縮とアプリ見直しから着手してみてください。
そのうえで、テーマやコード、タグ設計などの上流も順番に整えていけば、
「速くて、売れるECサイト」に近づいていきます。