Shopify 速度の最適化: ストアの読み込みを高速化する 10 の実証済みの方法

Shopify ストアが遅いとコストがかかります。調査によると、サイト速度が 100 ミリ秒向上するごとに、小売サイトのコンバージョンが最大 8.4% 増加します。 Google はランキング要素として Core Web Vitals を使用しています。つまり、遅い店舗は検索結果でのランクが低くなり、オーガニック トラフィックが失われます。以下の最適化を実装した平均的な Shopify ストアでは、ページの読み込み時間が 30 ～ 50% 改善されています。

Q: Shopify ストアの適切なページ速度スコアはどれくらいですか?

優れた Shopify ストアは、モバイルでは 70 以上、デスクトップでは 90 以上の Google PageSpeed Insights スコアを目指す必要があります。 Core Web Vitals の場合は、最大コンテンツフル ペイント (LCP) が 2.5 秒未満、初回入力遅延 (FID) が 100 ミリ秒未満、累積レイアウト シフト (CLS) が 0.1 未満であることを目標にします。

Shopify ストアのスピードが重要な理由

ページ速度は、次の 3 つの重要なビジネス指標に直接影響します。

1. コンバージョン率 -- 読み込み時間が 1 秒遅れると、コンバージョンが約 7% 減少します。
2. 検索ランキング -- Google は、特にモバイルで、検索結果で読み込みの速いページを優先します。
3. 直帰率 -- モバイル訪問者の 53% が、読み込みに 3 秒以上かかるサイトを放棄します

これらの指標を理解することが最初のステップです。ここでは、Shopify ストアを高速化するための実証済みの 10 のテクニックを紹介します。

1. 画像の最適化と圧縮

通常、画像は Shopify ストアで最大のアセットであり、ページの総重量の 50 ～ 70% を占めます。 Shopify ストアが遅くなる最も一般的な原因は、最適化されていない商品写真です。

画像最適化チェックリスト:

• 画像を WebP または AVIF 形式に変換します (同等の品質で JPEG より 30 ～ 50% 小さくなります)
• 画像のサイズを最大表示サイズに変更します (800 ピクセルの表示スロットには 4000 ピクセルの画像をアップロードしないでください)
• | image_url Liquid フィルターで画像を参照することで、Shopify の組み込み画像 CDN を使用します
• 明示的な width および height 属性を設定して、累積的なレイアウト シフトを防止します。
• 目に見える品質の低下なしに、製品画像をそれぞれ 200KB 未満に圧縮します

Q: Shopify 製品にはどの画像サイズを使用すればよいですか?

商品画像は最大2048x2048ピクセルでアップロードしてください。 Shopify の CDN はレスポンシブ サイズを自動的に生成します。コレクション バナーとヒーロー画像の場合、80% JPEG 品質の 1920x1080 ピクセルにより、鮮明さとファイル サイズのバランスが取れています。

2. 遅延読み込みを実装する

遅延読み込みでは、ユーザーがスクロールするまで、オフスクリーンの画像やビデオの読み込みが延期されます。これにより、ブラウザーはすぐに表示されるもののみをダウンロードするため、最初のページの読み込み時間が大幅に短縮されます。

最新の Shopify テーマ (オンライン ストア 2.0 以降) のほとんどには、ネイティブの遅延読み込みが含まれています。スクロールしないと見えない部分にあるイメージ タグの loading="lazy" 属性をチェックして、この機能が有効になっていることを確認します。 LCP メトリクスが遅れるため、最初のビューポート (スクロールせずに見える部分) に画像を遅延読み込みしないでください。

3. 不要なアプリを監査して削除する

すべての Shopify アプリは JavaScript と CSS をストアフロントに挿入します。管理パネルでのみ動作するアプリであっても、コードが残存することがあります。平均的な Shopify ストアには 6 ～ 8 個のアプリがインストールされていますが、多くのストアでは時間の経過とともに 15 ～ 20 以上のアプリが蓄積されます。

アプリ監査プロセス:

1. [設定] > [アプリと販売チャネル] にインストールされているすべてのアプリをリストします。
2. 各アプリについて、「このアプリは測定可能な価値を提供しますか?」と尋ねます。
3. 使用しなくなったアプリをアンインストールする
4. テーマ エディターのコード ビューを使用して、以前にアンインストールしたアプリから残っているコードを確認します。
5. 重複する機能を統合します (例: 3 つの別個のポップアップ アプリを 1 つに置き換えます)

最適化が不十分なアプリを 1 つ削除すると、読み込み時間が 0.5 ～ 2 秒短縮される可能性があります。監査後、ストアの速度をテストして影響を測定します。

4. JavaScript の縮小と延期

JavaScript はデフォルトでレンダリング ブロックになっており、スクリプトがダウンロードされて実行されるまでブラウザはページのレンダリングを一時停止します。 JavaScript の削減と延期は、LCP と FID の両方を改善するために重要です。

テクニック:

• 重要ではないスクリプト タグで defer または async 属性を使用する
• 分析スクリプトと追跡スクリプトをメイン コンテンツの後にロードするように移動します。
• テーマ ファイルから未使用の JavaScript を削除します
• 複数の小さなスクリプトを少数のファイルに結合して、HTTP リクエストを削減します。
• Shopify の組み込み content_for_header は慎重に使用してください。遅延できない重要なスクリプトが読み込まれます。

5. テーマコードを最適化する

Shopify テーマの Liquid テンプレート、CSS、JavaScript はページの速度に直接影響します。テーマの最適化は、実行できる変更の中で最も大きな影響を与える変更の 1 つです。

テーマの最適化戦略:

|エリア |アクション | |------|----------| | CSS |未使用の CSS ルールを削除し、スタイルシートを結合し、重要な CSS をインライン化します。 |液体 |ネストされたループを削減し、高価な操作をキャッシュし、不必要な API 呼び出しを回避します。 |フォント |カスタム フォントを最大 2 ファミリーに制限するには、font-display: swap | を使用します。 |セクション |ページ全体をリロードする代わりに、動的コンテンツにセクション レンダリング API を使用する | |資産 |ヒーロー画像やプライマリフォントなどの重要なアセットをプリロード |

テーマが古い (Online Store 2.0 以前) 場合は、Shopify の最新アーキテクチャに基づいて構築された最新のテーマに移行することを検討してください。プロフェッショナル テーマ開発 は、ストアが最初から最適化されたコードを使用することを保証します。

6. ブラウザのキャッシュを活用する

Shopify CDN はほとんどのキャッシュを自動的に処理しますが、サードパーティのリソースや動的コンテンツのキャッシュを改善することができます。

• サードパーティのスクリプトが適切なキャッシュ ヘッダーを設定していることを確認します。
• Shopify のセクション レンダリング API を使用して、ページ セクションを個別にキャッシュします
• 次のページに移動する可能性のある予測プリフェッチを実装します。
• 必要な場合を除き、静的アセットに対するキャッシュ無効化クエリ パラメーターを回避します。

7. HTTP リクエストを減らす

ブラウザがダウンロードする各ファイル (画像、スクリプト、スタイルシート、フォント) には、個別の HTTP リクエストが必要です。リクエストの総数を減らすと、ページのレンダリングが高速化されます。

削減戦略:

• 可能な場合は CSS ファイルを結合します
• 個別の画像ファイルではなく、CSS スプライトまたはインライン SVG をアイコンに使用します
• 複数のアイコン画像の代わりにアイコンフォントまたはSVGシンボルシステムを実装します。
• ソーシャルメディア埋め込みスクリプトを削除し、代わりに静的リンクを使用します
• 不要なサードパーティ製ウィジェット (ライブ チャット バッジ、通知ポップアップ) を削除します。

一般的な最適化されていない Shopify ストアでは、ページ読み込みごとに 80 ～ 120 の HTTP リクエストが行われます。最適化された店舗では、これを 40 ～ 50 未満に抑えます。

8. スクロールせずに見える範囲のコンテンツを最適化する

ユーザーが最初に目にするコンテンツ (スクロールせずに見える部分) は、できるだけ速く読み込まれる必要があります。これにより、LCP スコアが直接決まります。

優先読み込みテクニック:

1. テーマのヘッドで <link rel="preload"> を使用して ヒーロー画像をプリロード
2. スクロールせずに見えるコンテンツの インラインクリティカル CSS により、外部スタイルシートが読み込まれる前にレンダリングされます。
3. ヒーロー セクションでは カルーセルとスライダーを避ける (複数の画像と重い JavaScript が読み込まれます)
4. 最初のレンダリングにはシステム フォントを使用し、font-display: swap 経由で Web フォントを段階的にロードします
5. スクロールせずに見える範囲の DOM 要素を最小化して、レンダリングの複雑さを軽減します

9. モバイルのパフォーマンスを最適化する

Shopify トラフィックの 70% 以上は、デスクトップ コンピュータよりもプロセッサとネットワーク接続が遅いモバイル デバイスからのものです。モバイルの最適化はオプションではありません。

モバイル固有の最適化:

• ブラウザエミュレータだけでなく、実際のデバイスでテストします
• モバイル ヒーローの画像サイズを縮小します (幅 768 ピクセルで十分です)
• モバイル ナビゲーションを簡素化し、DOM の複雑さを軽減します
• モバイルでデスクトップのみの機能を無効にするか延期する
• タッチ スクリーンでは機能しない、ホバー依存のインタラクションを避ける
• モバイルのコレクション ページに表示される商品の数を最小限に抑える

Google のモバイル ファースト インデックスは、モバイルのパフォーマンスがすべてのデバイスの検索ランキングに直接影響することを意味します。

10. コア Web バイタルを継続的に監視する

速度の最適化は 1 回限りの作業ではありません。新しいアプリ、コンテンツの変更、テーマの更新により、時間の経過とともにパフォーマンスが低下する可能性があります。

監視設定:

• Google Search Console -- Core Web Vitals レポートには実際のユーザーからのフィールド データが表示されます
• Google PageSpeed Insights -- 特定の URL 分析のためのラボ データ
• Shopify の Web パフォーマンス ダッシュボード -- 管理画面に組み込まれた速度指標
• Chrome ユーザー エクスペリエンス レポート (CrUX) -- 28 日間のローリング フィールド データ

毎月のパフォーマンスレビューを設定します。 Core Web Vital が「良好」のしきい値を下回っている場合は、直ちに問題を調査して解決してください。

2026 年のコア Web Vitals 目標:

|メトリック |良い |改善が必要 |悪い | |--------|------|--------|------| | LCP | < 2.5 秒 | 2.5秒～4.0秒 | > 4.0秒 | | FID | < 100ms | 100ミリ秒 - 300ミリ秒 | > 300ミリ秒 | | CLS | < 0.1 | 0.1～0.25 | > 0.25 | | INP | < 200ms | 200ミリ秒 - 500ミリ秒 | > 500ミリ秒 |

プロフェッショナルな速度の最適化

これら 10 のテクニックはどの店舗オーナーにとっても実践可能ですが、可能な限り最高のパフォーマンスを達成するには、多くの場合、深い技術的専門知識が必要です。 ECOSIRE の Shopify 速度最適化サービス には、包括的な監査、テーマレベルのコード最適化、アプリのパフォーマンス分析、継続的な監視が含まれています。

私たちはストアが読み込み時間を最大 60% 短縮し、すべてのページで一貫した「良好」な Core Web Vitals スコアを達成できるよう支援してきました。 Shopify ストアの無料のスピード監査については、チームにお問い合わせください。

重要なポイント

• 画像の最適化は、ほとんどの店舗にとって最も大きな影響を与える単一の改善です
• 不要なアプリはすべてパフォーマンスを低下させます -- 四半期ごとに監査します
• モバイルのパフォーマンスが検索ランキングを決定します
• Core Web Vitals は、漠然とした目標ではなく、測定可能な目標です
• 速度の最適化には、1 回限りの修正ではなく、継続的なモニタリングが必要です

これら 10 のテクニックを体系的に実装し、それぞれの変更の影響を測定すると、Shopify ストアの読み込みが速くなり、ランクが上がり、より多くの訪問者を顧客に変えることができます。