ウェブサイトの読み込み中パフォーマンスの向上

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

ウェブページの読み込みが速く、より安定すると、ユーザー体験が向上するだけでなく、自然検索結果での順位も上がりやすくなります。これにより潜在的な訪問者により見つけられやすくなり、しばしばコンバージョン率の向上につながります。

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

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

ストアページに追加される各機能は、適切に動作するためにネットワークおよびハードウェアのリソースを必要とします。機能によって必要なリソース量は異なり、新しい機能を追加するとストアの読み込みパフォーマンスに大きな影響を与えることがあります。

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

読み込みパフォーマンスの問題解決ツール

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

より詳細なストアページの指標を得るために、Google PageSpeed Insightsを使用して独自のLighthouseレポートを生成できます。これらの指標の意味を理解するには、Google Lighthouse Performance Scoringのドキュメントを参照してください。

Lighthouseレポートの理解

Google PageSpeed Insightsから取得したLighthouseレポートを例に、注目すべき重要な指標はLargest Contentful PaintとTotal Blocking Timeの2つです。これらの指標が赤色で表示されている場合は、以下の推奨される最適化を実施してください：

Total Blocking Timeが異常な場合：

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

Largest Contentful Paintが異常な場合：

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

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

ストアのページ速度はさまざまな要因によって影響を受けます。これらの要因は、制御可能かどうかに基づいて制御可能な要因と制御不可能な要因に分けられます。

ストアページのパフォーマンスに関連する要因の説明に加え、以下の内容では制御可能な要因のセクションでこれらの要因への対処方法も提供します。

制御可能な要因

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

  • 可能な限り、類似の機能アプリについては高パフォーマンスのインストールを選択してください。
     

    注意：ストア管理の管理画面でのみ使用されるアプリケーションは、ストアの速度に影響しません。

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

  （-）画面上に現在表示されていない画像や動画の遅延読み込み。
  （-）画面サイズに基づいた特定のサイズの画像の読み込み。
  （-）大きなGIF画像の段階的な読み込み。

  注意：上記の情報は公式のSHOPLINEテーマにのみ適用されます。非公式またはカスタムテーマの場合は、各開発者にお問い合わせください。

  しかし、これらの最適化措置は画像や動画がストアのパフォーマンスに与える影響を完全に排除することはできません。ストアの設定もパフォーマンスに影響を与える可能性があります。したがって、以下を推奨します：

  • 画像を設定する際は、推奨画像サイズを参照してください。
  • 大きなサイズのGIF画像の使用は避け、代わりにPNG/JPG形式の画像を使用してください（GIF形式の画像は同じサイズの他の形式に比べてかなり大きくなる傾向があります）。
  • 単一の商品カテゴリに関連付けられる商品は50点以下、または単一の商品に関連付けられる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はサーバー側でもページをキャッシュします。初回のページ読み込みは遅くなることがありますが、その後のページ読み込みはキャッシュされたコピーを顧客に提供するため速くなります。