ウェブサイトの読み込みパフォーマンスを向上させる

ウェブサイトの読み込みパフォーマンスを向上させるためには、画像サイズの最適化、コードのフォーマット、外部スクリプトの使用、ストアの機能やアプリの適切な使用など、いくつかの対策を講じることができます。

ウェブページの読み込みが速く信頼性が高いと、ユーザーエクスペリエンスが向上するだけでなく、自然な検索結果でより上位にランク付けされ、潜在的な訪問者により目立つようになり、しばしば高いコンバージョン率をもたらします。

ストアの機能と読み込みパフォーマンス

ストアページには、テンプレートコード、アプリケーション、画像、動画、支払いオプション、共有ツール、データ分析トラッカーなど、さまざまな機能モジュールが含まれています。これらの機能は、全体的な訪問者エクスペリエンスを向上させ、ストアページの機能を拡張します。

ストアページに追加された各機能は、適切に機能するためにネットワークやハードウェアリソースが必要です。一部の機能は他よりも多くのリソースを必要とし、新しい機能を追加することでストアの読み込みパフォーマンスに大きな影響を与える可能性があります。

ストアページに新しい機能を追加する際には、その価値と読み込みパフォーマンスへの影響をバランスよく考慮することが重要です。場合によっては、読み込みパフォーマンスを犠牲にしてでも、より良い訪問者エクスペリエンスを提供し、コンバージョン率を向上させる必要があります。

読み込みパフォーマンスのトラブルシューティングツール

オンラインストアのウェブページ速度を評価するために、以下のツールを利用することができます：

Google PageSpeed Insightsを使用して、より詳細なストアページメトリクスのLighthouseレポートを生成できます。これらのメトリクスの意味を理解するには、Google Lighthouse Performance Scoring documentationを参照してください。

Lighthouseレポートの理解

Google PageSpeed Insightsから取得したLighthouseレポートを例にすると、最も重要なのはLargest Contentful PaintとTotal Blocking Timeの2つの主要なメトリクスに注意を払うことです。これらのメトリクスが赤色で表示される場合、以下の提案された最適化を行うことができます：

異常なTotal Blocking Timeの場合：

1. インストールされているアプリケーションが多すぎないか確認してください。
2. 分析ライブラリの使用状況を確認してください。

異常なLargest Contentful Paintの場合：

1. 画像や動画の仕様が適切か確認してください。
2. インストールされているアプリケーションが多すぎないか確認してください。
3. 分析ライブラリの使用状況を確認してください。

読み込みパフォーマンスに影響を与える要因

ストアのページの速度は、さまざまな要因に影響を受ける可能性があり、それらはコントロール可能な要因とコントロール不可能な要因に分けることができます。

ストアページのパフォーマンスに関連する要因を説明するだけでなく、コントロール可能な要因のセクションでこれらの要因を処理する方法も提供されます。

コントロール可能な要因

• アプリケーション：
  ストアの機能や外観を拡張するためにアプリを追加すると、これらのアプリは実行するためにテンプレートにコードを追加します。アプリによって挿入されたコードは、テーマテンプレートと同じ環境で実行されるため、ページのパフォーマンスに影響を与える可能性があります。複雑な機能を持つアプリほどパフォーマンスへの影響が顕著になります。そのため、以下を推奨します：
  • インストールされているアプリの数を減らし、未使用または不要なものを削除し、ストアの機能とパフォーマンスのバランスを見つける。
  • 大量のカスタムコードを挿入しないようにし、挿入されたカスタムコードがページに大きな影響を与えないことを確認できない限り、テーマテンプレートの元の構造を乱す可能性があります。
  • 可能な限り、同様の機能を持つアプリの高性能なインストールを選択してください。
    

    Note：ストア管理者専用のアプリケーションはストアの速度に影響しません。

• 画像と動画：
  ページ上の大きな画像や非表示の画像は、他の重要な部分の読み込みに干渉する可能性があります。ユーザーが画像の読み込みを待たなければならない時間が長すぎると、ストアが遅いと感じるかもしれません。SHOPLINEが提供するテーマは、画像と動画に対する一連の最適化を経ています。例えば：
  

  (-) 現在画面に表示されていない画像や動画の遅延読み込み。
  (-) 画面サイズに基づいて特定のサイズで画像を読み込む。
  (-) 大きなGIF画像の逐次読み込み

  Note：上記の情報は公式SHOPLINEテーマにのみ適用されます。非公式またはプライベートテーマの場合は、該当する開発者に連絡してサポートを受けてください。

  ただし、これらの最適化措置でも画像や動画がストアのパフォーマンスに与える影響を完全に排除することはできません。ストアの構成もパフォーマンスに影響する可能性があります。そのため、以下を推奨します：
  • 画像を設定する際は、推奨される画像サイズを参照してください。
  • 大きなサイズのGIF画像を使用せず、代わりにPNG/JPG形式の画像を使用してください（GIF形式の画像は同じサイズの他の形式と比較して大きくなりがちです）。
  • 1つの商品カテゴリに関連付けられる商品が50個を超えないようにし、1つの商品に関連付けられるSKU画像も50個を超えないようにしてください。
• 分析ライブラリ：
  SHOPLINE は、Facebook Pixel、Google 広告、Google Analytics、Google Tag Manager、Google リマーケティングツール、および Bing キーワード広告など、さまざまなプラットフォームでのイベントトラッキングと分析をサポートしています。これらの分析機能を有効にすると、一定量のページリソースを消費し、過剰にアクティブ化されるとストアのページのパフォーマンスに影響を与える可能性があります。そのため、ビジネスオーナーは、特定のニーズに基づいて適切なイベントトラッキングと分析を選択することで、ストアの機能とパフォーマンスを注意深くバランスさせることをお勧めします。
• テーマテンプレート：
  テーマテンプレートには、Handlebar、HTML、CSS、およびJavascriptコードが含まれています。テンプレートの編集やカスタマイズはファイルサイズを増やし、ストアの速度に影響を与える可能性があります。
  SHOPLINE は、定期的に最適化および更新される複数の無料のテーマテンプレートを提供しています。ただし、公式テンプレートのコードを変更すると、それらはプライベートテンプレートに変わり、公式テーマの最新の最適化と即座の同期が妨げられます。
  テンプレートにパフォーマンスの問題があると考える場合は、次の手順を試してみることができます：
  • 公式の SHOPLINE テーマテンプレートを使用している場合は、SHOPLINE サポートチームに連絡してガイダンスを受けることができます。サードパーティ製またはプライベートテンプレートを使用している場合は、テンプレート開発者に相談することができます。
  • Arise テーマなどの公式 OS 2.0 最適化されたテーマをインストールすることを検討してください。

制御できない要因

• 顧客のデバイス、ネットワーク、およびロケーション：
  ストアにアクセスする顧客は世界中におり、彼らのデバイスやネットワーク接続は異なります。これにより、ストアの読み込み速度はこれらの要因に応じて速くなったり遅くなったりします。
  たとえば、米国にストアがある場合、SHOPLINEは米国の顧客向けにリソースアクセスを最適化します。ただし、中国からストアにアクセスする顧客の場合、米国からアクセスするよりもページの読み込み速度が遅くなる可能性があります。
• ローカルブラウザキャッシュ：
  ストアの静的リソースは、顧客のローカルストレージに一時的にキャッシュされるか保存されます。顧客が再度ストアを訪れると、ブラウザはサーバーに追加のリクエストを送信せずにキャッシュからリソースを読み込むことができます。
  SHOPLINEは、ストア内のキャッシュ可能なリソースのブラウザキャッシュ時間を1年に設定しています。キャッシュ可能なファイルには、画像ファイル、PDF、JSファイル、およびCSSファイルが含まれます。
• サーバーサイドページキャッシュ：
  ローカルブラウザキャッシュに加えて、SHOPLINEはサーバーサイドでページをキャッシュします。初回のページ読み込みは遅いかもしれませんが、顧客はキャッシュされたコピーを受け取るため、2回目以降のページ読み込みは速くなります。