Shopify の速度の最適化: 2026 年の主要なウェブの重要性

2026 年、Shopify の速度最適化には、画像配信、JavaScript の実行、レンダリング ブロック リソース、サードパーティ スクリプト、そしてインタラクティブ品質を測定する新たな INP 指標など、パフォーマンス スタック全体に対処する必要があります。このガイドでは、すべてのコア ウェブ バイタルにわたって Shopify ストアを「改善が必要」ゾーンから「良好」ゾーンに移行するための具体的なテクニックを説明します。

重要なポイント

• 2.5 秒を超える LCP (Largest Contentful Paint) は、Shopify ストアで最も一般的な Core Web Vital エラーです
• ヒーロー画像は、Shopify 製品およびホームページのレイアウトの 80% 以上に含まれる LCP 要素です。特に最適化します。
• INP (Interaction to Next Paint) は 2024 年に FID に置き換わりました — 最初のページだけでなく、すべてのページ インタラクションを測定します
• アプリ スクリプトは主にパフォーマンスを低下させる要因です。各アプリの平均サイズは 30 ～ 100 KB、ブロック時間は 150 ～ 300 ミリ秒です。
• Shopify のネイティブ CDN は画像配信を処理しますが、形式の選択 (WebP または AVIF) には明示的な構成が必要です
• CLS は通常、寸法のない画像、埋め込みの遅延、フォント スワップ リフローによって発生します。
• Shopify サーバーでのリキッド レンダリング時間は平均 50 ～ 200 ミリ秒です。複雑なテンプレートではこれが何倍にもなります
• 1 秒間の LCP の改善は、e コマースのコンバージョン率の 10 ～ 15% の向上と相関関係があります。

---

現在のパフォーマンスのベースラインを測定する

最適化する前に測定してください。ベースラインがなければ、改善を定量化したり、最も大きな影響を与える機会を特定したりすることはできません。

主な測定ツール:

PageSpeed Insights を正しく読む:

PageSpeed Insights には、「ラボ データ」（シミュレートされた、制御されたデータ）と「フィールド データ」（Chrome からの実際のユーザー）の両方が表示されます。ランキングの目的で、Google はフィールド データ (CrUX) を使用します。ラボ データは修正の診断とテストに役立ちますが、フィールド データは実際の立ち位置を示します。

コア ウェブ バイタルのしきい値:

ベースライン測定の実行:

1. PageSpeed Insights (pagespeed.web.dev) を開きます。
2. これらの主要なページをテストします: ホームページ、プライマリ コレクション ページ、ベストセラー製品ページ、カート ページ
3. モバイルとデスクトップの両方の LCP、INP、および CLS 値を記録します。 4.「機会」セクションと「診断」セクションのスクリーンショットを作成します。
4. これがベースラインです - 各最適化スプリントの後に再テストします

---

LCP の最適化: ヒーロー画像の問題

LCP は、表示される最大のコンテンツ要素が完全にレンダリングされる時間を測定します。 Shopify ストアでは、ほとんどの場合、これはホームページのヒーロー画像、または製品ページのメインの製品画像です。

LCP 要素の診断:

Chrome DevTools > [パフォーマンス] タブを開き、ページの読み込みを記録します。タイムラインで「LCP」マーカーを探します。あるいは、DevTools コンソールで次のコマンドを実行します。

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP element:', lastEntry.element);
  console.log('LCP time:', lastEntry.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

ヒーロー画像の最適化シーケンス:

ステップ 1 — 正しいサイズで提供します。 Shopify の CDN は、画像 URL のサイズパラメータを受け入れます。幅 2000 ピクセルの画像を 400 ピクセルのモバイル画面に配信しないでください。

<!-- Shopify Liquid: responsive hero image -->
<img
  src="{{ section.settings.image | image_url: width: 1200 }}"
  srcset="{{ section.settings.image | image_url: width: 400 }} 400w,
          {{ section.settings.image | image_url: width: 800 }} 800w,
          {{ section.settings.image | image_url: width: 1200 }} 1200w,
          {{ section.settings.image | image_url: width: 1600 }} 1600w"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  width="1200"
  height="600"
  alt="{{ section.settings.image.alt | escape }}"
  fetchpriority="high"
  loading="eager"
>

ステップ 2 — ヒーロー イメージをプリロードします。 ヒーロー画像専用のプリロード リンク タグを追加します。これにより、ブラウザは HTML 内のイメージ タグに遭遇する前に、最高の優先順位で画像を取得するように指示されます。

<!-- In theme.liquid <head> -->
{% if request.page_type == 'index' %}
  <link rel="preload"
    as="image"
    href="{{ section.settings.hero_image | image_url: width: 1200 }}"
    imagesrcset="{{ section.settings.hero_image | image_url: width: 400 }} 400w,
                 {{ section.settings.hero_image | image_url: width: 800 }} 800w,
                 {{ section.settings.hero_image | image_url: width: 1200 }} 1200w"
    imagesizes="(max-width: 768px) 100vw, 80vw"
  >
{% endif %}

ステップ 3 — WebP 形式を確認します。 Shopify の CDN は、ブラウザーが WebP をサポートしている場合、デフォルトで WebP を提供します。画像 URL の Content-Type 応答ヘッダーをチェックして確認します。 WebP は、同等の品質の JPEG と比較して、ファイル サイズを 25 ～ 35% 削減します。

ステップ 4 — ヒーロー画像アニメーションを削除します。 読み込み時にトリガーされる CSS アニメーションは、LCP を遅延させます。ヒーローにフェードインまたはスライドイン効果がある場合、画像は技術的に読み込まれますが、アニメーションが完了するまで「表示」されません。ブラウザーはこれを LCP 遅延としてカウントします。ヒーローのアニメーションを削除するか、animation-delay: 0 と animation-duration: 0.001s を使用して初期ロード時にアニメーションを瞬時に実行します。

製品ページの LCP 最適化:

メインの製品画像によって、製品ページの LCP が決まります。 fetchpriority="high" と loading="eager" をプライマリ製品イメージに追加します。 LCP 測定を妨げる可能性のあるレイアウトのシフトを防ぐために、画像の寸法 (幅/高さの属性) が正しいことを確認してください。

---

INP の最適化: インタラクティブ性の向上

INP (Interaction to Next Paint) は、ユーザーのインタラクション (クリック、キーの押下、タップ) から次に表示される応答までの時間を測定します。 INP が高いということは、ボタンの反応が遅い、フィルターの遅れ、カートの更新に時間がかかりすぎるなど、ストアの操作が遅く感じられることを意味します。

INP の問題の診断:

Chrome DevTools > [パフォーマンス] タブで、「長いタスク」(メインスレッドのタイムラインの赤いマーク) を探します。 50 ミリ秒を超えるタスクは、メインスレッドをブロックし、ユーザー入力への応答を遅らせる「長いタスク」です。

Shopify ストアにおける INP の一般的な原因:

1. 重いアプリ スクリプト: 500 以上の DOM ノードをロードするアプリ、大規模な JavaScript フレームワークを初期化するチャット ウィジェットを確認します。
2. バリアント ピッカー ロジック: バリアント選択時に価格、画像、在庫状況を再計算する複雑な JavaScript
3. カート ドロワーの更新: カートに追加するたびにカート ドロワーを取得して再レンダリングします。
4. 検索アプリの初期化: ページの読み込み時に大規模なインデックスを構築する検索アプリ

INP 削減テクニック:

テクニック 1 — 重要ではない JavaScript を延期する:

<!-- Defer app scripts that are not needed for initial interaction -->
<script src="https://third-party-app.com/widget.js" defer></script>

<!-- Or load after first user interaction -->
<script>
  document.addEventListener('click', function loadHeavyScript() {
    const script = document.createElement('script');
    script.src = 'https://heavy-app.com/widget.js';
    document.body.appendChild(script);
    document.removeEventListener('click', loadHeavyScript);
  }, { once: true });
</script>

テクニック 2 — バリアント選択を最適化する:

同期バリアント計算をデバウンスされた非同期更新に置き換えます。 Shopify Dawn テーマはこれを適切に処理します。テーマにカスタム バリアント ロジックがある場合は、価格と画像の更新で requestAnimationFrame が使用され、メイン スレッドがブロックされないようにします。

テクニック 3 — カート API 呼び出しを最適化する:

インタラクションごとに完全なカートを再取得するのではなく、JavaScript でカートの状態をキャッシュします。更新には Shopify Cart API (/cart.js) を使用し、カートドロワー全体を再レンダリングするのではなく、DOM を段階的に更新します。

---

CLS 最適化: レイアウトのずれの防止

CLS (Cumulative Layout Shift) は、読み込み中のページ要素の予期しない動きを測定します。画像が上に読み込まれるとボタンが飛び降りたり、フォントが読み込まれると価格が変動すると、ユーザー エクスペリエンスが低下し、CLS ペナルティが発生します。

CLS の診断:

Chrome DevTools の [レンダリング] パネルで [レイアウト シフト リージョン] を有効にします。ページをリロードします。レイアウトの変更は青色で強調表示されます。シフト領域をクリックすると、どの要素がいつ、どれだけシフトされたかを確認できます。

Shopify における一般的な CLS の原因:

1. 明示的な寸法のない画像: ブラウザは画像をロードする前にスペースを予約できず、リフローが発生します。

<!-- Wrong: browser doesn't know the dimensions until image loads -->
<img src="{{ product.featured_image | image_url: width: 600 }}" alt="{{ product.featured_image.alt }}">

<!-- Correct: browser reserves exactly the right space -->
<img
  src="{{ product.featured_image | image_url: width: 600 }}"
  width="{{ product.featured_image.width | at_most: 600 }}"
  height="{{ product.featured_image.height | times: 600 | divided_by: product.featured_image.width }}"
  alt="{{ product.featured_image.alt | escape }}"
>

2. Web フォントの読み込みが遅いと FOUT (スタイルのないテキストのフラッシュ) が発生する:

/* Add font-display: swap or optional to all @font-face declarations */
@font-face {
  font-family: 'YourFont';
  src: url('your-font.woff2') format('woff2');
  font-display: swap; /* Text visible in fallback font, swaps when loaded */
}

3. 既存のコンテンツの上に挿入された動的コンテンツ: ヒーローの上に表示されるバナー バー、Cookie 通知、またはアプリ ウィジェットは、コンテンツを下に押し込みます。 CSS position: sticky を使用するか、動的コンテンツ用のスペースを事前に割り当てます。

4. Shopify アナウンス バー: 多くの Shopify テーマは、ページのレンダリング後にアナウンス バーのコンテンツを動的に読み込みます。アナウンス バー コンテナーで CSS min-height を使用して、コンテンツが読み込まれる前にスペースを予約します。

---

サードパーティのスクリプト管理

サードパーティのスクリプトは、Shopify ストアで最も重要かつ最も見落とされているパフォーマンスの問題です。インストールされているすべてのアプリは、アプリの機能がそのページに関連しているかどうかに関係なく、すべてのページにスクリプトを追加する可能性があります。

スクリプトの読み込みを監査しています:

1. Chrome DevTools > [ネットワーク] タブを開きます
2. キャッシュをクリアしてページをリロードします (Ctrl+Shift+R) 3.「JS」タイプでフィルタリングする
3. サイズの降順で並べ替えます
4. cdn.shopify.com から提供されないすべてのスクリプトを特定します。これらはサードパーティのスクリプトです

スクリプト監査ワークシート:

「インタラクション時の負荷」パターンの実装:

// Load chat widget only when user tries to interact with chat button
// This saves 180KB and 450ms for users who never use chat

const chatButton = document.getElementById('chat-trigger');
chatButton.addEventListener('click', function() {
  // Load Intercom (or whatever chat app) here
  window.Intercom('boot', { app_id: 'your_app_id' });
}, { once: true });

カテゴリ別の推奨されるスクリプト読み込み戦略:

---

Shopify テーマの最適化

テーマの Liquid テンプレートと JavaScript アーキテクチャは、パフォーマンスに大きな影響を与えます。

セクション レンダリングの最適化:

Shopify は、Liquid を介してサーバー側でセクションをレンダリングします。多くのメタフィールド検索、大規模なループ、またはネストされたテンプレート呼び出しを含む複雑なセクションでは、サーバーの応答時間が増加します。セクションのプロファイリングを行います。

1.theme.liquid で、重いセクションの前後に {% render 'timer' %} を追加します (Date.now() を出力する timer.liquid スニペットを作成します)。 2. タイムスタンプを比較して、レンダリングに最も時間がかかるセクションを特定します 3. 高価なセクションの最適化: Liquid 変数を使用して結果をキャッシュし、ネストされたループを減らし、条件付きロジックを簡素化します。

JavaScript アーキテクチャ:

最新の Shopify テーマ (Dawn、Sense、Refresh) は、軽量のバニラ JavaScript アーキテクチャを使用します。 Shopify の基本的にサーバーでレンダリングされるページでは、重い JavaScript フレームワークを読み込むテーマ (jQuery 依存のテーマでは 30 KB 以上、React ベースのテーマでは 100 KB 以上が追加されます) を避けるテーマを避けてください。

CSS の最適化:

Shopify の Dawn テーマは、CSS カスタム プロパティと最小限の特異性を使用します。大きな CSS ファイル (100 KB 以上) を含むテーマには、次の利点があります。

• 未使用の CSS の削除 (PurgeCSS または Shopify の組み込みの未使用 CSS 警告)
• CSS を分割し、セクション固有のスタイルを条件付きでロードする
• スクロールせずに見えるスタイルの <head> の <style> タグに重要な CSS をインライン化

遅延読み込み構成:

loading="lazy" をスクロールせずに見えるすべての画像に適用します。重要なルール: LCP イメージ (通常は最初の製品イメージまたはヒーロー) に遅延読み込みを適用しないでください。 Shopify の Dawn テーマはこれを正しく処理します。テーマも同様に処理することを確認してください。

---

最適化後のパフォーマンス監視

パフォーマンスの最適化は 1 回限りのプロジェクトではありません。新しいアプリのインストール、テーマの更新、コンテンツの追加は継続的にパフォーマンスに影響します。

自動監視セットアップ:

1. Core Web Vitals の低下に関する Google Search Console アラートを設定する
2. Calibre または SpeedCurve を使用して、アラート付きの自動毎日のパフォーマンス テストを実行します。
3. 5 つ以上の主要なページにわたる毎月の PageSpeed Insights チェックをスケジュールする
4. テーマの更新プロセスにパフォーマンス チェックを追加します。テーマの更新の前後にテストを実行します。

パフォーマンスの予算:

以下の最大値を定義します。

• 総ページ重量: モバイルの場合は 1.5MB、デスクトップの場合は 2.5MB
• JavaScript ペイロード: 500KB 解析/実行
• LCP: 最大 2.5 秒
• サードパーティ製スクリプトの数: 最大 8

いずれかのメトリクスが予算を超えた場合は、次のリリースの前に調査して修正します。

---

よくある質問

2026 年の Core Web Vitals 向けの最速の Shopify テーマは何ですか?

Shopify の公式 Dawn テーマは、バニラ JavaScript、最小限の CSS、jQuery なし、効率的なセクション レンダリングなど、パフォーマンスを重視して構築されているため、Core Web Vitals テストで常に最高スコアを獲得しています。有料テーマの中でも、Prestige、Impulse、Turbo (Out of the Sandbox による) は一貫して高いスコアを獲得しています。ただし、テーマの選択は構成よりも重要です。平均的なテーマで適切に最適化されたストアは、最速のテーマで不適切に構成されたストアよりもパフォーマンスが優れています。

パフォーマンスを考慮すると多すぎる Shopify アプリは何個ありますか?

厳密な制限はありませんが、相関関係は明らかです。Core Web Vitals では、アプリの数が 5 つ以下のストアが、アプリの数が 15 以上のストアよりも常に優れています。ページレベルの JavaScript を挿入する各アプリにはリスクが追加されます。インストールされているアプリを四半期ごとに監査します。アプリがアクティブに使用されていない場合、または測定可能な ROI を生成していない場合は、アンインストールします。 Shopify からアプリをアンインストールしても、そのスクリプトがテーマ ファイルから必ずしも削除されるわけではないことに注意してください。手動で確認して削除してください。

管理画面の Shopify オンライン ストアの速度スコアは、Google の Core Web Vitals を正確に反映していますか?

いいえ。Shopify の管理速度スコアは、Google の Core Web Vitals とは異なる方法を使用しています。これは方向性的には便利ですが、Search Console の CrUX (実際のユーザー) データと正確に相関しているわけではありません。 SEO 目的の信頼できるパフォーマンス測定ソースとして、常に PageSpeed Insights (CrUX データを表示) と Google Search Console の Core Web Vitals レポートを使用してください。

Shopify の組み込み CDN に加えて CDN を使用できますか?

Shopify のインフラストラクチャでは、アセット配信に Fastly の CDN がすでに使用されています。 Shopify の前に別の CDN (Cloudflare) を追加すると、Fastly の PoP ネットワークのサービスが受けられない地域のパフォーマンスが向上しますが、キャッシュ ルールの競合を避けるために慎重な構成が必要です。ほとんどの販売者は、Cloudflare を Shopify に追加しても大幅なパフォーマンスの向上は見られません。主要な顧客ベースが店舗のパフォーマンスが低い地理的地域にある場合は、特にその顧客に対して Cloudflare をテストしてください。

最適化後、Search Console の Core Web Vitals スコアはどれくらい向上しますか?

Google Search Console の Core Web Vitals レポートは、Chrome からの実際のユーザー データの 28 日間のローリング ウィンドウを使用します。今日行われた改善は、次の 28 日以内にレポートに反映され始めます。レポートは実際のパフォーマンスより遅れています。今日実装された修正は、28 ～ 35 日間 Search Console レポートに完全に反映されない可能性があります。 PageSpeed Insights とラボ テストを使用して、最適化の有効性に関する即時のフィードバックを取得します。

---

次のステップ

多くのアプリ、大規模な製品カタログ、複雑なテーマを備えた Shopify ストアで「良好」な Core Web Vitals スコアを達成および維持するには、継続的な技術的な注意が必要です。

ECOSIRE の Shopify 速度最適化サービス には、Core Web Vitals スコアを維持するための包括的なパフォーマンス監査、LCP/INP/CLS 修復、サードパーティ スクリプト管理、テーマの最適化、月次パフォーマンス モニタリングが含まれます。

Shopify ストアの 無料の Core Web Vitals 監査を受ける と、優先順位付きの最適化ロードマップを 48 時間以内に受け取ります。