オンラインストアの速度を改善する
オンラインストアの速度に影響する要素はいくつかあり、ご自身で管理できるものもあります。
現時点でのオンラインストアのパフォーマンス速度が分からない場合は、オンラインストアの速度レポートを表示することができます。
管理できない要素
お客様のデバイス、ネットワーク、ロケーション
ストアを訪問するお客様は世界中に居住しており、デバイスの種類やインターネット接続の状況はさまざまです。つまり、こうした要因によってストアの読み込み時間が速くなったり、遅くなったりすることがあります。
ストアの速度についてお客様から問い合わせがあった場合は、最新バージョンのブラウザからアクセスしているか、最近キャッシュを消去したか、インターネットサービスプロバイダー側でダウンやパフォーマンス低下が発生していないかをお客様に確認してください。
Shopifyのインフラストラクチャ
Shopifyは高速なグローバルサーバーでオンラインストアをホストしており、ストアの帯域幅を制限しません。Shopifyのステータスから、Shopifyストアのステータスを確認することができます。
Shopifyは、コードとインフラストラクチャを継続的に改善しています。いくつかの改善は、速度スコアに反映される可能性があります。
オンラインストアの速度に影響する機能には、以下などが含まれます。
コンテンツ配信ネットワーク (CDN)
CDNはコンテンツ配信ネットワークの略語です。Shopifyでは、Cloudflareを通じて世界クラスのCDN環境をマーチャントに提供しており、オンラインストアが世界各地ですぐに読み込めるようになっています。CDNのステータスは、Cloudflareのステータスページで確認できます。
ローカルブラウザのキャッシュ
ストアでは、一時的にお客様のローカルストレージにいくつかの要素をキャッシュしたり保存したりします。次回お客様がオンラインストアにアクセスしたときに、ブラウザは別のリクエストをサーバーに送信する代わりに、キャッシュからリソースを読み込むことができます。
Shopifyでは、ストア内のキャッシュ可能なリソースについて、ブラウザキャッシングを各ファイルにつき1年間設定します。キャッシュ可能なファイルには、画像ファイル、PDF、JSファイル、CSSファイルが含まれます。
サーバー側のページキャッシュ
Shopifyでは、ローカルのブラウザキャッシュに加えて、サーバー側にもページをキャッシュします。ページの初回読み込み時には時間がかかる場合がありますが、それ以降はキャッシュされたコピーをお客様が受信するため、ページの読み込み速度が向上します。
Liquidオブジェクトcontent_for_header内のアセット
「``」Liquidオブジェクトを利用し、パフォーマンス分析やオプション機能 (動的チェックアウトボタンなど) を含むさまざまなオンラインストア機能で使用されるアセットを挿入します。このオブジェクトと関連アセットを読み込むと、ストアの速度に影響が及びます。Shopifyは現在、タグとそのアセットを最適化してページの速度を改善できるよう対応中です。
管理できる要因
オンラインストアの速度に影響し、ご自身で対処できる可能性のある機能には、以下などが含まれます。
アプリ
オンラインストアの機能や外観を変更するためのアプリを追加すると、テーマにコードが追加され、アプリが実行できるようになります。一部のコードは、オンラインストアのパフォーマンスを改善するために削除または再注文されることがあります。アプリを使用していない場合は、コードを削除することができます。
使用しているアプリによってストアの速度が落ちていると感じた場合は、以下のステップを実行します。
- 使用していないアプリの機能を無効にするか、必要ない場合はアプリを削除する。オンラインストアの機能と速度のバランスを検討してください。
- アプリを削除する場合は、アプリのインストールプロセスの一部として追加されたコードの削除を検討してください。いくつかのアプリでは、アプリ名に言及する
{% comment %}タグのコードを囲むことでこの処理が行えます。
未使用のアプリコードを削除することは、使用していない機能のコードの実行を回避し、テーマコードを読みやすくするためのベストプラクティスです。
- アプリ開発者に相談してください。
- Shopify Expertを雇ってサポートを受けるShopify Expertの採用について詳しくは、こちらをご覧ください。
テーマ
テーマは、Liquid、HTML、CSS、JavaScriptのコードで構成されています。テーマを編集またはカスタマイズすると、ファイルサイズが増加し、ストアのスピードに影響を与える可能性があります。
テーマに含まれる何かがストアの速度を落としていると思われる場合は、以下のステップを実行します。
- 使用していないテーマの機能を無効にする。オンラインストアの機能と速度のバランスを検討してください。
- システムフォントの使用を検討できます。
- テーマの開発者に相談する。Shopifyの無料テーマを使用している場合は、サポートまでご連絡ください。
- 外部のテーマを使用している場合は、ご自身のテーマ開発者に連絡するか、Shopify Expertを雇うことができます。
- パフォーマンスに応じて最適化されたテーマ (Dawnなど) のインストールを検討してください。
- Shopify Expertを雇ってサポートを受けるShopify Expertの採用について詳しくは、こちらをご覧ください。
テーマやアプリの機能
機能によっては、有効にすることでストアの速度に影響を与える可能性もあります。例えば、コレクションページの読み込み時に、読み込み前の各商品ページの情報がクイックビューでポップアップされる場合などです。お客様が使用していない追加データを読み込むと、付加価値を提供することなくストアの速度が落ちてしまうことがあります。
使用している機能によってストアの速度が落ちていると感じた場合は、以下のステップを実行できます。
- ヒートマップツールを使用して、お客様が特定の機能を使用しているかどうかを確認する。機能を使用していない場合は無効にしてください。
- 不要な機能を無効にする。オンラインストアの機能と速度のバランスを検討してください。
- テーマおよびアプリ開発者に相談し、データの事前読み込みが発生しているか確認する
- Shopify Expertを雇ってサポートを受けるShopify Expertの採用について詳しくは、こちらをご覧ください。
複雑または非効率的なLiquidコード
ストアをレンダリングするために使用されるLiquidのほとんどが、編集可能です。Liquidコードを書く方法には、効率的なものもあれば非効率的なものもあります。複雑な操作を繰り返し行うと、Liquidのレンダリング時間を増やすことになり、ストア全体のスピードに影響します。
例えば、コレクション内の商品を価格順で並び変えたい場合、ループコードの一部として実行するのではなく、コレクション内の商品をループする前に実行することをお勧めします。商品の並び順は個々の商品に関係することではなく、商品の並び順を計算することでリクエストの処理に時間がかさむことになります。
コードが最適化されていないという懸念がある場合は、以下のステップを実行できます。
- ChromeのShopify テーマインスペクターを実行して、オンラインストアのページ速度を落としているコードの行を特定します。
- Shopify Expertを雇い、非効率的または不要なコードを見極めるサポートを受けます。
画像と動画
特大の画像やビューで非表示なっている画像は、ページのもっと重要な部分の読み込みを妨げる可能性があります。特大画像の読み込みに時間がかかる場合、お客様からはストアの速度が遅いと受け取られてしまう可能性があります。
Shopifyは、画像やビデオがオンラインストアに過重な負担をかけることがないよう、以下のようなセーフガードを設けています。
- コレクションページの商品数を50、ホームページのセクションを25に制限しています。
- 多くのテーマでは、現在画面に表示されていない画像の読み込みを保留にしています。
- 多くのテーマでは、表示されている画面サイズに基づいて特定のサイズの画像を読み込むこともできます。
ただし、これらのセーフガードだけで、画像やビデオがオンラインストアのパフォーマンスに影響を与えないよう完全に防止することはできません。
使用している画像によってストアの速度が落ちていると感じた場合は、以下のステップを実行します。
- 『画像最適化ガイド』を確認する
- 記事のサムネイルのスライドショーを2～3スライドにとどめておくか、記事のサムネイルを1つだけ使用する
- テーマの画像を使用する最適な方法については、テーマの開発者に相談する
- Shopify Expertを雇ってサポートを受けるShopify Expertの採用について詳しくは、こちらをご覧ください。
フォント
オンラインストアで使用するテキストは、複数のフォントから選択することが可能です。ただし、お客様のコンピューターに存在していないフォントを使用する場合、フォントをダウンロードしてからテキストを表示する必要があります。この場合、ストアの読み込みに時間がかかる可能性があります。
新しいフォントがお客様のコンピューターにダウンロードされないようにするには、システムフォントを使用します。システムフォントとは、ほとんどのコンピューターにすでにインストールされているフォントのことです。
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で詳細をご覧ください。
Lighthouse
Shopifyのオンラインストアの速度レポートでは、Lighthouseを使用してストアの速度を測定しています。Google PageSpeed Insightsを使用してご自身のLighthouseレポートを実行すると、ストアのページに関する詳細な指標を表示することができます。これらの指標の意味について詳しくは、「Google Lighthouseのパフォーマンススコアに関するドキュメント」を参照してください。また、Shopify Expertを雇うことにより、指標を理解して改善の提案を受けることもできます。Shopify Expertの採用について詳しくは、こちらをご覧ください。
ChromeのShopify テーマインスペクター
ChromeのShopify テーマインスペクターは、Flame Graphを使用してLiquidのレンダリングパフォーマンスを表示するプロファイリングツールです。このツールを使用すると、ご自身のオンラインストアのページ速度を落としているコードの行を識別できます。Shopify テーマインスペクターの使用方法についてはこちらをご覧ください。
オンラインストアの速度のサポートを受け取る
Shopifyの無料テーマを使用している場合、Shopifyサポートを利用することで、基本的なパフォーマンスの改善を図ることができる場合があります。
サードパーティのテーマを使用しており、サポートが必要な場合は、ご自身のテーマ開発者に連絡するか、Shopify Expertを雇う必要があります。Shopify Expertの採用について詳しくは、こちらをご覧ください。
開発チームまたは代理店パートナーがいる場合は、こうしたチームからさらなるサポートを受けることもできます。