Webパフォーマンス

ShopifyのWebパフォーマンスレポートで、AlignストアのCore Web Vitalsを監視・改善します。

注目のリンク

役立つ動画

Shopify Webパフォーマンス動画

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

ShopifyのWebパフォーマンスダッシュボードは、読み込み速度、操作への応答性、視覚的な安定性など、訪問者がAlignオンラインストアをどのように体験しているかを測定します。これを使用すると、最初のページ読み込みから、ポップアップなどのコンテンツによって予期せず発生する移動まで、顧客体験を把握できます。

これらの測定結果は、よりスムーズなショッピング体験、コンバージョン、見つけやすさにつながる改善の優先順位付けに役立ちます。Align固有の質問についてはCompany XYZがサポートできます。テーマのカスタマイズ、アプリ、ストアコンテンツの調査が必要かどうかを判断するには、Shopifyのレポートを使用してください。

Webパフォーマンスの測定方法

Webパフォーマンスは、Core Web Vitalsと呼ばれる主要な指標で測定されます。

指標	測定内容	良好な結果
Largest Contentful Paint (LCP)	最大の要素またはメインコンテンツが表示されるまでの速さに基づく読み込み速度	ページの読み込み開始から2.5秒以内にメインコンテンツが読み込まれる
Interaction to Next Paint (INP)	リンクやボタンの選択などの操作後に、ページが視覚的なフィードバックを提供するまでの時間に基づく応答性	200ミリ秒未満
Cumulative Layout Shift (CLS)	読み込み中にコンテンツが予期せず移動する量に基づく視覚的な安定性	0.1未満

Googleは、モバイル対応、安全なブラウジング、HTTPSセキュリティ、煩わしいインタースティシャルがないことも評価します。煩わしいインタースティシャルとは、プロモーション用ポップアップや年齢確認プロンプトなど、コンテンツ全体の表示を妨げるものです。これらの要素を総合することで、ページのパフォーマンスとユーザー体験を評価できます。

Webパフォーマンスが重要な理由

ストアのパフォーマンスは、顧客体験、コンバージョン率、見つけやすさに影響する可能性があります。

体験とコンバージョン

読み込みが速く操作がスムーズなストアは、デバイスや接続速度を問わず、より良い体験を提供します。サイトの動作が遅い、またはナビゲーションが難しい場合、訪問者は購入前に離脱する可能性が高くなります。

Webパフォーマンスを改善すると、ショッピングが簡単になり、コンバージョン率の向上を支援できます。

見つけやすさ

Googleなどの検索エンジンは、ページ速度をランキング要因として使用します。Core Web Vitals全体のパフォーマンスが低いページは、ストアがそれ以外の点で検索エンジン向けに最適化されている場合でも、検索順位が低くなる可能性があります。

パフォーマンスを改善すると、ストアの検索順位が上がり、検索結果での表示機会が増える可能性があります。

ストア機能とパフォーマンスのバランス

Alignストアには、テーマのカスタマイズ、アプリ、画像、動画、カルーセル、ソーシャルフィード、分析機能を追加できます。これらの機能は訪問者の体験を改善し、ストアでできることを広げますが、追加する機能はすべてCore Web Vitalsに影響する可能性があります。

一部の機能はページの速度を低下させたり、予期しない動作を引き起こしたりします。機能を追加または維持する前に、顧客にとってのメリットとパフォーマンスへの影響を比較してください。

次の質問を検討してください。

顧客の購入判断に役立つものは何ですか？ 詳細な商品ページへのリンクを備えたシンプルなホームページと、商品をすばやく表示・購入できる、より多機能なホームページのどちらが顧客に役立つかを検討します。
ページ上部に配置すべきものは何ですか？ ブランディング、注目画像、チェックアウトカートはパフォーマンスに影響する可能性がありますが、コンバージョンにも役立ちます。
顧客がスクロールした後に読み込めるものは何ですか？ 分析機能や商品レビューは、訪問者が到着した直後に読み込む必要はありません。機能がすぐに読み込まれるか確認する必要がある場合は、テーマまたはアプリの開発者に相談してください。

Webパフォーマンスデータを表示する

Webパフォーマンスレポートを表示するには、レポートのスタッフ権限が必要です。ダッシュボードにReal User Metrics (RUM)を表示するには、オンラインストアのパスワード保護を解除してください。

テーマページのパフォーマンス指標の概要から、Webパフォーマンスの時系列レポートを開けます。また、Shopify管理画面のレポートリストからすべてのWebパフォーマンスレポートを確認できます。

パフォーマンス指標の概要を表示する

テーマページのパフォーマンス指標の概要では、3つのCore Web Vitalsを時系列で簡単に確認できます。パフォーマンス指標の概要の詳細をご覧ください。

Shopify管理画面から、オンラインストア > テーマの順に移動します。
任意：日付ピッカーを使用して、今日、過去7日間、または過去30日間を表示します。
任意：概要で指標を選択してレポートを開きます。
- **LCP P75 (ms)**を選択すると、Largest Contentful Paint：時系列レポートが開きます。
- **INP P75 (ms)**を選択すると、Interaction to Next Paint：時系列レポートが開きます。
- Cumulative Layout Shiftを選択すると、Cumulative Layout Shift：時系列レポートが開きます。
- デバイスタイプ別のセッションを選択すると、デバイスタイプ別のセッションレポートが開きます。

Webパフォーマンスレポートを表示する

複数のWebパフォーマンスレポートをレポートリストから利用できます。設定パネルまたはShopifyQLクエリエディターを使用して、必要なデータに合わせてレポートを調整します。Shopifyレポートの使用の詳細をご覧ください。

Shopify管理画面から、分析 > レポートの順に移動します。
必要なレポートを検索します。
- :を検索すると、すべてのWebパフォーマンスレポートが表示されます。
- Largest Contentful Paintレポートを検索するにはcontentfulを検索します。
- Interaction to Next Paintレポートを検索するにはnextを検索します。
- Cumulative Layout Shiftレポートを検索するにはcumulativeを検索します。
レポート名を選択して開きます。

パフォーマンス指標の概要を理解する

Webパフォーマンス指標の概要では、過去30日間の実ユーザーデータを使用して、ストアを3つのCore Web Vitalsに照らして評価します。各指標は、上位75%のユーザー体験に基づき、良好、中程度、不良のいずれかにランク付けされます。

概要には次の内容が含まれます。

Largest Contentful Paint (LCP)：読み込み速度と、最大の表示要素が表示されるまでの速さを示します。
Interaction to Next Paint (INP)：応答性と、操作後にブラウザが次のフレームまたは表示上の変化を描画するまでの時間を示します。
Cumulative Layout Shift (CLS)：ページの読み込み中または移動中にコンテンツが予期せず移動する量を示します。
デバイスタイプ別のオンライン訪問者セッション。

指標が中程度または不良の場合は、Webパフォーマンスレポートを使用して考えられる原因を調査し、改善点を決定してください。

Webパフォーマンスレポートを使用する

パフォーマンス指標の概要にCore Web Vitalsを評価するための十分なデータが蓄積されたら、レポートを使用して結果に影響している可能性のあるページや変更を絞り込みます。これにより、どこを最適化するかについて、より適切な判断ができます。

顧客のデバイス、ネットワーク、場所は管理できません。世界中の訪問者が異なるデバイスやインターネット接続を使用するため、全体の指標が良好でも、特定の日付やページの結果が中程度または不良になることがあります。個別の外れ値ではなく、全体の結果に注目してください。

パフォーマンスを時系列で確認する

次のレポートを使用して、各Core Web Vitalの時間経過による変化を確認します。

デフォルトでは、これらのレポートには該当するCore Web Vitalの75パーセンタイルがミリ秒単位で表示されます。設定パネルを使用してレポートをカスタマイズし、時間範囲、日付のグループ化、デバイスタイプなどのディメンションとフィルターを調整します。レポートのカスタマイズの詳細をご覧ください。

折れ線グラフには、アプリのインストール、Alignテーマの更新、新しいコードなどの変更が時間経過によってCore Web Vitalに与えた可能性が示されます。次の内容が含まれます。

選択した日付範囲のWebパフォーマンス概要スコア。
パフォーマンスに影響する可能性のあるストアの変更を、カーソルを合わせて確認できる番号付きの縦方向イベント注釈。
良好、中程度、不良の結果の境界を示す横方向のしきい値線。

データテーブルの分布指標列には、良好（緑）、中程度（黄）、不良（赤）の各カテゴリのページ訪問数を示す棒グラフが含まれます。

ページURL別にパフォーマンスを確認する

注意が必要な個別のURLを見つけるには、次のレポートを使用します。

これらのレポートでは、デフォルトで該当するCore Web Vitalの75パーセンタイルがミリ秒単位で表示されます。設定パネル、ディメンション、フィルターを使用して、時間範囲、日付のグループ化、デバイスタイプなどを絞り込みます。レポートのカスタマイズをご覧ください。

ページURLレポートにはグラフィカルな視覚化は含まれません。データテーブルのみが表示され、デフォルトの主要ディメンションはページパスです。分布指標の棒グラフには、良好（緑）、中程度（黄）、不良（赤）のページ訪問数が表示されます。

ページタイプ別にパフォーマンスを確認する

ページカテゴリがパフォーマンスの問題に関係しているか確認するには、次のレポートを使用します。

これらのレポートでは、デフォルトで該当するCore Web Vitalの75パーセンタイルがミリ秒単位で表示されます。設定パネル、ディメンション、時間範囲、日付のグループ化、デバイスタイプなどのフィルターを使用してカスタマイズします。レポートのカスタマイズの詳細をご覧ください。

ページタイプレポートにはグラフィカルな視覚化は含まれません。デフォルトの主要ディメンションをページタイプとするデータテーブルと、良好（緑）、中程度（黄）、不良（赤）のページ訪問数を示す分布棒グラフが表示されます。

問題を調査する

パフォーマンス指標の概要を確認し、注意が必要なCore Web Vitalを特定します。
その指標について、3つすべてのレポートビューを使用して問題を絞り込みます。
- 時系列を使用して、スコアが変化した時期を特定します。
- ページタイプを使用して、特定のページテンプレートが影響を受けているか確認します。
- ページURLを使用して、影響を受けた具体的なページを特定します。
タイミングをストアの変更と比較し、特定したページと要素を使用して、対象を絞った改善を行います。
詳細な改善方法については、オンラインストアのパフォーマンスを改善するをご覧ください。

よくある質問

Google Lighthouseの速度スコアが削除されたのはなぜですか？

Google Lighthouseは、速度スコアにシミュレーション環境を使用します。簡単なスナップショットには役立ちますが、実際のユーザー体験を表すものではありません。Googleは現在、SEOランキングでCore Web Vitalsを優先しています。Googleから詳細を確認してください。

まだスコアがないのはなぜですか？

ストアがパスワードで保護されています。 パスワードで保護されたストアには、Core Web Vitalsの生成に必要な実ユーザートラフィックがありません。ユーザーがサイトを訪問できるよう、パスワードページを削除してください。
ストアにまだトラフィックがありません。 ページビューがなければ、報告する実ユーザー指標もありません。

トラフィックはあるのにCore Web Vitalのスコアがないのはなぜですか？

Core Web VitalsはGoogleの製品で、現在はChromiumベースのブラウザでのみ利用できます。SafariやSafari iOSなどの最新ブラウザも類似の技術を使用しているため、指標はユーザーがウェブサイトを体験する方法を正確に表します。

一部の指標にはスコアがあるのに、他の指標にはないのはなぜですか？

各指標は体験の異なる部分を測定し、異なる訪問者の活動に依存します。たとえば、Largest Contentful Paintはページの読み込みを測定し、Interaction to Next Paintは操作後にページが視覚的に応答する速さを測定します。訪問者がページを操作しない場合、INP指標にスコアが付かないことがあります。

スコアが変化したのはなぜですか？

トラフィック量やストアの更新により、スコアが変化することがあります。トラフィックが少ないために大きく変動する場合は、週次または月次のフィルターを試してください。

商品をインポートした、コレクションを作成した、Alignを変更した、そのコードをカスタマイズした、またはアプリを追加した後にもスコアが変化することがあります。オンラインストアのパフォーマンスに影響する要因について学んでください。

スコアまたはランキングを改善するにはどうすればよいですか？

改善方法については、オンラインストアのパフォーマンスを改善するをご覧ください。

ダッシュボードのスコアが他のツールと異なるのはなぜですか？

Webパフォーマンスダッシュボードが他のツールと異なる理由は次のとおりです。

タイムゾーン。 ダッシュボードデータはUTC標準を使用するため、他のツールのタイムゾーンと異なることがあります。
データ収集。 ダッシュボードは、Chrome、Opera、Edge、Samsung InternetなどのChromiumブラウザに加え、Firefoxからも、より広範なデータセットを収集します。GoogleのPageSpeed Insightsなどのツールは、オプトインしたChromeブラウザのCrUXレポートを使用します。CrUXデータの詳細をご覧ください。
パフォーマンスに関するガイダンス。 結果を比較したり変更を計画したりする前に、オンラインストアのパフォーマンスを改善するをご覧ください。

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

オンラインストアのパフォーマンスには多くの要因が影響します。管理できる要因もあれば、顧客やインフラストラクチャに依存する要因もあります。まずWebパフォーマンスレポートを確認し、現在の結果を把握してください。

管理できない要因

顧客のデバイス、ネットワーク、場所

顧客はさまざまな場所、デバイス、インターネット接続から訪問します。そのため、同じストアでも訪問者によって読み込み速度が異なる場合があります。

顧客からストアが遅いと報告された場合は、次の点を確認してもらってください。

ブラウザが最新の状態である。
最近ブラウザのキャッシュを消去している。
インターネットサービスプロバイダーで障害やサービス低下が発生していない。

Shopifyのインフラストラクチャ

Shopifyは、ストアの帯域幅を制限せず、高速でグローバルなサーバーでオンラインストアをホストします。Shopify StatusでShopifyストアのステータスを確認してください。

継続的なインフラストラクチャとコードの改善は、パフォーマンス指標に反映されることがあります。次のサービスや機能も速度に影響する可能性があります。

コンテンツ配信ネットワーク（CDN）

CDN（コンテンツ配信ネットワーク）は、コンテンツ > ファイルにアップロードされたコンテンツなど、画像やその他のファイルを保存します。ShopifyはCloudflareが運営するグローバルCDNを提供し、世界中でストアをすばやく読み込めるようにしています。

CloudflareのステータスページでCDNの可用性を確認してください。

ローカルブラウザキャッシュ

ストアは一部の要素を顧客のローカルブラウザストレージに一時的に保存します。次回の訪問時には、ブラウザはサーバーに再度リクエストする代わりに、キャッシュされたリソースを読み込めます。

Shopifyは、キャッシュ可能なストアリソースの各ファイルの有効期間を1年に設定します。キャッシュ可能なリソースには、画像、PDF、JSファイル、CSSファイルが含まれます。

サーバー側ページキャッシュ

ページもサーバーにキャッシュされます。初回のページ読み込みは遅くなることがありますが、訪問者がキャッシュされたコピーを受け取るため、後続の読み込みは速くなる場合があります。

`content_for_header`内のアセット

content_for_header Liquidオブジェクトは、パフォーマンス分析や動的チェックアウトボタンなどのオプション機能を含む、さまざまなオンラインストア機能で使用されるアセットを追加します。このオブジェクトと関連アセットの読み込みはストアの速度に影響します。Shopifyはこのタグとアセットの最適化を続けています。

管理できる要因

アプリ

ストアの機能や外観を変更するアプリは、実行できるようにAlignへコードを追加する場合があります。不要なアプリ機能を削除、並べ替え、無効化すると、パフォーマンスが改善する可能性があります。

アプリがストアの速度を低下させている可能性がある場合は、次の手順を実行します。

使用していないアプリ機能を無効化するか、不要になった場合はアプリを削除します。オンラインストアの機能と速度のバランスを検討してください。
アプリを削除する際は、インストール時に追加されたコードの削除も検討してください。ほとんどのアプリは独自のコードを自動的に削除しますが、アプリ開発者に確認してください。一部のアプリは、アプリ名を含む{% comment %}タグでコードを識別します。使用していないアプリコードを削除すると、不要な機能のコードが実行されなくなり、テーマの保守が容易になります。
アプリ開発者に相談してください。

Alignテーマとカスタマイズ

AlignはLiquid、HTML、CSS、JavaScriptを使用します。カスタマイズによってファイルサイズが増加し、Webパフォーマンスに影響する可能性があります。

Alignまたはカスタマイズがパフォーマンス低下の原因になっている可能性がある場合は、次の手順を実行します。

使用していないテーマ機能を無効化します。オンラインストアの機能と速度のバランスを検討してください。
システムフォントを検討してください。
Align固有の質問については、Company XYZのドキュメントを確認するか、Company XYZサポートにお問い合わせください。

テーマまたはアプリの機能

有効になっている機能はパフォーマンスに影響する可能性があります。たとえば、クイックビューのポップアップによって、コレクションページ上のすべての商品から情報が事前に読み込まれる場合があります。顧客が使用しないデータを読み込むと、価値を追加せずにページの速度を低下させる可能性があります。

不要な機能を無効化します。オンラインストアの機能とパフォーマンスのバランスを検討してください。
機能がデータを事前に読み込むかどうかを、テーマおよびアプリの開発者に確認してください。

複雑または非効率的なLiquidコード

ストアの表示に使用されるほぼすべてのLiquidは編集できますが、複雑な処理を繰り返すとLiquidのレンダリング時間が増加し、全体的なパフォーマンスに影響する可能性があります。たとえば、商品をループ内で並べ替えるのではなく、商品をループ処理する前にコレクション内の商品を価格順に並べ替えます。商品ごとに順序は変わらないため、繰り返し再計算すると処理時間が増加します。

コードが最適化されていないことが懸念される場合は、次の手順を実行します。

Shopify Theme Inspector for Chromeを実行して、ストアページの速度を低下させるコード行を特定します。
Shopify Partnerに依頼して、非効率または不要なコードを特定します。

画像と動画

サイズの大きすぎる画像や表示領域外にある画像は、より重要なページコンテンツの読み込みを遅らせる可能性があります。顧客が大きな画像の読み込みを待つと、ストアの動作が遅く感じられることがあります。

Shopifyには、この影響を抑えるための保護機能が含まれています。

コレクションページには50商品を超えて追加できず、ホームページには25セクションを超えて追加できません。
多くのテーマは、現在画面に表示されていない画像を遅延読み込みします。
多くのテーマは、画像が表示される画面サイズに基づいて画像サイズを読み込みます。

これらの保護機能によって、画像や動画がパフォーマンスに影響することを完全に防げるわけではありません。メディアがストアの速度を低下させている可能性がある場合は、次の手順を実行します。

画像最適化ガイドを確認します。
注目画像のスライドショーを2～3枚に制限するか、注目画像を1枚使用します。
テーマで画像を使用する最適な方法をテーマ開発者に確認します。

フォント

訪問者のデバイスにすでにないフォントは、ブラウザがそのフォントでテキストを表示する前に配信する必要があるため、フォントはパフォーマンスに影響します。カスタムフォントはページにファイルを追加し、サイズが大きい、または最適化されていないファイルは、訪問者がダウンロードする量を増やします。

カスタムフォントは慎重に使用してください。可能な場合は、最新の最適化されたフォントファイルを選択し、不要なウェイト、スタイル、文字セットを避けます。Shopify独自のフォントライブラリのフォントはShopifyテーマでの使用に最適化されていますが、フォントファミリーの数を少なく保つことをおすすめします。

一般的な目安として、1つのショップで使用するカスタムフォントファミリーは2つ以内にします。たとえば、見出し用に1つ、本文用に1つを使用します。フォントファミリーが増えるほどダウンロードするファイルも増えるため、特にモバイルデバイスや低速な接続では読み込みが遅くなる可能性があります。

使用上の注意

全体的な傾向から始めます。 1つの弱いページや日付に反応するのではなく、概要のランクが一貫して中程度または不良であるCore Web Vitalを優先します。
順番に調査します。 時系列レポートで変更が発生した時期を確認し、ページタイプとページURLのレポートで影響を受けたテンプレートとページを特定します。
変更と顧客価値を比較します。 ショッピングに役立つ機能は維持し、価値がほとんどなく不要なデータを読み込む機能は無効化または遅延させます。
トラフィック量を考慮します。 トラフィックが少なく日次データが大きく変動する場合は、週次または月次のフィルターを使用します。
対象を絞って変更します。 可能な場合は、一度に1つの原因と考えられるものを変更し、結果を判断する前に十分な実ユーザーデータが蓄積されるまで待ちます。