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

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

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

管理できない要素

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

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

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

Shopifyの批发商ンフラストラクチャ

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

Shopifyは,コ,ドと,ンフラストラクチャを継続的に改善しています。いくかの改善は,速度スコアに反映される可能性があります。

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

コンテン配信ネットワク(cdn)

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

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

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

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

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

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

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

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

管理できる要因

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

アプリ

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

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

  • 使用していないアプリの機能を無効にするか,必要ない場合はアプリを削除する。オンラ@ @ンストアの機能と速度のバランスを検討してください。
  • アプリを削除する場合は,アプリのインストールプロセスの一部として追加されたコードの削除を検討してください。いくかのアプリでは,アプリ名に言及する{% comment %}タグのコ,ドを囲むことでこの処理が行えます。

未使用のアプリコードを削除することは,使用していない機能のコードの実行を回避し,テーマコードを読みやすくするためのベストプラクティスです。

  • アプリ開発者に相談してください。
  • Shopify专家を雇ってサポートを受けるShopify专家の採用について詳しくは,こらをご覧ください。

テマ

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

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

テ,マやアプリの機能

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

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

  • ヒトマップルを使用して,お客様が特定の機能を使用しているかどうかを確認する。機能を使用していない場合は無効にしてください。
  • 不要な機能を無効にする。オンラ@ @ンストアの機能と速度のバランスを検討してください。
  • テ,マおよびアプリ開発者に相談し,デ,タの事前読み込みが発生しているか確認する
  • Shopify专家を雇ってサポートを受けるShopify专家の採用について詳しくは,こらをご覧ください。

複雑または非効率的な液体コ,ド

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

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

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

  • ChromeのShopifyテマンスペクタを実行して,オンランストアのペジ速度を落としているコドの行を特定します。
  • Shopify Expertを雇い,非効率的または不要なコ,ドを見極めるサポ,トを受けます。

画像と動画

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

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

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

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

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

  • 画像最適化ガ@ @ドを確認する
  • 記事のサムネイルのスライドショーを2 ~ 3スライドにとどめておくか,記事のサムネイルを1つだけ使用する
  • テマの画像を使用する最適な方法にいては,テマの開発者に相談する
  • Shopify专家を雇ってサポートを受けるShopify专家の採用について詳しくは,こらをご覧ください。

フォント

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

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

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

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

  • 莫诺:门罗,Consolas,摩纳哥,解放Mono,またはLucida控制台
  • 无衬线: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu,またはHelvetica Neue
  • 衬线:爱荷华旧风格,苹果Garamond,巴斯克维尔,时代新罗马,Droid衬线,时代,または源衬线Pro

トラブルシュティングル

次のルを使用して,オンランストアの速度を調査できます。

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

灯塔

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

ChromeのShopifyテマンスペクタ

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

オンラ▪▪ンストアの速度のサポ▪▪トを受け取る

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

サ,ドパ,ティのテ,マを使用しており,サポ,トが必要な場合は,ご自身のテ,マ開発者に連絡するか,Shopify专家を雇う必要があります。Shopify专家の採用にいて詳しくは,こらをご覧ください。

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

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

無料体験を試す