オンラインストアのパフォーマンスを向上させる

オンラインストアのパフォーマンスに影響を与える要因はいくつかあり、ご自身で管理できるものもあります。

ウェブパフォーマンスレポートを確認して、あなたのオンラインストアのパフォーマンスを確認しましょう。

管理できない要素

ストアのパフォーマンスに影響を与える可能性があるものの、Shopifyストアの設定や調整では管理できない要因もあります。これには、お客様のデバイスやインターネットの速度といったお客様側の要因だけでなく、Shopifyのインフラストラクチャの更新といったShopify側の要因も含まれます。

お客様のデバイス、ネットワーク、ロケーション

ストアを訪問するお客様は世界中に居住しており、デバイスの種類やインターネット接続の状況はさまざまです。つまり、こうした要因によってストアの読み込み時間が速くなったり、遅くなったりすることがあります。

ストアの速度についてお客様から問い合わせがあった場合は、最新バージョンのブラウザからアクセスしているか、最近キャッシュを消去したか、インターネットサービスプロバイダー側でダウンやパフォーマンス低下が発生していないかをお客様に確認してください。

Shopifyのインフラストラクチャ

Shopifyは高速なグローバルサーバーでオンラインストアをホストしており、ストアの帯域幅を制限しません。Shopifyのステータスから、Shopifyストアのステータスを確認することができます。

Shopifyは、コードとインフラストラクチャを継続的に改善しています。いくつかの改善は、パフォーマンスの指標に反映される可能性があります。

オンラインストアの速度に影響を与える機能には、以下のようなものがあります。

コンテンツ配信ネットワーク (CDN)

CDNはコンテンツ配信ネットワークの略語です。CDNには、管理画面の [コンテンツ] > [ファイル] ページのコンテンツなど、画像やその他のファイルが保存されます。Shopifyがマーチャントに提供しているCDNは、Cloudflareの世界クラスのCDN環境であり、オンラインストアを世界各地ですぐに読み込めるようになっています。CDNのステータスは、Cloudflareのステータスページで確認できます。

ローカルブラウザのキャッシュ

ストアでは、一時的にお客様のローカルストレージにいくつかの要素をキャッシュしたり保存したりします。次回お客様がオンラインストアにアクセスしたときに、ブラウザは別のリクエストをサーバーに送信する代わりに、キャッシュからリソースを読み込むことができます。

Shopifyでは、ストア内のキャッシュ可能なリソースについて、ブラウザキャッシングを各ファイルにつき1年間設定します。キャッシュ可能なファイルには、画像ファイル、PDF、JSファイル、CSSファイルが含まれます。

サーバー側のページキャッシュ

Shopifyでは、ローカルのブラウザキャッシュに加えて、サーバー側にもページをキャッシュします。ページの初回読み込み時には時間がかかる場合がありますが、それ以降はキャッシュされたコピーをお客様が受信するため、ページの読み込み速度が向上します。

Liquidオブジェクトcontent_for_header内のアセット

「``」Liquidオブジェクトを利用し、パフォーマンス分析や任意の機能 (動的チェックアウトボタンなど) を含む、さまざまなオンラインストア機能で使用されるアセットを挿入します。このオブジェクトと関連アセットを読み込むと、ストアの速度に影響します。Shopifyは現在、タグとそのアセットを最適化して、ストアの速度を改善できるよう対応中です。

管理できる要因

オンラインストアのパフォーマンスに影響を与える要因とその対処方法には、以下のようなものがあります。

アプリ

オンラインストアの機能や外観を変更するためのアプリを追加すると、テーマにコードが追加され、アプリが実行できるようになります。一部のコードは、オンラインストアのパフォーマンスを改善するために削除または再注文されることがあります。アプリを使用していない場合は、コードを削除することができます。

使用しているアプリによってストアの速度が落ちていると感じた場合は、以下のステップを実行します。

  • 使用していないアプリの機能を無効にするか、必要ない場合はアプリを削除します。オンラインストアの機能と速度のバランスを検討してください。
  • アプリを削除する場合は、アプリのインストールプロセスの一部として追加されたコードの削除を検討してください。ほとんどのアプリではコードが自動的に削除されますが、念のため、アプリの開発者に確認してください。一部のアプリでは、アプリ名に言及する{% comment %}タグでコードを囲むことでこの処理が行えます。未使用のアプリコードを削除することは、使用していない機能のコードの実行を回避し、テーマコードを読みやすくするためのベストプラクティスです。
  • アプリ開発者に相談してください。

テーマ

テーマは、Liquid、HTML、CSS、JavaScriptのコードで構成されています。テーマを編集またはカスタマイズすると、ファイルサイズが増加し、ウェブパフォーマンスに影響を与える可能性があります。

テーマに含まれる何かがストアの速度を落としていると思われる場合は、以下のステップを実行します。

テーマやアプリの機能

機能によっては、有効にすることでストアのパフォーマンスに影響を与える可能性もあります。例えば、コレクションページの読み込み時に、各商品ページの読み込み前の情報がクイックビューでポップアップされる場合などです。お客様が使用していない追加データを読み込むと、ストアの読み込みの速度が不必要に遅くなることがあります。

使用している機能によってストアの速度が落ちていると感じた場合は、以下のステップを実行できます。

複雑または非効率的なLiquidコード

ストアをレンダリングするために使用されるLiquidのほとんどが、編集可能です。Liquidコードを書く方法には、効率的なものもあれば非効率的なものもあります。複雑な操作を繰り返し行うと、Liquidのレンダリング時間を増やすことになり、全体的なウェブパフォーマンスに影響します。

例えば、コレクション内の商品を価格順で並び変える場合、ループコードの一部として実行するのではなく、コレクション内の商品をループする前に実行する必要があります。商品の並び順は個々の商品に関係することではなく、商品の並び順を計算することでリクエストの処理に時間がかさむことになるためです。

コードが最適化されていないという懸念がある場合は、以下のステップを実行できます。

  • ChromeのShopify テーマインスペクターを実行して、オンラインストアのページ速度を落としているコードの行を特定します。
  • Shopifyパートナーを雇い、非効率的または不要なコードを見極めてもらいます。

画像と動画

特大の画像やビューで非表示になっている画像は、ページのうち重要性の高い部分の読み込みを妨げる可能性があります。大きな画像の読み込みに時間がかかる場合、お客様からストアの速度が遅いと受け取られてしまう可能性があります。

Shopifyは、画像やビデオがオンラインストアに過重な負担をかけることがないよう、以下のようなセーフガードを設けています。

  • コレクションページの商品数を50、ホームページのセクションを25に制限しています。
  • 多くのテーマでは、現在画面に表示されていない画像の読み込みを保留にしています。
  • 多くのテーマでは、表示されている画面サイズに基づいて特定のサイズの画像を読み込むこともできます。

ただし、このような対策だけで、画像やビデオによるオンラインストアのパフォーマンスへの影響を皆無にすることはできません。

使用している画像によってストアの速度が落ちていると感じた場合は、以下のステップを実行します。

  • 画像最適化ガイド』を確認する
  • 記事のサムネイルのスライドショーを2~3スライドにとどめておくか、記事のサムネイルを1つだけ使用する
  • テーマの画像を使用する最適な方法については、テーマの開発者に相談する

フォント

オンラインストアで使用するテキストは、複数のフォントから選択することが可能です。ただし、お客様のコンピューターに存在していないフォントを使用する場合、フォントをダウンロードしてからテキストを表示する必要があります。この場合、ストアの読み込みに時間がかかる可能性があります。

新しいフォントがお客様のコンピューターにダウンロードされないようにするには、システムフォントを使用します。システムフォントとは、ほとんどのコンピューターにすでにインストールされているフォントのことです。

mono、serif、またはsans-serifのフォントファミリーを選択できます。これらのフォントファミリーを使用する場合でも、太字や斜体などのフォントスタイルを引き続き使用できます。

お客様のコンピューターに表示されるフォントは、オペレーティングシステムによって異なります。以下は、システムフォントファミリーを選択した場合、テキストの表示に使用される可能性があるフォントの例です。

  • Mono: Menlo、Consolas、Monaco、Liberation Mono、またはLucida Console
  • Sans-serif: BlinkMacSystemFont、Segoe UI、Roboto、Ubuntu、またはHelvetica Neue
  • Serif: Iowan Old Style、Apple Garamond、Baskerville、Times New Roman、Droid Serif、Times、またはSource Serif Pro

トラブルシューティングツール

以下のツールを使用して、オンラインストアのパフォーマンスを調査できます。

開発者の場合、Shopifyツールとベストプラクティスを使用して、パフォーマンスに応じてテーマをさらに最適化することができます。Shopify.devで詳細をご覧ください。

PageSpeed Insights

Shopifyが提供するウェブパフォーマンスのダッシュボードのレポートでは、Core Web Vitalsを使用して、オンラインストア上での実際のユーザーエクスペリエンスを測定できます。Google PageSpeed Insightsを使用して独自のレポートを実行し、ストアのページに関するより詳細な指標を確認することもできます。

ChromeのShopify テーマインスペクター

ChromeのShopify テーマインスペクターは、Flame Graphを使用してLiquidのレンダリングパフォーマンスを表示するプロファイリングツールです。このツールを使用すると、ご自身のオンラインストアのページ速度を落としているコードの行を識別することができます。こちらから、Shopify テーマインスペクターの使用方法をご覧ください。

オンラインストアのパフォーマンスに関するサポートを受ける

Shopifyの無料テーマを使用している場合、Shopifyサポートを利用することで、基本的なパフォーマンスの改善を図ることができる場合があります。

外部サービスのテーマを使用しており、サポートが必要な場合は、利用しているテーマの開発者に連絡するか、Shopifyパートナーを雇う必要があります。Shopifyパートナーを雇うことについて詳しくはこちらをご覧ください。

開発チームまたはエージェンシーパートナーに協力してもらえる場合は、問い合わせてさらなるサポートを受けることもできます。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す