ストアのウェブサイト読み込み中パフォーマンスの改善方法

ウェブサイトの読み込みパフォーマンスは、オンラインストアでのショッピング体験に直接影響します。ページの読み込みが速いと、顧客は商品をよりスムーズに閲覧でき、直帰率が減少し、購入完了の可能性が高まります。ウェブサイトのパフォーマンスは、検索エンジンが考慮する多くの要素の一つであるページ体験にも寄与し、検索の可視性にも影響します。

ストアフロントの読み込み速度は、テーマ、イメージ、アプリ、カスタムコード、サードパーティのスクリプトなど、複数の要因に依存します。これらのうち一部は制御できない場合もありますが、多くは最適化してパフォーマンスを向上させることが可能です。

このガイドでは、ストアの読み込みパフォーマンスに影響を与える要因を説明し、速く信頼性の高いストアフロントを維持するための推奨事項を提供します。

ウェブサイトのパフォーマンスがストアに与える影響

ストアフロントは、各ページを表示するために連携して動作する複数のリソースで構成されています。これには以下が含まれます：

• テーマのテンプレート
• イメージと動画
• インストールされたアプリ
• 分析およびマーケティングスクリプト
• 支払い方法
• ソーシャルシェアリングツール
• その他のサードパーティ連携

各追加機能は、ブラウザとネットワークのリソースを消費して読み込みを行います。これらの機能はストアの機能性や顧客体験を向上させますが、適切に管理しないとページの読み込み時間が増加する可能性があります。

ストアに新しい機能を追加する際は、そのビジネス価値とウェブサイトのパフォーマンスへの影響の両方を考慮してください。場合によっては、顧客体験やコンバージョン率を大幅に改善するなら、読み込み時間のわずかな増加は許容されることもあります。

ストアのウェブサイトパフォーマンスの測定

パフォーマンス改善を行う前に、パフォーマンス分析ツールを使ってストアフロントを評価してください。

SHOPLINEでは、以下のツールの使用を推奨しています：

• SHOPLINE管理画面のストアのアクセス速度レポート：ストアのアクセス速度レポートは、ストアフロントのLighthouseベースのパフォーマンススコアを提供し、時間経過によるパフォーマンスを追跡します。
• Google PageSpeed Insights：Google PageSpeed Insightsは、改善の機会を特定するのに役立つ追加の診断情報を含むLighthouseレポートを生成します。

Lighthouseのパフォーマンス指標の理解

Google PageSpeed InsightsのGoogle PageSpeed InsightsでLighthouseレポートを確認する際は、以下の指標に特に注意してください：

これらの指標のいずれかが低い場合は、次のセクションの推奨事項を確認して、考えられる原因を特定してください。

ウェブサイトパフォーマンスに影響を与える制御可能な要因

ウェブサイトのパフォーマンスの多くは、ストアの設定を通じて最適化可能です。以下のセクションでは、制御可能な要因を説明し、ストアフロントの読み込みパフォーマンスを向上させるための推奨事項を提供します。

サードパーティアプリケーション

アプリは、マーケティングツール、ロイヤルティプログラム、レビュー、ポップアップなどの機能を追加することで、ストアの機能を拡張します。ほとんどのストアフロントアプリは、追加のJavaScript、CSS、または外部リソースも読み込むため、ページのパフォーマンスに影響を与える可能性があります。

影響を最小限に抑えるために：

• ストアで実際に使用しているアプリのみをインストールしてください。
• 未使用または重複しているアプリは削除してください。
• 類似の機能を提供する複数のアプリをインストールすることは避けてください。
• カスタムアプリの統合は定期的に見直し、まだ必要かどうかを確認してください。
• カスタムコードは可能な限り最小限に抑えてください。過度の修正はパフォーマンスを低下させ、将来のテーマのメンテナンスを困難にする可能性があります。

画像と動画

画像と動画は、ページサイズの大部分を占めることが多いです。メディアファイルを最適化することで、読み込みパフォーマンスを大幅に向上させることができます。

SHOPLINE公式テーマには、以下のような組み込みの最適化機能があります：

• 初期のビューポート外の画像と動画の遅延読み込み
• 画面サイズに基づくレスポンシブ画像の読み込み
• 異なるデバイス向けの最適化された画像配信

最高のパフォーマンスを得るために：

• 推奨される寸法を使用して画像をアップロードしてください。
• アップロード前に大きな画像を圧縮してください。
• 可能な限りWebPなどの最新の画像フォーマットを使用してください。
• 過大なヒーロー画像は避けてください。
• GIFファイルは通常他の画像フォーマットよりもファイルサイズが大きいため、大きなアニメーションGIFは適切な場合に静止画像や短い動画に置き換えてください。

分析とサードパーティスクリプト

多くのストアでは、広告、分析、顧客エンゲージメント、マーケティングオートメーションのために以下のようなサードパーティサービスを利用しています：

• Google Analytics
• Google Tag Manager
• Google 広告
• Metaピクセル
• Microsoft Advertising

追加されるスクリプトが増えるほど、ストアフロントで読み込まれるJavaScriptの量が増え、ページの応答性に影響を与える可能性があります。

パフォーマンスを向上させるために：

• ビジネスに必要な追跡ツールのみを有効にしてください。
• 不要またはコピーの追跡スクリプトは削除してください。
• 類似のデータを収集する複数のツールを必要でない限りインストールしないでください。

テーマテンプレートとカスタムコード

ストアフロントのテーマは、各ページの表示方法を決定するHTML、CSS、JavaScript、およびテンプレートコードで構成されています。

SHOPLINEは公式テーマのパフォーマンス、安定性、互換性を定期的に最適化しています。しかし、大幅なテーマのカスタマイズやサードパーティによる変更は読み込みパフォーマンスを低下させ、将来のアップデートを困難にする可能性があります。

パフォーマンスの問題が発生した場合は、以下をお試しください：

• テーマの未変更バージョンで問題が存在するかテストしてください。
• 最近追加したカスタムコードや統合を確認してください。
• 古いバージョンを使用している場合は、最新の公式SHOPLINEテーマへのアップグレードを検討してください。
• 公式テーマを使用している場合はSHOPLINEサポートに、カスタムまたはサードパーティテーマを使用している場合はテーマ開発者にお問い合わせください。

管理外の要因

ストアの設定に加え、ウェブサイトの読み込みパフォーマンスは、購入者のデバイス、ネットワーク状況、ブラウザのキャッシュなどの要因にも影響されます。これらの要因は一般的にあなたの管理外です。

顧客のデバイス、ネットワーク、および地理的ロケーション

顧客はさまざまなデバイス、ブラウザ、オペレーティングシステム、インターネット接続を使ってストアにアクセスする可能性があります。

そのため、読み込みパフォーマンスは以下により異なることがあります：

• デバイスの性能
• ネットワークの品質
• ブラウザのバージョン
• 顧客からサーバーまでの地理的距離

例えば、他国からストアにアクセスする顧客や遅いモバイルネットワークを使用している顧客は、高速なインターネット接続を持つ地元の顧客よりも読み込み時間が長くなる場合があります。

ブラウザキャッシュ

ブラウザは画像、CSS、JavaScriptファイルなどの静的リソースを一時的に保存します。再訪問した顧客がストアにアクセスすると、これらのキャッシュされたリソースは再ダウンロードされずにローカルで読み込まれることが多く、ページの読み込み速度が向上します。

サーバー側キャッシュ

SHOPLINEはレスポンス時間を改善するために、サーバー上でストアフロントのコンテンツをキャッシュしています。

ページの最初のリクエストはキャッシュ生成のために時間がかかることがありますが、その後の訪問はキャッシュされたコンテンツから提供されることが多く、将来のリクエストの読み込み時間を短縮します。

ウェブサイトパフォーマンス維持の最善の方法

ストアフロントを高速かつ応答性の高い状態に保つために、SHOPLINEは以下を推奨します：

• ストアに必要なアプリのみをインストールしてください。
• 未使用のアプリやサードパーティの連携は削除してください。
• アップロード前に画像を圧縮してください。
• 可能な限りWebP画像を使用してください。
• 大きなアニメーションGIFは避けてください。
• カスタムコードや不要なJavaScriptは最小限に抑えてください。
• テーマは最新の公式バージョンに更新してください。
• 分析およびマーケティングスクリプトを定期的に見直してください。
• ストアフロントの監視には、ストアのアクセス速度レポートとGoogle PageSpeed Insightsを使用してください。