こんにちは、Hodaです。
ページが1秒遅くなるだけで、コンバージョン率は約7%低下します。月商50万円のストアなら、それだけで毎月3.5万円が消えている計算です。広告の質でも商品の問題でもなく、ページの読み込み速度が原因で。
速度最適化はShopifyストアで最もROIの高い改善施策のひとつです。本記事では、優先度の高い施策から順に、実際に取り組める形でまとめます。
なぜ速度がコンバージョンに直結するのか
コンバージョンへの影響
- 2秒以内に読み込まれるストアは、5秒以上かかるストアと比べてコンバージョン率が2.5倍高い
- 0.5秒の速度改善でも、計測可能なコンバージョン向上が確認されている
- 消費者の70%が「遅い表示速度は購買意欲に直結する」と回答している
- モバイルユーザーの47%が「2秒以内の読み込みを期待している」
SEOへの影響
- ページ速度はGoogleの検索ランキング要因として公式に確認されている
- Core Web Vitalsは2021年からGoogleのランキングシグナルに採用
- 速いサイトはGoogleのクローラーに効率よく巡回されやすく、大型カタログのインデックスに有利
広告費への影響
- 遅いページは直帰率を高め、獲得した有料クリックを無駄にする
- Google Adsの品質スコアはランディングページの体験を含んでおり、速度が低いと入札単価が上がりやすい
Shopifyが自動で対応していること
最初に整理しておきたいのは、Shopifyがプラットフォームとして自動で処理してくれている項目です。
| 項目 | 内容 |
|---|---|
| グローバルサーバー | Shopify管理のサーバーで速度最適化済み。帯域幅制限なし |
| CDN(Cloudflare) | 世界中のエッジサーバーにサイトのキャッシュを配置し、訪問者に最も近いサーバーから配信 |
| ブラウザキャッシュ | 1年間のキャッシュ設定で、再訪問者の読み込みを高速化 |
| WebP自動変換 | アップロードされた画像をWebP形式でブラウザに配信(JPEG/PNGより25〜34%軽量) |
言い換えると、Shopifyストアの速度問題の原因はほぼすべてテーマ・アプリ・サードパーティスクリプト・画像にあります。
まず速度を計測する
最適化の前に現状のベースラインを把握しておくことが重要です。
Google PageSpeed Insights(推奨)

PageSpeed Insights にストアのURLを入力すると、モバイル・デスクトップそれぞれのスコア(0〜100)とCore Web Vitalsの数値、具体的な改善提案が表示されます。
- 90以上:優秀
- 50〜89:改善の余地あり
- 50以下:要対応
モバイルスコアに特に注目してください。デスクトップより低い傾向があり、かつShopifyではモバイルが全体の70%以上のトラフィックを占めることが多いためです。
Shopify Web Performance Dashboard

Shopify Admin → オンラインストア → テーマ から確認できます。過去30日間のパフォーマンス指標を確認できますが、何が問題かの診断は表示されません。問題の特定にはPageSpeed Insightsのほうが使えます。
Core Web Vitalsの3指標を理解する
Googleがランキングに使うCore Web Vitalsは以下の3指標です。Shopifyストアでは特にLCPが最も改善効果の大きいターゲットになります。
| 指標 | 意味 | 目標値 |
|---|---|---|
| LCP(Largest Contentful Paint) | ページの最大コンテンツ(通常はヒーロー画像や見出し)が表示されるまでの時間 | 2.5秒以内 |
| INP(Interaction to Next Paint) | ユーザー操作への応答速度 | 200ms以下 |
| CLS(Cumulative Layout Shift) | ページ読み込み中のレイアウトずれの量 | 0.1以下 |
2026年7月のShopifyストア実測データ(40ストア以上):
| 上位20ストア | 下位20ストア | 平均 | |
|---|---|---|---|
| LCP | 1.2秒 | 3.2秒 | 1.7秒 |
| INP | 59.6ms | 253.7ms | 84.4ms |
| CLS | 0.004 | 0.073 | 0.036 |
上位のストアはいずれも目標値を大きく上回っています。まずLCP 2.5秒以内を目指すことが現実的な最初の目標です。
優先度順の速度最適化施策
これらの数値やスコアを改善するためにできることは色々とあります。特に僕が注目している点を以下に挙げます。
① 画像の最適化(最大インパクト)
ページの総重量の22〜27%を画像が占めています。ここが最も費用対効果の高い改善ポイントです。そして、一番意識すれば改善できる点です。
アップロード前にリサイズする :
5000×5000pxの画像を800×800pxで表示するケースは非常に多いです。商品画像は最大2048×2048px(多くの場合800×800pxで十分)にリサイズしてからアップロードします。 具体的には1画像あたり 100kb 以下を目指します。
アップロード前に圧縮する : Shopifyは基本的な圧縮を行いますが、さらに最適化できる余地が残っています。TinyPNG・Squoosh・iLoveIMGなどの無料ツールを使い、画質への影響なくファイルサイズを60〜80%削減できます。
WebP形式を使う : ShopifyはJPEG・PNG形式でアップロードされた画像を自動的にWebPに変換して配信します。特別な設定は不要ですが、適切な形式でアップロードすることが前提です。
GIFを使い過ぎない : GIFはWebP画像の3〜14倍のファイルサイズになるケースがあります。アニメーションが必要な場合は、同等の見た目でファイルサイズが大幅に小さいMP4動画への差し替えを検討してください。
遅延読み込み(Lazy Loading)を有効にする :
画面外の画像はスクロールされるまで読み込まない設定です。多くのShopifyテーマではデフォルトで対応していますが、確認しておきましょう。ただしファーストビューのヒーロー画像には適用しないでください——ここは早く読み込むべき要素です。
② 不要なアプリの削除
アプリをインストールするたびに、JavaScriptやCSSがストアフロントに追加されます。使っていないアプリでもスクリプトは読み込まれ続けます。 ShopifyのアプリはWordpressのように無効にするようなオプションはないので使っていないのであれば「削除」をする必要があります。

アプリの棚卸しを行う : 各アプリについて「これはコンバージョンや収益に直接貢献しているか?」を問い、そうでなければ削除します。
アンインストール後のコードも削除する :
アプリをアンインストールしても、theme.liquidやスニペットファイルに残留コードが残るケースがあります。Shopify Admin → オンラインストア → テーマ → アクション → コードを編集 から、削除したアプリ名で検索して残留コードを探してください。コード編集に不安がある場合は開発者やアプリのサポートに依頼することをおすすめします。
③ 高速なテーマを選ぶ
テーマはストアのパフォーマンスの「天井」を決めます。機能が豊富でコードが重いテーマを使っている限り、他の最適化を積み重ねても上限があります。
実測のデスクトップ読み込み時間の例:
- Blum:0.5秒
- Dawn(Shopify公式・無料):0.6秒
- Electro:0.7秒
Shopify App Storeのテーマはパフォーマンス基準をクリアしていますが、サードパーティのテーマは事前にデモストアをPageSpeed Insightsで確認してから購入することをおすすめします。
スライダー・アニメーション・クイックビューは見た目は良いですが、速度コストが高い機能です。使わない機能を無効化するだけでもスコアが改善するケースがあります。
個人的には Dawn や Rise などのシンプルなテーマを使い、必要な機能はコードで実装したり PageFly などのページビルダーで必要最低限のブロックを使うのが良いです。

PageFly
Shopifyストア向けの人気ページビルダーです。ノーコードで高品質なLPや商品ページを作成できます。
価格
月額24ドルから
無料プラン
あり
無料トライアル
なし
総評
4.8
当サイト経由のインストールで有料プランにする時に永久15%OFF
④ Google Tag Managerでトラッキングを整理する
Meta Pixel・Google Analytics・TikTok Pixelなどのトラッキングスクリプトを個別にテーマに埋め込んでいると、それぞれが独立して読み込まれます。Google Tag Manager(GTM) を使えば、これらをひとつのスクリプトで管理でき、非同期読み込みが可能になります。
大まかな移行手順:
- Google Tag Managerのアカウントを作成し、コンテナコードをShopifyのCustom pixelsに追加する
- 既存のトラッキングコードをGTMのタグとして設定する
- テーマから個別のトラッキングスクリプトを削除する(重複して計測されるため)
- GTMのプレビュー・デバッグ機能で正常に動作するか確認してから公開する
⑤ GTMの定期メンテナンス
GTMを導入済みの場合でも、放置しているうちに不要なタグ・重複スクリプト・全ページで発火する不要なトリガーが蓄積していきます。定期的に棚卸しして、「本当に必要なスクリプトだけが必要なタイミングで発火する」状態を維持することが大切です。
⑥ コードの最小化(Minification)
PageSpeed Insightsに「使用していないCSSを削除」「JavaScriptを最小化」といった診断が出ている場合、CSS・JavaScriptファイルに不要なスペース・コメント・余分な文字が含まれています。
Toptal MinifierやMinifier.orgなどの無料ツールで手動で対応できます。自動化したい場合はShopifyのminification対応アプリも使えますが、他の速度関連機能も含むアプリを選ぶとより効率的です。
⑦ フォントの最適化
カスタムWebフォント(Google Fonts・Adobe Fontsなど)は追加のネットワークリクエストが発生し、テキストのレンダリングを遅らせます。

- システムフォント(
system-uiフォントスタック)はデバイスにすでにインストールされているため、読み込みが不要 - カスタムフォントを使う場合は、使用するウェイトとスタイルを必要最小限に絞る
font-display: swapを設定し、フォント読み込み中もテキストを表示させる
PageSpeed Insightsを活用した改善の進め方
施策を実施するたびに必ずPageSpeed InsightsでBefore/Afterを計測してください。計測なしの最適化は改善しているかどうか分かりません。

確認すべき数値:
- LCP:2.5秒以内を目標
- INP:200ms以下を目標
- CLS:0.1以下を目標
Diagnostics(診断)セクションには具体的な問題と改善提案が表示されます。
スコアよりもCore Web Vitalsの実数値を重視して対応していくのが効率的です。
よくあるミスと注意点
「速度改善アプリ」を闇雲に入れる : 追加JavaScriptで逆効果になるケースがある。アプリを増やす前に既存を整理する
モバイルを後回しにする : Shopifyの大半のトラフィックはモバイル。デスクトップより先にモバイルスコアを確認する
画像を過度に圧縮する : ブランドイメージを損なうほど圧縮するのは逆効果。品質と速度のバランスを保つ
ホームページだけ最適化する : コンバージョンが発生するのは商品ページとチェックアウト。そちらも同等に対応する
一度やって終わりにする : 新商品・新セクション追加のたびに画像最適化とスコア確認をルーティン化する
優先順位別のアクションプラン
| 優先度 | 施策 | 難易度 | 期待効果 |
|---|---|---|---|
| 🔴 最優先 | 画像のリサイズ・圧縮 | 低 | 30〜40%の改善 |
| 🔴 最優先 | 不要アプリの削除+残留コード除去 | 中 | 20〜30%の改善 |
| 🟡 高 | 遅延読み込みの有効化 | 低 | 15〜25%の改善 |
| 🟡 高 | GIFを静止画またはMP4に置き換え | 低 | ページ重量を大幅削減 |
| 🟡 高 | テーマの見直し(重いなら変更) | 中〜高 | 40〜50%の改善 |
| 🟢 中 | Google Tag Managerへの集約 | 高 | スクリプト管理の効率化 |
| 🟢 中 | CSS/JSのMinification | 中 | 軽微な改善 |
| 🟢 中 | フォント最適化 | 低 | テキスト表示の安定化 |
まとめ
画像最適化・アプリ削減・遅延読み込みは、コード知識なしで取り組める
Shopify自体がCDN・WebP変換・ブラウザキャッシュを提供しているため、出発点が高い
PageSpeed Insightsは無料で具体的な改善指示を出してくれる
速度改善はSEO・広告効率・コンバージョン率すべてに同時に効く
残留コードの削除・GTM設定・コードMinificationはコーディング知識が必要な場面がある
テーマ変更は大きな改善効果がある一方、既存ページの再設定コストが高い
最適化の効果はストアの現状によって大きく異なるため、計測なしでは成果が分かりにくい
個人的な意見としては、速度最適化で最初に手をつけるべきは画像です。
特別なツールも知識も不要で、アップロード前のリサイズと圧縮だけで大きな改善が出るケースが多いです。まずPageSpeed Insightsでスコアを確認し、画像から着手してみてください。
定期的に計測を続けながら、施策を積み重ねていく運用を続けることが、速いストアを維持するための本質です。


