ヘルプ
ログイン

オンラインストアのパフォーマンスの改善

オンラインストアは、テーマコード、アプリ、画像、動画、カルーセル、SNSフィード、分析などのさまざまな機能で構成されています。これらの機能は、訪問者のエクスペリエンスを向上させ、サイトの機能を拡張することができます。

しかし、オンラインストアに追加する各機能は、ストアのパフォーマンスに影響を与える可能性があります。機能によっては、サイトの速度が低下したり、予期しない動作が発生してユーザーエクスペリエンスに影響を与えたりする場合があります。

ウェブパフォーマンスは、ユーザーエクスペリエンスの最適化に重点を置いています。現在、ウェブパフォーマンスは3つの主要な分野に焦点を当てており、それらは Core Web Vitals にも反映されています。

  • 最大コンテンツ表示 (LCP) で測定される読み込み速度
  • Cumulative Layout Shift (CLS) で測定されるレイアウトの安定性
  • Interaction to Next Paint (INP) で測定されるユーザーインタラクションへの応答性

ウェブパフォーマンスを最適化すると、お客様がサイトに留まり、コンバージョンに至る可能性が高まります。

このページの内容

オンラインストアの最適化

オンラインストアにはウェブ最適化が組み込まれています。ウェブ最適化は、すべての新しい機能にも組み込まれています。以下の機能を利用するために特別な操作は必要ありません。

  • オンラインストアは高速なグローバルサーバーでホストされており、ストアの帯域幅に制限はありません。Shopifyストアのステータスは、Shopifyステータスで確認できます。
  • オンラインストアには、Cloudflare が運営するコンテンツデリバリーネットワーク (CDN) があり、世界中でオンラインストアが迅速に読み込まれるようにしています。CDNのステータスは、Cloudflareのステータスページで確認できます。
  • 読み込み時間を高速に保つため、画像は画像CDNを使用して自動的に最適化されます。テーマコードと組み合わせることで、画像CDNは、ファイルサイズを小さく保つためにサイズ変更され圧縮された最適な画像形式を提供できます。

ウェブパフォーマンスに影響する要因

Shopifyストアの場合、ウェブパフォーマンスに影響する最大の要因は次のとおりです。

  • オンラインストアのテーマ
  • インストールしたアプリ
  • タグマネージャーやその中のタグなど、ストアに手動で追加した外部サービスのコード

ウェブパフォーマンスを向上させるには、次の点に重点を置く必要があります。

  • 最新の最適化されたテーマを使用します。HorizonファミリーのテーマおよびShopifyによるOnline Store 2.0テーマはすべて無料で、ウェブパフォーマンスが最適化されています。さらに、他の多くの外部サービスのテーマもウェブパフォーマンスが最適化されています。最新のテーマのパフォーマンスデータを確認できます。
  • テーマにページ切り替えやその他のアニメーションがある場合は、それらを有効にする前と後でウェブパフォーマンスを比較してください。アニメーションによってページの速度が低下する可能性があります。
  • テーマのページテンプレートにセクションを追加しすぎないようにします。ページ上のセクション数が多くなると、ウェブパフォーマンスが低下する可能性があります。
  • 大量の商品を含むコレクションがある場合は、ページネーションを有効にして一度に読み込まれる商品の数を制限することを検討してください。
  • インストールされているアプリと外部サービスのコードを評価し、パフォーマンスの低下の可能性を相殺するのに十分な価値を生み出していることを確認します。
  • タグマネージャーを監査して、未使用または価値の低いタグを削除します。タグとタグマネージャーのベストプラクティスについて詳しくはこちら。

テストツール

以下のツールを使用して、オンラインストアのパフォーマンスを調査できます。

  • ウェブパフォーマンスレポート：Shopifyのウェブパフォーマンスレポートでは、Core Web Vitalsを使用して、実際のユーザーがオンラインストアでどのような体験をしているかを測定します。
  • PageSpeed Insights：GoogleのPageSpeed Insightsを使用して独自のレポートを実行し、ストア内のページのより詳細な指標を表示できます。

外部サービスのパフォーマンスに関する推奨事項について

外部サービスのパフォーマンススキャンツールでは、ストアの速度を改善するための変更が提案される場合があります。しかし、そうした推奨事項の多くは、すでにShopifyによって実装されているか、Shopifyストアには適用されないものです。

Shopifyにすでに含まれている最適化

Shopifyストアには、以下のパフォーマンス最適化が自動的に含まれています。

コンテンツデリバリーネットワーク (CDN)：Shopifyは、追加料金なしで世界トップクラスのCDNを提供し、世界中で高速なパフォーマンスを保証します。すべての資産はHTTP/2を使用して配信されるため、古いプロトコルと比較してオーバーヘッドが削減されます。

ブラウザキャッシュ：Shopifyでは、キャッシュ可能なリソースのブラウザキャッシュを、設定可能な最長期間である1年に設定しています。これにより、ストアに再訪問したお客様は、より速い読み込み時間を体験できます。

Gzip圧縮：Shopifyでは、CSS、JavaScript、ドキュメント、ページにGzip圧縮を採用して、帯域幅を削減し、読み込み時間を改善しています。また、複数のファイルを取得するためにKeep-aliveも有効になっています。

画像の最適化：Shopifyでは、高度なアルゴリズムを使用してJPG画像を自動的に圧縮し、圧縮と視覚的な魅力を両立させています。画像は、より良い圧縮と高速な読み込みのために、WebP形式で提供されることがよくあります。

ファイルの最小化：Shopifyでは、ストアフロントから要求された際にCSSファイルとJavaScriptファイルを自動的に最小化し、機能に影響を与えることなくファイルサイズを削減します。

外部サービスの推奨事項が適用されない場合

外部サービスのスキャンツールでは、Shopifyストアには関係のない変更が提案される場合があります。

  • サーバーレベルの設定：サーバーのセットアップ、HTTPヘッダー、キャッシュポリシーに関する推奨事項は、Shopifyのインフラストラクチャーによってすでに最適化されています。
  • CDNの実装：Shopifyには高性能なCDNがデフォルトで含まれているため、CDNを追加する提案は不要です。
  • 圧縮設定：圧縮を有効にすることに関する推奨事項は、Shopifyのプラットフォーム全体で既に実装されています。

関連する推奨事項への対応

ストアの特定のコンテンツや機能に関連する推奨事項に焦点を当てます。

  • 画像の最適化：アップロードした画像が適切なサイズであり、推奨される形式を使用していることを確認してください。
  • アプリの評価：インストール済みのアプリがパフォーマンスへの影響を相殺するのに十分な価値を提供しているかどうかを検討してください。
  • テーマの最適化：パフォーマンスが最適化されたテーマを選択し、ページテンプレートのセクション数を制限してください。

読み込みが遅いページのトラブルシューティング

ストアの読み込みが遅い場合は、次の手順に従って問題を特定し、解決してください。

ステップ1：問題を確認する

  1. さまざまなデバイスやインターネット接続から、自分でストアの読み込み速度をテストしてください。
  2. インターネット接続に関するローカルな問題ではないことを確認するために、他の人にストアをテストしてもらってください。
  3. PageSpeed Insights などのテストツールを使用して、特定のパフォーマンス指標を取得してください。

ステップ2：原因を特定する

過剰なアプリの確認：ストアフロントでアセットを読み込むアプリが多すぎると、パフォーマンスが低下する可能性があります。インストール済みのアプリを見直し、販売に不可欠ではないアプリを削除してください。

大きな画像の確認：高画質の画像が多数あるページは、読み込みが遅くなる可能性があります。画像を最適化するか、表示される画像の数を減らしてください。推奨される画像のサイズについて詳しくはこちら。

遅いスクリプトの特定：一度にすべてが読み込まれる前にサイトが空白ページのままハングする場合、ブラウザの開発者ツールを使用して、読み込みが遅いスクリプトを特定します。解決については、アプリまたはテーマの開発者にお問い合わせください。

ステップ3：対処する

不要なアプリの削除：アプリをアンインストールしても、テーマからそのコードが自動的に削除されるわけではありません。完全に削除する手順については、アプリ開発者に連絡する必要がある場合があります。

画像の最適化：適切なファイル形式 (写真には JPG、透明度のあるグラフィックには PNG) を使用し、表示サイズに合わせて画像のサイズを変更します。

テーマのパフォーマンスを評価する：現在のテーマが大幅な速度低下を引き起こしている場合は、パフォーマンスが最適化されたテーマへの切り替えを検討してください。

オンラインストアのパフォーマンスに関するサポートを受ける

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

外部サービスのテーマを使用していてサポートが必要な場合は、テーマ開発者に連絡するか、Shopifyのウェブパフォーマンスエキスパートまたはサイトのパフォーマンスとスピードに対応できるShopifyパートナーを雇う必要があります。Shopify パートナーを雇うことについて詳しくはこちら。

パフォーマンスの問題がアプリに起因する場合は、アプリ開発者に連絡できます。

開発チームやエージェンシーパートナーがいる場合は、そのチームやパートナーに連絡して、さらなるサポートを求めることもできます。

トラブルシューティングのための技術情報とリソース

Shopifyのストアフロント、テーマ、またはアプリのパフォーマンス向上を目指す開発者の方は、各コアウェブバイタルに関する以下のリソースを確認できます。Shopifyテーマのパフォーマンスに関するベストプラクティスについて詳しくはこちら。

読み込み速度

最大コンテンツ表示 (LCP) は、画面上の最大の要素が表示されるまでの速さに基づいて、読み込み速度を測定します。最初のバイトまでの時間 (TTFB) と最初のコンテンツの描画 (FCP) は、問題の根本原因がどこにあるかをよりよく理解するのに役立つ補助的な指標です。Shopify Liquidストアフロントでの読み込みが遅い一般的な原因のデバッグについて詳しくはこちら。

視覚的な安定性

Cumulative Layout Shift (CLS) は、読み込み中にコンテンツが予期せずどのくらい移動するかに基づいて、視覚的な安定性を測定します。CLSのデバッグを深く掘り下げるには、ShopifyサイトでCumulative Layout Shift (CLS) を最適化する方法をお読みください。

インタラクティビティ

Interaction to Next Paint (INP) は、ほとんどのユーザーアクションに対してページが応答するようになるまでの時間に基づいて、インタラクティビティを測定します。たとえば、リンクやボタンのクリックなどのユーザーアクションです。

INPが低い場合は、テーマのコード、アプリのコード、または外部サービスやタグマネージャーのコードのいずれかから、ストアにJavaScriptが多すぎる可能性があります。最もパフォーマンスの悪いものからクリーンアップに取り組んでください。ページの読み込みで最もパフォーマンスの悪いJavaScriptを見つける3つの方法について詳しくはこちら。INPにまだ問題がある場合は、web.devのリソースで詳細を確認してください。