誰も知らないShopifyサイトの表示速度について徹底解説
この記事の所要時間：5分
あなたのネットショップは表示速度が遅くないですか。
ユーザーはページ表示に時間がかかると待つことができず、1秒遅れると購入率が7%下がるといわれています。
ページの表示速度はGoogleの検索結果にも影響を与えるので、ネットショップにとってとても重要な要素です。
とはいえサイトの表示速度が健全かどうか、またその改善方法などもわからないことがたくさんあると思います。
そこで今回は、Shopifyサイトの表示速度の評価と改善方法について詳しく解説します。
本記事を読めばページの表示速度が改善され、ユーザーがストレスなくショッピングを楽しめるネットショップを実現することができます。
ページの表示速度がネットショップに及ぼす影響
ページの表示速度とは、URLをクリックした際に遷移した先のページが表示される時間です。
マーチャント自身はなかなか気が付きにくいですが、表示速度が遅いと様々な悪影響があります。
まずは、表示速度がネットショップに及ぼす具体的な影響をご紹介します。
ユーザーが離脱する
ほとんどのユーザーは、スマホアプリの表示速度に慣れているため、ブラウザで開くサイトなどは表示速度が遅いとストレスを感じてしまいます。
2018年のGoogleの調査ではページの表示速度が1秒から3秒になると離脱率が32%も増加するというデータが発表されています。
さらに表示速度が1秒遅れるとコンバージョン率が7%下がるというデータもあります。
それだけユーザーはページを読み込む時間を待てないという認識を持つことが大切です。
検索結果の順位が下がる
ページの表示速度はSEOの観点でも重要です。
あくまでも200以上ある評価項目の1つですが、ページの表示速度の改善はGoogleが検索結果の評価項目として挙げています。
また、表示速度は直帰率やページの滞在時間にも影響を与えるため、間接的にも評価を下げる可能性があります。
サイト表示速度の計測方法
では、実際にあなたのネットショップは、表示速度が健全なのか確認する方法をご紹介します。表示速度を確認する方法は2つあります。
Shopifyのレポート機能
まず1つ目は、Shopifyに標準搭載されているレポート機能です。
Shopifyの管理画面から「ストア分析 > レポート > オンラインストアの速度」をクリックします。
こちらでは現在の速度スコアを確認することができ、さらに過去7日間または過去30日間の速度スコアを確認することができます。
表示速度の改善を行なった際に、行なった施策の効果があったのかなど確認する際に役立ちます。
Page Speed Insights
もう1つの方法は、Googleの「Page Speed Insights」を使用した測定です。モバイルとPCそれぞれの表示速度を計測することができ、100点満点で評価します。
Page Speed Insightsを開き、URLの入力欄にあなたのショップのURLを入力します。「分析」をクリックすると結果が表示されます。
画面左上にある「モバイル / パソコン」でそれぞれの表示速度を確認することができます。
こちらの評価は、他サイトと比べて判断することも可能なので、相対的にあなたのサイト表示速度が速いか理解することができます。
また、実際に自身でサイトを開いてみて、ページを遷移する中で不便さを感じるかを定性的に判断することも重要です。他の人にもヒアリングすることで、客観的に評価することができます。
Shopifyでページの表示速度を改善する方法
次にShopifyサイトの表示速度の改善方法をご紹介します。簡単に取り組めるものもあるので、ぜひ参考にしてください。
表示速度が速いテーマを使用する
Shopifyテーマはそれぞれ特徴があり、サイトの表示速度が速いテーマが存在します。表示速度が速いテーマは以下のとおりです。
<表示速度が早いテーマ>
・Simple (無料)
・Editorial
・Boundless (無料)
・Debut (無料)
・Supply (無料)
・OS 2.0 テーマ
<参考記事>
Page Speed Scores of Every Shopify Theme
表示速度を後から改善するには工数がかかります。なので最初にテーマを選択する段階で表示速が速いテーマを使用することはとてもオススメです。
必要のないアプリを削除する
Shopifyはアプリによって機能が拡充され、利便性が高いネットショップを構築することができます。
ですが、一方でアプリが多いほどサイトの表示速度が遅くなるというデメリットもあります。
なので闇雲になんでもアプリを導入するのではなく、本当に必要な機能を考え、必要最小限に抑えるようにしましょう。
目安としては10個以内に抑えることがオススメです。
画像のファイルサイズを圧縮する
画像のファイルサイズの大きさは、ページの表示速度に影響を与えます。
ネットショップにおいて画像はとても重要ですが、画像によって表示速度が遅くなり、サイト自体がユーザーに見られないと本末転倒です。
無駄に大きいファイルサイズや必要以上の枚数がショップにある場合は、削減することをオススメします。
また、Shopifyアプリで画像のファイルサイズを圧縮することもできます。Shopifyの画像サイズについて詳しく知りたい方は以下の記事を参考にしてください。
クイックビューを活用する
少しテクニカルですが、ユーザーが求める情報を素早く表示する方法として、クイックビュー(ポップアップウィンドウ)の活用はとても有効的です。
クイックビューはページを遷移せずに、素早く情報を表示することができるので、わざわざページを遷移させるほどの情報ではない場合は、クイックビューの活用がオススメです。
しかし、ショップ内にポップアップが多すぎてもユーザーが複雑に感じる可能性があります。カスタマージャーニーを考えた上で、複雑にならない程度に活用することが大切です。
Shopifyでクイックビューを表示する方法について、詳しく知りたい方は以下の記事を参考にしてください。
Shopifyで快適なストアを実現するクイックビュー機能を徹底解説
スライドを少なくする
ネットショップに大きく表示されるスライドショーは、画像サイズや高い画質が求められるため、ページの表示速度に影響を与えます。
スライドの枚数を減らす、もしくは1枚に厳選してスライドショーにしないなどを一度検討してください。
あくまでも表示速度とデザイン性のトレードオフなので、あなたのショップやブランドにとって最適な方法を選択してください。
必要のないコードを削減する
コードのリファクタリング(整理)は、ページの表示速度を速くすることができます。
Liquidのコードを理解している方は、Shopifyのコード編集画面で不要なコードを削除しましょう。
特に以前に使用していたアプリのコードが残っている場合があります。ページビルダーなどもコード量が増えるので注意してください。
Page Speed Boosterを活用する
Shopifyアプリの「Page Speed Booster」は、サイト上でのユーザーの行動を予測し、あらかじめ遷移先のページを読み込みます。
ユーザーがリンクをクリックすると、あらかじめ読み込まれたページを表示するので、表示速度が速くなります。
サイト内でのスムーズなページ遷移を実現することで、ユーザーはストレスなくネットショッピングを楽しむことができます。
Page Speed Boosterは無料で利用でき、複雑な設定もないのでとてもオススメです。
【最後に】自らユーザーになろう
今回は、ネットショップの表示速度について解説しました。
ネットショップの表示速度は、ユーザーの視点に立って初めて気がつくことです。なので定期的に自らユーザーとなり、自身のショップを体験することが大切です。
また、ページの表示速度によってユーザー体験も大きく変わります。あなたのショップで表示速度が遅いと感じるようであれば、今回ご紹介した改善方法を試してみてください。
