Shopifyエージェンシー向け
見積アプリはShopifyストアを遅くするか：何が動くのかと、その実測
著者 Jahangir Alam · 2026年9月28日 · 12分で読めます
- 最終確認日
- Shopify API
- 2026-07
- 対象読者
- 見積アプリやBtoBアプリがストアフロントに与える負荷を見極めたいShopifyエージェンシー、開発者、マーチャント
- 範囲
- 見積アプリがShopifyのストアフロントで読み込むもの（アプリ埋め込み、アプリブロック、アプリプロキシ、script tags）、Built for Shopifyのストアフロントのテスト、データセット付きの1つの見積アプリのモバイルLighthouse A/Bテスト42回、負荷を決める読み込みのパターン、そして任意のアプリを測る手順
見積アプリがShopifyのストアフロントで動かすものは3つです。すべてのページでスクリプトとスタイルを読み込むアプリ埋め込み（app embed）、ボタンや価格表示を置いたページのアプリブロック、そしてアプリプロキシを通じたアプリ自身のサーバーへのリクエストです。それがストアを遅くするかどうかは、アプリのサイズよりも4つの振る舞いで決まります。描画をブロックするものがあるか、メインスレッドでどれだけ処理するか、ページが使えるようになる前に通信するか、ボタンが現れるときにレイアウトをずらすか、です。
私たちはそのうちの1つ、QuotWayを、ShopifyがBuilt for Shopifyプログラムでアプリを測るのと同じ方法で計測しました。ホーム、商品、コレクションの各ページでモバイルのLighthouseを実行し、17%、40%、43%で加重し、アプリのオンとオフを比べる方法です。42回の実行で、加重中央値はアプリありで82.0、アプリなしで80.7でした。この差は実行ごとのばらつきより小さく、ばらつきは同じページの2回の実行の間で17ポイントに達しました。 アプリのスクリプトはページごとに28〜63 msのメインスレッド時間を使い、キャッシュのないページ表示1回あたり約37 KBでした。データセットはすべてこの記事とともに公開しています。
このページでは、何が動くのか、Shopifyがそれをどう測るのか、私たちが何をどう測ったのか、負荷を抑えたパターン、そして任意のアプリを自分で測る手順を順に説明します。手順とチェックリストはベンダー中立で、計測は自社アプリのものであり、そのように明記しています。
以下のShopifyに関する記述は、2026年9月28日にShopify自身のページで確認しました。出典は末尾にあります。
見積アプリがストアフロントで動かすもの
| 仕組み | 表示される場所 | 読み込まれるタイミング | 確認すること |
|---|---|---|---|
| アプリ埋め込みブロック | すべてのページ（head または body が対象） |
ページの読み込み時 | スクリプトは async か defer か。描画をブロックするスタイルシートはないか |
| アプリブロック | マーチャントが置いた場所：商品ページ、カート、コレクション | セクションのHTMLとともに | ボタンはLiquidで描画されているか、あとからスクリプトで挿入されるか（レイアウトのずれ） |
| アプリプロキシのリクエスト | スクリプトから、ストアのドメイン経由でアプリのサーバーへ | 起動時、または操作されたときだけ | バイヤーが何も触らないうちに何件のリクエストが出るか |
| script tags（古いアプリ） | すべてのページ | ページの読み込み時 | Shopifyはscript tagsを「vintageテーマでのみ使用できる」とドキュメントに記している |
こうしたものを追加する現在の方法は、theme app extension（テーマアプリ拡張機能）です。Built for Shopifyはオンラインストアに関わるアプリにこれを必須としており、アプリがなくなったあとも長くパフォーマンスに効く保証が付いています。「マーチャントがアプリをアンインストールすると、そのアプリに関連するブロックはオンラインストアのテーマから自動的かつ完全に削除されます」。古いアプリがテーマのファイルに貼り付けたコードは、誰かが削除するまで残ります。
Shopifyはこの拡張機能にサイズの上限も設けています。強制される上限は緩やかで、拡張機能全体で10 MB、Liquidで100 KBです。ただし2つは推奨です。圧縮後のJavaScriptが10 KB、圧縮後のCSSが100 KB。「推奨」という言葉を覚えておいてください。計測の部分で出てきます。
Shopifyはアプリの影響をどう測るか
Built for Shopifyの認定では、「アプリはストアフロントのLighthouseパフォーマンススコアを10ポイントを超えて下げてはならない」とされています。Shopifyのストアフロントのパフォーマンスのページにある方法は次のとおりです。
- Lighthouseのモバイルで、Horizonのようなクリーンなテーマを使う。
- アプリをインストールして設定する前と後で測る。
- 売上への重要度で加重した3ページ：ホーム17%、商品40%、コレクション43%。
- Shopify自身の注意書き：「Lighthouseのスコアは実行ごとに変動することがあります」。そのため複数回の平均を取る。
この加重が、ホームのバナーより商品ページのボタンのほうが重要な理由です。商品とコレクションのページがスコアの83%を占めます。
ラボのスコアがすべてではありません。Shopifyのウェブパフォーマンスダッシュボードは、実際の訪問から得たCore Web Vitalsを75パーセンタイルで報告します。良好の基準はLCPが2,500 ms以下、INPが200 ms以下、CLSが0.1以下で、最大36時間の遅れがあります。ラボのテストは管理された条件でアプリが何を費やすかを示し、ダッシュボードはバイヤーが実際に何を体験したかを示します。
私たちが測ったもの
QuotWayによる測定、2026年9月28日。Lighthouse 13.5.0、モバイル、シミュレートされたスロットリング（往復150 ms、1.6 Mbps、CPU 4倍の減速）、各実行の前にブラウザのキャッシュを消去。ほかのアプリもインストールされたSavorテーマのShopify開発ストアで実施しました。クリーンなストアではありませんが、この比較はアプリだけを切り分けています。「オフ」の実行は同じHTMLを読み込み、アプリの3つのアセットファイルとアプリプロキシのパスを遮断しています。つまりオンとオフの違いはアプリのコードだけです。7ラウンドで、オンとオフを交互に実行し、どちらを先にするかも入れ替えました。
| ページ（加重） | スコア オン / オフ | LCP オン / オフ | TBT オン / オフ | CLS オン / オフ |
|---|---|---|---|---|
| ホーム（17%） | 80 / 82 | 4.9 s / 4.4 s | 4 / 14 ms | 0 / 0 |
| 商品（40%） | 85 / 82 | 3.9 s / 4.1 s | 18 / 15 ms | 0.039 / 0.024 |
| コレクション（43%） | 80 / 79 | 4.7 s / 4.9 s | 19 / 6 ms | 0.014 / 0 |
| 加重スコア | 82.0 / 80.7 |
読み方。 加重後の差はアプリ側に有利な1.3ポイントですが、意味はありません。1つのラウンドの中でも、1ページのオンからオフを引いた差は−11から+17まで振れました。正直な読み方は、この条件ではLighthouseスコアに測定可能な影響はないというものであり、アプリがストアを速くするということではありません。Built for Shopifyの10ポイントのしきい値は、このデータで見分けられるどんな差よりも十分に大きいものです。
アプリが実際に費やしたもの（同じ実行から）：
| 指標 | 結果 |
|---|---|
| キャッシュのないページ表示1回あたりのバイト数 | 36.8〜38.4 KB：スクリプト30.9 KB、ドロワーのスタイル5.9 KB、ボタンのスタイル約1 KB、さらに商品カードで必要なページではアプリへの0.6〜0.7 KBのリクエスト |
| メインスレッドのスクリプト処理（中央値、CPU 4倍の減速） | ホーム28 ms、商品63 ms、コレクション30 ms。ページ全体ではそれぞれ336、517、418 ms |
| 解析とコンパイル | 約6 ms |
| 描画をブロックするリソース | なし：Chromeは3つのファイルすべてをブロックしないものとして報告 |
| 操作前のリクエスト | ホームと商品で1件（商品カードの対象判定）、コレクションページではなし |
本当は載せたくない数字。 スクリプトは圧縮後で約31 KBあり、Shopifyがテーマアプリ拡張機能のJavaScriptに推奨する10 KBの3倍です。これは推奨であって強制される上限ではなく、今回の実行ではスコアを動かしませんでした。ブロックせずに読み込まれ、バイヤーが見積フォームを開くまでほとんど処理をしないからです。それでも削減の明らかな対象であることに変わりはなく、気づかないうちに大きくならないよう、ビルドでサイズの予算を強制しています。
生データ（42回すべての実行と設定）はstorefront-lighthouse-2026-09-28.jsonとして公開しています。
負荷を抑えたもの
この結果は5つのパターンで説明でき、どのストアフロントのアプリもこれに照らして判断できます。
- クリティカルパスに何も置かない。 スクリプトは
asyncで、ドロワーのスタイルシートはブロックしないリンクとして挿入されます。描画をブロックするスクリプトやスタイルシートは、すべてのページで確実にポイントを失う唯一のものです。Shopifyのテーマのガイダンスが「描画をブロックするアプリを取り除く」よう述べているのはそのためです。 - 設定は取得せずHTMLに入れる。 アプリの設定とバイヤー向けのテキストはLiquidでJSONとしてページに描画されるため、スクリプトはサーバーに尋ねずにそれを読みます。往復150 msの環境では、減らしたリクエストの1件1件が、バイヤーが待たずに済む時間です。
- 処理は操作されたときに。 見積フォームの設定は、バイヤーが初めてフォームを開いたときにだけ読み込まれます。Shopifyのガイダンスも同じことを述べています。「ユーザーの操作時にJavaScriptを読み込む」。
- サーバーで描画したデータが最後のリクエストをなくす。 コレクションページではブロックが各商品カードの対象判定データをHTMLに描画するため、リクエストが消えます。そうしたブロックのないカードが並ぶホームと商品のページでは、スクリプトが1件のリクエストを送り、答えを5分間キャッシュします。計測にはこの違いがそのまま表れています。
- ボタンはスクリプトが動く前から存在する。 見積ボタンはLiquidで描画され、小さなスタイルシートでスタイルが付き、スクリプトは動作をつなぐだけです。そのため後から現れてページを押し下げることがありません。商品ページのわずかなCLS（0.039。「良好」の0.1を十分に下回る）が、次に見るべき箇所です。
任意のアプリを自分で測る
ここまでの手順は、競合のアプリを含めどのアプリにも使え、アプリのコードへのアクセスも必要ありません。
- Shopifyの3ページを選ぶ。アプリを設定したストアで、ホーム、アプリが有効な商品ページ、コレクションページです。
- アプリのURLを見つける。ブラウザのネットワークパネルで、ShopifyのCDN上のアセット（拡張機能の
assets/フォルダー）と、ストアのドメイン配下のアプリプロキシのパスを探します。 - 1ラウンドにつきLighthouseのモバイルを2回実行する。1回は通常どおり、もう1回はそれらのURLを遮断して（Lighthouse CLIの
--blocked-url-patterns、パターンごとに1つ）。同じHTML、同じストア、同じ時間帯です。 - 少なくとも5ラウンド、交互に実行し、中央値を比べます。ページは17/40/43で加重します。前後1組だけの比較は根拠になりません。私たち自身の実行でも、同じページで最大17ポイントの差がありました。
- スコアだけでなく診断を読む。描画をブロックするリソース、「JavaScriptの実行時間」の中のアプリの行、操作前に出るリクエスト、アプリの要素付近のレイアウトのずれです。
- 次にフィールドデータを確認する。変更から数日後にShopifyのウェブパフォーマンスダッシュボードを見ます。ラボのスコアには実際の端末と実際のバイヤーが含まれないからです。
1ページだけを手早く見るなら、PageSpeed Insightsが同じLighthouseのエンジンで実行します。パスワードで保護された開発ストアでは、すでにストアフロントのパスワードを入力したブラウザでLighthouse CLIを実行してください。
ストアフロントの負荷チェックリスト
- アプリはscript tagsやテーマファイルの編集ではなく、theme app extension（アプリ埋め込みとブロック）を使っているか。
- スクリプトは
asyncかdeferか。描画をブロックするスタイルシートはないか。 - ページごとに圧縮後で何KB増えるか。JavaScriptについてShopifyが推奨する10 KBと比べてどうか。
- バイヤーが操作する前にどのリクエストが出るか。そのデータは代わりにページに描画できないか。
- 目に見える要素はLiquidで描画されているか、読み込み後にスクリプトで挿入されるか。
- すべてのページで読み込むのか、使う場所だけか。
- アンインストール時に何が残るか。theme app extensionなら、ブロックは自動的に削除される。
- Shopifyと同じ方法で測られているか。そしてベンダーは数値を公開しているか。
アプリ評価の残りの部分（データの扱い、APIバージョン、強制）はShopify B2Bアプリの評価方法に、ストア側のセキュリティ診断はShopify B2Bのセキュリティ診断チェックリストにあります。
QuotWayの位置づけ
上の計測はQuotWayのストアフロント拡張機能のものです。すべてのページのアプリ埋め込みに加え、マーチャントが置く見積ボタンとカートボタンのブロック、任意の価格表示ブロックで構成されます。無料のLiteプランを含むすべてのプランで動きます。プランごとの内容は料金ページに、ストアフロントの選択肢をプランごとにまとめたものはQuotWayにできること、できないことにあります。ストアフロント、見積レイヤー、Shopifyがどう役割を分けるかはShopifyに置くものと見積レイヤーに置くものをご覧ください。
よくある質問
見積アプリはShopifyストアを遅くしますか？
遅くすることはありますが、アプリのサイズよりも読み込み方のほうが重要です。描画をブロックするスクリプトやスタイルシートはすべてのページでポイントを失わせますが、バイヤーが操作するまでほとんど処理をしない async のスクリプトなら、測定可能な負荷はないかもしれません。私たちの42回のテストでは、ある見積アプリがモバイルLighthouseの加重スコアに与えた影響は、同じページの2回の実行の間のばらつきより小さいものでした。
Shopifyはアプリがストアの速度に与える影響をどう測りますか？
Shopifyは、クリーンなテーマで、アプリをインストールして設定する前と後にモバイルのLighthouseを実行し、ホーム、商品、コレクションの各ページを17%、40%、43%で加重します。Built for Shopifyの認定を得るには、アプリがそのスコアを10ポイントを超えて下げてはなりません。
自分のShopifyストアの速度はどう確認しますか？
問いが2つあり、方法も2つです。PageSpeed Insights（またはLighthouse CLI）は、固定された条件で1ページのラボのスコアを出します。変更の前後を比べるのに使います。Shopifyのウェブパフォーマンスダッシュボードは、実際の訪問から得たCore Web Vitalsを75パーセンタイルで、最大36時間の遅れで示します。バイヤーが実際に何を体験したかを見るのに使います。
script tagsとアプリ埋め込みの違いは何ですか？
script tagsはすべてのページにリモートのJavaScriptを挿入するもので、Shopifyによれば「vintageテーマでのみ使用できます」。テーマと連携するApp Storeのアプリは、代わりにtheme app extensionを使う必要があります。アプリ埋め込みはtheme app extensionの一部で、マーチャントがテーマエディターでオン・オフを切り替えられ、アプリをアンインストールすると自動的に削除されます。
アプリをアンインストールすると、テーマからそのコードは削除されますか？
theme app extensionで作られたアプリなら削除されます。Shopifyは、アプリのブロックが「オンラインストアのテーマから自動的かつ完全に削除されます」と明記しています。古いアプリがテーマのファイルに直接貼り付けたコードは削除されず、探して手作業で消す必要があります。
アプリのストアフロントのJavaScriptはどれくらいの大きさにすべきですか？
Shopifyはtheme app extensionのJavaScriptに圧縮後10 KBを推奨しています。これは強制される上限ではなく推奨であり、サイズより読み込みの戦略のほうが重要です。私たちのテストでは、圧縮後31 KBの async スクリプトはスコアを測定可能なほど変えませんでした。推奨値は目指すべき予算として、計測はテストとして扱ってください。
出典
Shopifyのページ。2026年9月28日に閲覧：
- Built for Shopifyの要件：10ポイントの規則、theme app extension、アンインストール時の削除
- アプリのストアフロントのパフォーマンス：前後比較の方法、モバイル、17/40/43の加重
- theme app extensionの設定：強制される上限と推奨される上限
- ScriptTag：vintageテーマのみ
- テーマのパフォーマンスのベストプラクティス：asyncとdefer、描画をブロックするアプリ、操作時のJavaScript
- ウェブパフォーマンスダッシュボード：フィールドのCore Web Vitalsとしきい値
私たちの計測：2026年9月28日のLighthouse実行42回。データセットと設定はstorefront-lighthouse-2026-09-28.jsonにあります。QuotWayの読み込みの振る舞いは、その拡張機能のソースコードに基づいて説明しています。
関連記事
QuotWayがこれをあなたのストアでどう扱うかをご覧ください。