Shopify ストア速度の最適化: 完全ガイド

ページの読み込み時間が 1 秒遅れると、e コマース ストアではコンバージョンの 7% が損失になります。 Shopify ストアのスピードは贅沢ではありません。それは収益に直結します。このガイドでは、ストアの速度を低下させている 6 つの最大の原因を明らかにし、それらを修正する方法を正確に示します。

Shopify ストアのスピードが売上にとって重要な理由

Google は、ページ読み込みが 100 ミリ秒遅れるとコンバージョンが 1% 低下する可能性があることを示す調査結果を発表しました。月収 50,000 ドルの店舗の場合、10 分の 1 秒増えるごとに 500 ドルが失われることになります。速度はユーザー エクスペリエンス以上の影響を及ぼします。これは Google 検索の中核となるランキング要素です。

Shopify 販売者は独特の課題に直面しています。すべての資産を管理する自己ホスト型サイトとは異なり、何百万もの店舗をホストする共有プラットフォーム上に構築されています。テーマ、アプリ、サードパーティのスクリプトはすべて帯域幅をめぐって競合します。 Shopify のインフラストラクチャが世界クラスであっても、最適化が不十分なストアでは動作が遅く感じることがあります。

遅い店舗は信頼を損なうことにもなります。ユーザーは、チェックアウトが即時に行われることを期待しています。支払いページのドラッグは、特にモバイルでのリスクを示します。速度の向上は、多くの場合、カート放棄の減少と顧客生涯価値の向上と相関します。

Shopify ストアの速度を測定する方法

速度を修正するにはデータが必要です。ほとんどの商人は何が問題なのか推測しています。適切な指標は、どこに焦点を当てるべきかを正確に示します。

Google PageSpeed Insights

ここから始めましょう。訪問 pagespeed.web.dev Shopify ストアの URL を入力します。 PageSpeed Insights は、実際のユーザー エクスペリエンス (フィールド データ) とラボのパフォーマンスを測定します。 0 ～ 100 のスコアを割り当て、特定の問題にフラグを立てます。

まず「Core Web Vitals」セクションに注目してください。これら 3 つの指標は、ユーザー エクスペリエンスと検索ランキングに直接影響します。 90 を超えるスコアは優れています。 50 以上は許容されます。 50未満の場合は直ちに対応が必要です。

ホームページと製品ページをテストします。ホームページやコレクション ページは、画像数やアプリ スクリプトにより、個々の商品ページとは異なる方法で読み込まれることがよくあります。

Shopify に組み込まれたオンライン ストア速度レポート

Shopify 管理者にログインし、[販売チャネル] > [オンライン ストア] > [テーマ] に移動します。 「現在のテーマを開く」をクリックし、「オンラインストアの速度」を探します。このレポートはパフォーマンスの傾向を示し、ストアの速度を低下させているアプリを特定します。

速度レポートは、実際の訪問者からの実際のユーザー データに基づいています。ラボでのテストよりも、特定の視聴者やトラフィック パターンに対して正確です。毎月チェックして進捗状況を追跡します。

GTmetrix と WebPageTest

GTmetrix と WebPageTest は、ページ上のすべてのリソースの読み込みシーケンスを示すウォーターフォール チャートを提供します。これらにより、どのスクリプトがレンダリングをブロックし、どのアセットが帯域幅を浪費しているかが明らかになります。

これらを使用して、特定の遅いアセットを詳しく調べます。たとえば、製品画像の前にアプリ スクリプトが読み込まれている場合、それが優先的に修正されます。これらのツールはより技術的ですが、月収 10 万ドルを超える店舗を管理する販売者にとっては学ぶ価値があります。

Shopify ストアが遅くなる 6 つの最大の原因

1. 最適化されていない画像

画像は、典型的な Shopify ストアのページ重量の 50 ～ 70% を占めます。カメラから取得した非圧縮の製品写真は 3 ～ 5 MB になる場合があります。最適化せずに Shopify に直接アップロードすると、パフォーマンスが低下します。

Shopify は CDN を通じて画像を自動的に提供し、レスポンシブなバリアントを作成しますが、圧縮はしません。幅 500 ピクセルで表示される 4000x3000 ピクセルの画像でも、最大解像度が読み込まれ、ブラウザーによってサイズが変更されます。

WebP などの最新の画像形式は、同じ品質の JPG よりも 25 ～ 35% 小さくなります。ほとんどの販売者はそれらを使用していません。遅延読み込み (以下で説明) と組み合わせると、多くの場合、最適化された画像が最大の効果をもたらします。

2. サードパーティ製アプリが多すぎる (特にスクリプトを挿入するアプリ)

平均的な Shopify ストアでは 20 ～ 30 のアプリが実行されます。各アプリはストアフロントに JavaScript を挿入できます。スクリプトが増えると、ページの読み込みが遅くなり、CPU 負荷が増加し、Core Web Vitals メトリクスが長くなります。

一部のアプリは避けられません。支払い処理、電子メールのキャプチャ、レビュー。これらは付加価値をもたらします。しかし、多くの販売業者は、実際に使用されているかどうかを監査せずにアプリをインストールします。

最悪の犯人は、ユーザーの行動を追跡するマーケティング アプリ、ロイヤルティ プログラム、ビジュアル パーソナライゼーション ツールです。これらは、すべてのページに重い JavaScript バンドルをダウンロードします。レビュー アプリのコーディングが不十分な場合、LCP (Largest Contentful Paint) に 300 ミリ秒が追加される可能性があります。

3. テーマの肥大化またはコード化が不十分である

Shopify テーマが基礎となります。一部のテーマには、jQuery、未使用の CSS フレームワーク、および古いライブラリがバンドルされています。 10 年前のテーマでは、もはや何の役にも立たない依存関係が読み込まれる可能性があります。

有料のプレミアム テーマは、軽量の無料テーマよりも肥大化することがよくあります。彼らはすべてを実行することを目的としています。つまり、使用しない機能のコードをロードすることになります。カスタマイズレイヤーはさらに重みを加えます。

テーマの一般的な問題: 未使用のカスタム フォント、CSS のインライン Base64 イメージ、複数のブートストラップ バージョン、および重複したユーティリティ ライブラリ。テーマのコードを監査して、デッドウェイトを特定します。

4. 大規模な JavaScript バンドルとレンダリングをブロックするスクリプト

JavaScript の実行にはコストがかかります。テーマの JavaScript が実行されている間、ブラウザはページをペイントできません。スクリプトが大きい場合、または順序が不十分な場合、訪問者にとってページは固まっているように感じられます。

多くの場合、アプリからのサードパーティ スクリプトは同期的に読み込まれます。つまり、他のすべてがブロックされます。 Shopify のネイティブ スクリプト マネージャーでは非同期読み込みが可能ですが、多くのアプリはそのパターンに従っていません。

多くのストアでは、ページがインタラクティブになる前に、追跡ピクセル、分析、チャット ウィジェット、コンバージョン最適化スクリプトを読み込みます。これらにより、インタラクティブまでの時間 (TTI) が 2 ～ 3 秒増加する可能性があります。

5. スクロールせずに見える画像に遅延読み込みを行わない

訪問者が下にスクロールしなくても、商品ページ上のすべての画像はすぐに読み込まれます。これにより、決して表示されない画像に帯域幅が浪費されます。

遅延読み込みでは、ユーザーがスクロールして表示されるまで画像の読み込みが延期されます。画像の最適化と組み合わせると、最初のページの読み込み時間を 30 ～ 50% 短縮できます。

過去 3 年間に構築された Shopify テーマには遅延読み込みが組み込まれていることがよくありますが、古いテーマには組み込まれていません。テーマがサポートしている場合は簡単に成功します。 loading="lazy" 属性。

6. CDN キャッシュの欠落または誤った構成

Shopify は CDN を通じて画像を世界中に提供していますが、これは優れています。ただし、ヘッダーのキャッシュとブラウザーのキャッシュ ポリシーが誤って構成されている可能性があります。

一部のストアではアセットにキャッシュ ヘッダーを設定していないため、ブラウザーはアクセスするたびに静的ファイルを再検証または再ダウンロードする必要があります。キャッシュの有効期間を短く設定しているものもあります (例: 30 日ではなく 1 日)。

誤って設定されたキャッシュは PageSpeed Insights には表示されませんが、繰り返し訪問する場合はパフォーマンスが低下します。テーマのキャッシュ設定を確認し、Shopify の CDN が適切に構成されていることを確認してください。

Shopify ストアを高速化する方法: 実用的な修正

画像の最適化

一括イメージ監査から始めます。製品イメージをダウンロードして実行してください tinypng.com またはイメージオプティム。品質を損なうことなくどれだけの重量を削減できるかがわかります。

Shopify の場合、幅 2000 ～ 2500 ピクセル以下の画像をアップロードすることがベスト プラクティスです。 Shopify の CDN は、モバイルとデスクトップに合わせてこれらのサイズを自動的に変更します。 「念のため」6000ピクセルの画像をアップロードすることは避けてください。

数百の商品がある場合は、専用の画像最適化アプリの使用を検討してください。 Crush.pics や Image Optimizer などのアプリは、カタログ全体の圧縮を自動化します。多くの場合、数週間以内に帯域幅の節約で元が取れます。

スクロールせずに見える画像の遅延読み込みを実装します。最新の Shopify テーマのほとんどはこれをネイティブでサポートしています。そうでない場合は、 loading="lazy" テーマコード内の製品画像に属性を付けます。

アプリの監査

インストールしたすべてのアプリをリストします。それぞれを確認して、「これを積極的に使用していますか?」と尋ねます。それは私のビジネス目標に役立ちますか?

使用していないものはすべてアンインストールします。次に、アクティブなアプリについて、Shopify の速度レポートでその影響を確認します。ミリ秒レベル (50 ミリ秒未満) の影響があるアプリは、通常は問題ありません。 200ms 以上を追加するアプリは再検討する価値があります。

アプリが不可欠だが遅い場合は、開発者に連絡してください。多くのアプリ メーカーは、スクリプト配信を最適化したり、非同期読み込みの代替手段を提供したりできます。場合によっては、設定を変更するとパフォーマンスが大幅に向上します。

テーマの最適化

テーマのコードを監査します。ほとんどの Shopify ストアは、[管理] > [テーマ] > [アクション] > [コードの編集] からテーマ ファイルにアクセスできます。肥大化を探します。

• 未使用の CSS フレームワークまたはユーティリティ ライブラリ
• 実際にはどのページにも表示されないカスタム フォント
• 遅延可能なインライン JavaScript
• 同じライブラリの複数のバージョン (jQuery、Bootstrap など)
• サポートされなくなった古いブラウザ用の古いポリフィル

テーマが 3 年以上古い場合は、最新の Shopify テーマにアップグレードすることを検討してください。新しいテーマはパフォーマンスを念頭に置いて構築されており、現在の Web 標準を使用しています。現在のテーマが売上の伸び悩みである場合、コストをかける価値はあります。

JavaScript と CSS

重要ではない JavaScript を延期します。 Shopify のスクリプト エディターを使用すると、スクリプトを非同期または遅延としてマークできます。これにより、ページ ペイントがブロックされるのを防ぎます。

可能な場合は CSS ファイルを縮小して結合します。複数の CSS ファイルは、複数の HTTP リクエストを意味します。最新のテーマ ビルダーのほとんどはこれをすでに実行していますが、カスタム テーマでは実行されていない場合があります。

使用していない CSS を削除します。 PurgeCSS などのツールは、ページに適用されていない CSS ルールを特定し、それらを削除できます。これだけで CSS バンドルのサイズを 40 ～ 60% 削減できます。

遅延読み込み

すべてのスクロールせずに見える画像の遅延読み込みを有効にします。一般的な Shopify 製品ページには、関連製品、レビュー、フッター セクションが含まれます。

HTML 属性を追加します。 <img src="..." loading="lazy">。最新のブラウザは残りを自動的に処理します。カスタム セクションの画像の場合は、次のような JavaScript 遅延読み込みライブラリが必要になる場合があります。 lozad.js。

モバイルでテストします。画像の読み込みが遅すぎると、遅いネットワークを使用している訪問者には空白が表示される可能性があります。スクロールせずに見える画像の遅延読み込みと積極的な事前読み込みのバランスをとります。

CDN とキャッシュ

Shopify の CDN が画像に対してアクティブであることを確認します。 Shopify 管理画面では、すべての画像を次の場所から提供する必要があります。 cdn.shopify.com。カスタム ドメイン URL が表示される場合は、構成が古い可能性があります。

テーマの構成ファイルにキャッシュ ヘッダーを設定します。 Shopify の推奨時間は通常、バージョン管理されたアセットの場合は 30 日、CSS/JS の場合は 1 日、HTML の場合は 5 分です。これにより、再訪問者は再ダウンロードするのではなく、キャッシュからロードできるようになります。

Cloudflare を使用する場合は、静的アセットを積極的にキャッシュするように構成します。キャッシュ ポリシーが競合すると、速度にペナルティが発生します。明確なルールを設定し、変更後に新しいブラウザ セッションでテストします。

Shopify Core Web Vitals: LCP、CLS、INP の説明

Google の Core Web Vitals は、検索ランキングとユーザー エクスペリエンス スコアに直接影響を与える 3 つの指標です。 Shopify は、これらを速度レポートで具体的に明らかにしています。

LCP (最大コンテンツフルペイント) 最大のテキスト ブロックまたは画像がビューポートに入るまでの時間を測定します。目標：2.5秒以内。 Shopify の速度低下の問題のほとんどは、LCP の低下として現れます。最適化されていない画像、レンダリングをブロックするスクリプト、および遅いサードパーティのリソースはすべて、LCP を拡張します。

CLS (累積レイアウトシフト) ページ要素の読み込み時の予期しない動きを測定します。目標：0.1未満。 CLS の古典的な問題は、予約されたスペースなしで画像が読み込まれ、テキストが下に飛んでしまうというものです。または、ページの中央に表示され、すべてをシフトするチャット ウィジェット。 CLS によって体感パフォーマンスが低下することはほとんどありませんが、ユーザー エクスペリエンスと SEO にダメージを与えます。

INP (次のペイントへのインタラクション) 応答性: ユーザーのクリックまたはタップにページがどれだけ速く応答するかを測定します。目標: 200 ミリ秒未満。大量の JavaScript の実行、最適化されていないイベント リスナー、不適切にコーディングされたインタラクティブ要素は INP に悪影響を及ぼします。

Shopify ストアは通常、LCP (通常は画像や遅いアプリ) に最も苦労し、次に CLS (遅延読み込みコンテンツからのレイアウトの変化) に苦労します。 3 つすべてを改善するには、最初に画像を最適化し (LCP への影響が最大)、動的コンテンツ用のスペースを予約し (CLS を修正)、JavaScript 実行時間を監査します (INP を改善)。

速度の最適化のために Shopify 開発者を雇うタイミング

自分で多くのことを最適化できます。ただし、一部の問題には開発者の専門知識が必要です。助けを求める時期が来たときの 3 つの兆候は次のとおりです。

PageSpeed スコアは 50 を超えることはありません アプリを削除し、画像を最適化した後でも。これは通常、テーマまたはコア アプリにコード レベルの修正が必要であることを意味します。開発者は、テーマ コードのボトルネックを特定し、レンダリング順序を最適化し、管理者では実行できない高度なキャッシュ戦略を実装できます。

LCP が 4 秒を超えていますが、その理由がわかりません。 GTmetrix のウォーターフォール チャートには問題が示されていますが、問題を修正するには、カスタム JavaScript、テーマの変更、またはアプリ ベンダーとの非同期読み込みの交渉が必要になる場合があります。開発者はどのレバーを引くべきかを知っています。

広告に毎月何千ドルも払っているので、すべてのコンバージョンが重要になります。 大規模な場合、0.5 秒の改善は数千ドルの追加収益を意味します。 DIY 最適化により 80% の利益が得られます。最後の 20% には、専門的なパフォーマンス エンジニアリングが必要です。

Devmerx は Shopify の速度最適化を専門としています。私たちはあなたのストアを監査し、正確なボトルネックを特定し、コアウェブバイタルをグリーンに押し上げる修正を実装します。私たちをチェックしてください Shopifyのサービス または 無料のスピード監査を予約する あなたのストアで何が可能かを確認してください。

よくある質問

Shopify テーマはページ速度に影響しますか?

はい、かなりです。使用するテーマとそのカスタマイズの程度に応じて、テーマはページの読み込み時間の 30 ～ 60% を占めます。適切にコーディングされたモダンなテーマは 1 ～ 2 秒で読み込まれます。肥大化して古くなったテーマでは、アプリや画像を追加するまでに 3 ～ 4 秒かかる場合があります。 PageSpeed の使用率が 50 未満で、アプリが最適化されている場合は、テーマに問題がある可能性があります。

Shopify アプリの数は多すぎますか?

魔法の数字はありません。ほとんどのストアは 15 ～ 25 個のアプリで問題なく機能します。影響は、アプリの動作とそのコーディング方法によって異なります。コーディングが不十分な 1 つのアプリが、適切に最適化された 5 つ以上のアプリに悪影響を与える可能性があります。カウントではなく、パフォーマンスへの影響によって監査します。Shopify の速度レポートを使用して、どのアプリが最も多くのミリ秒を追加したかを確認します。

アプリを削除するとすぐにスコアが向上しますか?

通常はそうですが、常に目に見えるわけではありません。 PageSpeed Insights では、1 つのアプリを削除した後に 10 ポイントのジャンプが表示されない場合があります。しかし、実際の訪問者は違いを感じるでしょう。ページのレンダリングが速くなり、ボタンの反応が速くなり、ユーザーはあなたのストアをよりモダンなものとして認識します。アプリを削除してから 24 ～ 48 時間待ってから、テストを再実行してください。

最速の無料の Shopify テーマは何ですか?

Shopify の公式 Dawn テーマは常に最速のテーマの 1 つです。軽量で、現在の Web 標準に基づいて構築されており、ほとんどのストアで PageSpeed のスコアが 85 以上です。他の高速無料テーマには、Prestige や Refresh などがあります。ブランドに合わない最速のテーマは役に立ちません。デザイン目標に合ったテーマを選択し、それを最適化します。

速度の最適化は、Shopify 販売者が行うことのできる投資の中で最も ROI が高い投資の 1 つです。無料の成果 (画像圧縮、アプリ監査、遅延読み込み) から始めて、その影響を測定します。天井にぶつかったら、 無料のスピード監査を予約する Devmerx チームと協力して、何があなたのストアを妨げているのかを正確に説明します。