オンラインストアのパフォーマンスを向上させる

このページはApr 24, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/web-performance/improving-web-performance?utm_campaign=Guru+Ask&utm_medium=Forum&utm_source=Socialをご覧ください。

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

ただし、オンラインストアに追加する各機能は、ストアのパフォーマンスに影響を与える可能性があります。一部の機能により、サイトの動作が遅くなったり、予期しない動作が発生して、ユーザーエクスペリエンスに影響が及んだりする可能性があります。

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

  • 最大コンテンツの描画 (LCP) で測定した読み込み速度
  • 累積レイアウトシフト (CLS) で測定したレイアウトの安定性
  • 初回入力遅延 (FID) と次の描画へのインタラクション (INP) で測定したユーザーインタラクションへの反応

ウェブパフォーマンスを最適化すると、お客様はサイトにとどまり、変換される可能性が高くなります。詳しくは、ウェブパフォーマンスが重要な理由をご覧ください。

目次

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

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

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

ウェブパフォーマンスに影響を与える要素

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

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

つまり、ウェブパフォーマンスを向上させるためには、以下に注力する必要があります。

  • 最適化された最新のOnline Store 2.0テーマを使用します。Shopifyが提供するOnline Store 2.0テーマはすべて無料で、ウェブパフォーマンスが最適化されています。さらに、他の多くの外部サービステーマもウェブパフォーマンスが最適化されています。最新のテーマパフォーマンスデータを確認できます。
  • インストール済みアプリと外部サービスコードを評価して、潜在的なパフォーマンスの損失を相殺するのに十分な価値を生み出しているかを確認してください。
  • タグマネージャーを監査して、未使用または価値の低いタグを削除します。 タグとタグマネージャーのベストプラクティスについての詳細をご覧ください。

テストツール

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

ウェブパフォーマンスのダッシュボード

Shopifyが提供するウェブパフォーマンスのダッシュボードのレポートでは、Core Web Vitalsを使用して、オンラインストア上での実際のユーザーエクスペリエンスを測定できます。

PageSpeed Insights

GoogleのPageSpeed Insightsを使用して独自のレポートを実行し、ストアのページに関するより詳細な指標を表示することもできます。

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

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

あなたが外部サービスのテーマを使用していてサポートが必要な場合は、テーマ開発者に連絡するか、Shopifyウェブパフォーマンスのエキスパートを雇う、または、Shopify パートナーを雇う必要があります。詳しくは、Shopify パートナーの雇用についてをご覧ください。

パフォーマンス上の問題がアプリから発生している場合は、アプリ開発者にお問い合わせください。

開発チームまたはエージェンシーパートナーに協力してもらえる場合は、問い合わせてさらなるサポートを受けることもできます。

トラブルシューティングに関する技術的な情報とリソース

Shopifyのストアフロント、テーマ、またはアプリのパフォーマンス向上を目指す開発者は、Core Web Vitalごとに以下のリソースを確認できます。Shopifyテーマのパフォーマンスのベストプラクティスについての詳細をご覧ください。

読み込みスピード

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

視覚的安定性

累積レイアウトシフト (CLS) は、読み込み中にコンテンツの予期しないシフトがどれほど発生するかに基づいて、視覚的安定性を測定したものです。CLSのデバッグを深く掘り下げるためには、「Shopifyサイトの累積レイアウトシフト (CLS) を最適化する方法」を参照してください。

インタラクティブ性

初回入力遅延 (FID) は、リンクやボタンのクリックなどの初回ユーザーアクションに対してページが反応するのにかかる時間に基づいて、インタラクティブ性を測定したものです。これはCore Web Vitalsでは次の描画へのインタラクション (INP) によって置き換えられました。現在ウェブパフォーマンスダッシュボードに INP を追加しています。

FIDやINPの問題に直面している場合、ストア内にテーマコード、アプリコード、または外部サービス/タグマネージャーコードに由来するJavaScriptが多すぎる可能性があります。最悪の違反者のクリーンアップに取り組みましょう。詳細はページ読み込み時におけるJavaScriptの最悪の違反者を見つける3つの方法をご覧ください。INPで引き続き問題が発生している場合は、ウェブサイトのリソースに関する詳細をweb.devでご確認ください。

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

無料体験を試す