Shopifyの速度スコア機能でショップの速度をチェック

ECサイトの表示速度は、コンバージョン率や売り上げに直結する重要な要素です。Shopifyストアでも、アプリの追加や画像の掲載、テーマのカスタマイズなどによってパフォーマンスは変動するため、継続的なチェックと改善が欠かせません。

この記事では、速度スコアの概要や改善策、Shopifyストアの速度スコアを確認する方法などについて解説します。

Shopifyの速度スコアとは？

Shopifyの速度スコアとは、自社ストアの表示速度や操作性に関するパフォーマンスを把握するための機能です。Googleが提唱するCore Web Vitals（コアウェブバイタル）を中心とした「ウェブパフォーマンスレポート」を通じて、ストアの状態を確認できます。

ウェブパフォーマンスレポートに表示される数値はストアの状態によって日々変動するため、定期的なチェックと改善が大切です。

Shopifyの速度スコアの仕組み

Shopifyの速度スコアを確認できるウェブパフォーマンスレポートでは、Core Web Vitalsの3指標をもとに、ストアのパフォーマンスが計測されます。

• Largest Contentful Paint（ラージェストコンテントフルペイント：LCP）：ページの中で最も大きな画像やテキストが表示されるまでの時間（目安：2.5秒以下）
• Interaction to Next Paint（インタラクションtoネクストペイント：INP）：クリックやタップなどのユーザー操作にページが応答するまでの時間（目安：0.2秒以下）
• Cumulative Layout Shift（キューミュラティブレイアウトシフト：CLS）：読み込み中に画面のレイアウトが予期せずずれる量で、数値が小さいほど良好（目安：0.1以下）

これら3指標の計測には、過去30日間に実際のユーザーがストアを訪れた際のデータが用いられます。このように実環境のデータをもとにする計測手法は「リアルユーザーモニタリング（RUM）」と呼ばれ、Shopifyでは、データ提供に同意したChromeユーザーの閲覧体験を集約する、Googleの「Chromeユーザーエクスペリエンスレポート（CrUX）」のデータを採用しています。

また、Shopifyのウェブパフォーマンスレポートは、Core Web Vitalsの各指標を個別に確認できるため、表示速度と操作性、視覚的な安定性のうち、どこに改善余地があるかを具体的に把握しやすくなっています。

速度スコアと売り上げの関係

ストアの表示速度は、コンバージョン率や売り上げに影響を与える要素です。表示に時間がかかると、購入意欲が下がったり、別のECサイトへ移動されたりする可能性があります。

実際に、日常的にECサイトで商品を購入する20〜60代の1,012人を対象にした株式会社ギャプライズの調査では、表示遅延によって離脱した利用者のうち、5人に1人がもともと購入予定のなかった競合商品へ乗り換えた経験があるとされています。

また、Googleのweb.devで紹介されている楽天24の事例では、表示速度に関する指標を改善したページを対象にA/Bテストが行われました。その結果、最適化後のページではコンバージョン率が33.13%、訪問者あたりの収益が53.37%増加したと報告されています。

Core Web Vitalsと検索順位への影響

Core Web Vitalsは、Shopifyのウェブパフォーマンスレポートで使われている指標であると同時に、Google検索のランキングシステムでも重視されているユーザー体験の指標でもあります。ストアの使いやすさを把握するだけでなく、検索順位にも影響する要素のため、改善に取り組む価値は大きいといえるでしょう。

各指標には「良好」と判定される基準が設定されており、評価結果は「良好」「改善が必要」「低い」の3段階で表示されます。良好の目安は以下のとおりです。

• LCP：2.5秒以下
• INP：0.2秒以下
• CLS：0.1以下

3つすべてで良好の基準を満たすことが理想ですが、Core Web Vitalsはあくまでユーザー体験を把握するための指標です。数値を追うこと自体が目的にならないよう、本来の目的であるよりよいユーザー体験の提供を意識して活用することが大切です。

Shopifyストアの速度スコアを確認する方法

Shopifyストアでは、ウェブパフォーマンスレポートから速度スコアを確認できます。ウェブパフォーマンスレポートとは、実際のサイト訪問者のデータをもとに、ストアのCore Web Vitalsを確認できるShopify管理画面のレポートです。

管理画面では「オンラインストア」>「テーマ」からパフォーマンスの概要を確認でき、より詳しいレポートは「分析」>「レポート」から確認できます。

ウェブパフォーマンスレポートでは、Core Web Vitalsの3指標である「LCP」「INP」「CLS」が個別に表示され、各指標は「良好」「改善が必要」「低い」のいずれかで評価されます。判定にはサイト訪問者の75%が体験できている速度が使われるため、一部の高速または低速な環境のユーザーに引っ張られず、実態に近い数値が示されます。

さらに時系列、ページURL別、ページタイプ別のレポートを確認することで、どのページが全体のパフォーマンスに影響しているのかを把握できます。特に役立つのが、時系列レポートです。テーマの更新やアプリの追加、新しいコードの反映の前後で数値が変動していれば、その変更がパフォーマンスに与えた影響を判断できます。

Shopifyストアの速度スコアを改善する方法

• 画像と動画の容量を軽くする
• 不要なアプリと外部連携を整理する
• テーマのカスタマイズを見直す
• ファーストビューの読み込みを優先する

画像と動画の容量を軽くする

画像や動画のファイルサイズが大きいと、ストアの読み込み速度に大きく影響します。商品画像やバナーをWebPなどの軽量な形式に変換するなど、画像最適化を行うことで、表示時間を短縮できます。

動画を使う場合は、自動再生を避けたり、圧縮した動画ファイルを使ったりするのが有効です。また、動画はShopifyに直接アップロードせず、YouTubeに置いて埋め込む形も効果的です。

不要なアプリと外部連携を整理する

Shopifyアプリやフォント、チャットツール、広告タグなどの外部サービスは便利ですが、ストアの動作を重くする要因にもなります。利用していない、または機能が重複しているアプリ、使われていない連携機能は削除しましょう。読み込み数が増えるほど、表示が遅くなりやすくなります。

なお、アプリを削除したあともテーマ内にコードが残る場合があるため、削除後に表示速度に変化があるかを確認するとよいでしょう。整理したあとは、表示崩れやウェブ解析への影響がないかも確認しておくと安心です。

テーマのカスタマイズを見直す

テーマとは、Shopifyストアの見た目やレイアウトを決めるテンプレートのことです。セクションや装飾、アニメーションやスライダーを多く使うと、ページの読み込みが遅くなる原因になります。

不要なセクションやコードを見直し、軽量な状態に戻すだけで速度が改善するケースは少なくありません。

ファーストビューの読み込みを優先する

ファーストビュー（ユーザーがページを開いて最初に見る範囲）の表示が遅いと、「このサイトは重い」という印象を与えやすくなります。最初に表示されるメイン画像や重要なテキストは、できるだけ早く読み込まれるようにしましょう。

そのためには、重要な画像やフォントを先に読み込む「プリロード」や、外部サービスへの接続を前もって準備する「プリコネクト」の設定が有効です。

まとめ

ストアの表示速度は、コンバージョン率や売り上げに影響を及ぼす要素です。表示に時間がかかると、ユーザーが離脱しやすくなり、競合サイトへ流れてしまうリスクもあります。ECプラットフォームのShopifyでは、Core Web Vitalsを中心としたウェブパフォーマンスレポートでストアの状態や速度スコアを確認できるようになっています。実際のユーザー体験に近い形で、表示速度や操作性、視覚的な安定性を把握できる点が特徴です。

速度スコアの改善で特に効果が大きいのは、画像と動画の軽量化と、不要なアプリや外部連携の削除です。まずは現状を確認し、影響の大きい部分から手を入れていきましょう。