---
title: "見積アプリはShopifyストアを遅くするか：何が動くのかと、その実測"
description: "見積アプリがストアフロントで動かすもの、Shopifyのアプリ影響の測り方、1つのアプリのLighthouse A/Bテスト42回とそのデータセット。"
url: "https://www.quotway.com/ja/blog/shopify-quote-app-storefront-performance"
type: "blog post"
category: "For Shopify agencies"
published: "2026-09-28"
verified: "2026-09-28"
shopify_api_version: "2026-07"
audience: "見積アプリやBtoBアプリがストアフロントに与える負荷を見極めたいShopifyエージェンシー、開発者、マーチャント"
scope: "見積アプリがShopifyのストアフロントで読み込むもの（アプリ埋め込み、アプリブロック、アプリプロキシ、script tags）、Built for Shopifyのストアフロントのテスト、データセット付きの1つの見積アプリのモバイルLighthouse A/Bテスト42回、負荷を決める読み込みのパターン、そして任意のアプリを測る手順"
locale: "ja"
source: "QuotWay - B2B Quote & Negotiation App for Shopify"
---

# 見積アプリはShopifyストアを遅くするか：何が動くのかと、その実測

見積アプリが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ラウンドで、オンとオフを交互に実行し、どちらを先にするかも入れ替えました。

> **見積アプリのオンとオフでのLighthouseモバイルスコア。7回の実行の中央値と範囲**
>
> 3ページの棒グラフ。ホーム（加重17%）：アプリありの中央値80、範囲71〜86。アプリなしの中央値82、範囲75〜83。商品（加重40%）：アプリありの中央値85、範囲76〜89。アプリなしの中央値82、範囲72〜85。コレクション（加重43%）：アプリありの中央値80、範囲74〜84。アプリなしの中央値79、範囲74〜82。どのページでもオンとオフの範囲は大きく重なっている。加重中央値はアプリあり82.0、アプリなし80.7。
>
> ページと状態ごとの7回の実行の中央値。どのページでも範囲が重なっています。アプリがスコアに与える影響は、同じページの2回の実行の間のばらつきより小さいということです。

| ページ（加重） | スコア オン / オフ | 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](/data/storefront-lighthouse-2026-09-28.json)として公開しています。

## 負荷を抑えたもの
この結果は5つのパターンで説明でき、どのストアフロントのアプリもこれに照らして判断できます。

1. **クリティカルパスに何も置かない。** スクリプトは `async` で、ドロワーのスタイルシートはブロックしないリンクとして挿入されます。描画をブロックするスクリプトやスタイルシートは、すべてのページで確実にポイントを失う唯一のものです。Shopifyのテーマのガイダンスが「描画をブロックするアプリを取り除く」よう述べているのはそのためです。
2. **設定は取得せずHTMLに入れる。** アプリの設定とバイヤー向けのテキストはLiquidでJSONとしてページに描画されるため、スクリプトはサーバーに尋ねずにそれを読みます。往復150 msの環境では、減らしたリクエストの1件1件が、バイヤーが待たずに済む時間です。
3. **処理は操作されたときに。** 見積フォームの設定は、バイヤーが初めてフォームを開いたときにだけ読み込まれます。Shopifyのガイダンスも同じことを述べています。「ユーザーの操作時にJavaScriptを読み込む」。
4. **サーバーで描画したデータが最後のリクエストをなくす。** コレクションページではブロックが各商品カードの対象判定データをHTMLに描画するため、リクエストが消えます。そうしたブロックのないカードが並ぶホームと商品のページでは、スクリプトが1件のリクエストを送り、答えを5分間キャッシュします。計測にはこの違いがそのまま表れています。
5. **ボタンはスクリプトが動く前から存在する。** 見積ボタンはLiquidで描画され、小さなスタイルシートでスタイルが付き、スクリプトは動作をつなぐだけです。そのため後から現れてページを押し下げることがありません。商品ページのわずかなCLS（0.039。「良好」の0.1を十分に下回る）が、次に見るべき箇所です。

## 任意のアプリを自分で測る
ここまでの手順は、競合のアプリを含めどのアプリにも使え、アプリのコードへのアクセスも必要ありません。

1. **Shopifyの3ページを選ぶ**。アプリを設定したストアで、ホーム、アプリが有効な商品ページ、コレクションページです。
2. **アプリのURLを見つける**。ブラウザのネットワークパネルで、ShopifyのCDN上のアセット（拡張機能の `assets/` フォルダー）と、ストアのドメイン配下のアプリプロキシのパスを探します。
3. **1ラウンドにつきLighthouseのモバイルを2回実行する**。1回は通常どおり、もう1回はそれらのURLを遮断して（Lighthouse CLIの `--blocked-url-patterns`、パターンごとに1つ）。同じHTML、同じストア、同じ時間帯です。
4. **少なくとも5ラウンド**、交互に実行し、中央値を比べます。ページは17/40/43で加重します。前後1組だけの比較は根拠になりません。私たち自身の実行でも、同じページで最大17ポイントの差がありました。
5. **スコアだけでなく診断を読む**。描画をブロックするリソース、「JavaScriptの実行時間」の中のアプリの行、操作前に出るリクエスト、アプリの要素付近のレイアウトのずれです。
6. **次にフィールドデータを確認する**。変更から数日後に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アプリの評価方法](/blog/shopify-b2b-app-evaluation-checklist)に、ストア側のセキュリティ診断は[Shopify B2Bのセキュリティ診断チェックリスト](/blog/shopify-b2b-security-review-checklist)にあります。

## QuotWayの位置づけ
上の計測はQuotWayのストアフロント拡張機能のものです。すべてのページのアプリ埋め込みに加え、マーチャントが置く[見積ボタン](/features/quote-requests)とカートボタンのブロック、任意の価格表示ブロックで構成されます。無料のLiteプランを含むすべてのプランで動きます。プランごとの内容は[料金ページ](/pricing)に、ストアフロントの選択肢をプランごとにまとめたものは[QuotWayにできること、できないこと](/capabilities)にあります。ストアフロント、見積レイヤー、Shopifyがどう役割を分けるかは[Shopifyに置くものと見積レイヤーに置くもの](/blog/shopify-b2b-quote-architecture)をご覧ください。

## よくある質問

### 見積アプリは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の要件](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements)：10ポイントの規則、theme app extension、アンインストール時の削除
- [アプリのストアフロントのパフォーマンス](https://shopify.dev/docs/apps/build/performance/storefront)：前後比較の方法、モバイル、17/40/43の加重
- [theme app extensionの設定](https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration)：強制される上限と推奨される上限
- [ScriptTag](https://shopify.dev/docs/api/admin-graphql/latest/objects/ScriptTag)：vintageテーマのみ
- [テーマのパフォーマンスのベストプラクティス](https://shopify.dev/docs/storefronts/themes/best-practices/performance)：asyncとdefer、描画をブロックするアプリ、操作時のJavaScript
- [ウェブパフォーマンスダッシュボード](https://help.shopify.com/en/manual/online-store/web-performance/web-performance-dashboard)：フィールドのCore Web Vitalsとしきい値

私たちの計測：2026年9月28日のLighthouse実行42回。データセットと設定は[storefront-lighthouse-2026-09-28.json](/data/storefront-lighthouse-2026-09-28.json)にあります。QuotWayの読み込みの振る舞いは、その拡張機能のソースコードに基づいて説明しています。