オンラインストアの速度を改善する

オンラインストアの速度に影響する要素はいくつかあり、ご自身で管理できるものもあります。

現時点でのオンラインストアのパフォーマンス速度が分からない場合は、オンラインストアの速度レポートを表示することができます。

管理できない要素

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

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

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

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

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

オンラインストアの速度に影響する機能には、以下などが含まれます。

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

CDNはコンテンツ配信ネットワークの略語です。Shopifyは、Fastlyを使用してマーチャントに世界クラスのCDNを提供しており、オンラインストアが世界中ですぐに読み込めるようにしています。CDNのステータスはFastlyのステータスページで確認できます。

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

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

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

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

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

content_for_header」Liquidタグ内のアセット

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

管理できる要因

オンラインストアの速度に影響し、ご自身で対処できる可能性のある機能には、以下などが含まれます。

アプリ

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

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

テーマ

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

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

テーマやアプリの機能

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

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

  • ヒートマップツールを使用して、お客様が特定の機能を使用しているかどうかを確認する。機能を使用していない場合は無効にしてください。
  • 不要な機能を無効にする。オンラインストアの機能と速度のバランスを検討してください。
  • テーマおよびアプリ開発者に相談し、データの事前読み込みが発生しているか確認する
  • Shopify Expertを雇用してサポートを求める

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

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

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

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

画像と動画

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

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

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

ただし、これらのセーフガードだけで、画像やビデオがオンラインストアのパフォーマンスに影響を与えないよう完全に防止することはできません。

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

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

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

以下のツールは、オンラインストアの速度を調査するために使用できるものです。

Lighthouse

Shopifyのオンラインストアの速度レポートでは、Lighthouseを使用してストアの速度を測定しています。Google PageSpeed Insightsを使用してご自身のLighthouseレポートを実行すると、ストアのページに関する詳細な指標を表示することができます。これらの指標が意味することについて、詳しくはGoogle Lighthouseのパフォーマンススコアに関するドキュメントを参照してください。また、Shopify Expertを雇うことにより、指標を理解して改善の提案を受けることもできます。

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

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

サポートを受けるには

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

外部のテーマを使用しており、サポートが必要な場合は、ご自身のテーマ開発者に連絡するか、Shopify Expertを雇う必要があります。

開発チームまたは代理店パートナーがいる場合は、こうしたチームからさらなるサポートを受けることもできます。

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

無料体験を試す