サイトの表示速度、大事。

ページの表示速度はオーガニック検索のランキングに影響を与える重要な要素です。

ですが、ページスピードが影響するのは検索の表示順位だけではなく、そのページを見ている人間の体験そのものだと思います。検索順位を上げるためにページのレスポンスを改善するのではなく、レスポンスがよくユーザー体験が素晴らしいページだからこそ、それが評価されて検索順位も上がるという因果関係だと捉えたほうが健全です。

Googleも、このユーザー体験にまつわる指標を定量化した上で検索結果に反映しています。ロード時間や表示の安定性など、ユーザーにストレスを与えないことで離脱が減り、結果的にストア運営にもよい影響をもたらすことにつながります。

参考：Official Google Webmaster Central Blog: Evaluating page experience for a better web

ECサイトの運営において気にするべき項目は多岐にわたりますが、ページの速度はその中でも顧客体験に直接影響する、非常に優先順位の高いものです。

スピードは通常は目に見えないのであまり意識しないことが多いと思いますが、未来のお客さまを失わないためにも、可能な限り対策していきたいですね。

表示速度を向上させるための3つの方法（Shopifyの場合）

レスポンスがよいECサイトにはいくつかの共通点があります。ここでは Shopify に絞ってその対策を見ていきたいと思います。

レスポンスがいい Shopify サイトの条件

軽量な画像
軽量なテーマ
最低限のアプリ

1.軽量な画像

Eコマースでは通常のサイト以上にふんだんに画像が使われます。そのため、商品の写真や背景、利用シーン等のグラフィックが適切に圧縮されていない場合、ページの読み込み時間が遅くなる可能性がでてきます。

Shopify では写真や動画が過度にサーバーに負荷をかけないよう、コレクションやセクションの掲載数に制限がついていたり、公式テーマの多くには Lazy loading が組み込まれていたりしますが、それでもやはり重い画像が大量にあるページではパフォーマンスが悪化してしまいます。

たとえば、JPG は一般に PNG よりもファイルサイズを小さくできます。画像を適切なサイズとファイル形式にすることでページの読み込み時間を短縮することが可能です。

※画像の形式については以下の記事が参考になります

また、Shopify では画像編集を楽にするツールが無償で提供されています。

たとえば、公式の画像リサイズツールや、

1タップで画像切り抜き・背景透過ができるツール

画像エディタも公開されています。

ほかにも、公式のアプリストアにもたくさんの画像編集アプリがありますし、Shopify の公式ブログでも、たくさんの有料・無料ツールが紹介されています。ぜひ参考にしてみてください。

2.軽量なテーマ

読み込みにかかる時間は Shopify のテーマによって異なりますので、もし画像以外に自社サイトが重い原因がある場合、テーマが原因の可能性があります。

稼働中のテーマを切り替えるのにはパワーが要りますが、まずは Chrome の拡張機能である Shopify Theme Inspector を使用するなどして Liquid のレンダリングパフォーマンスを計測してみるのはアリだと思います。　

また、Shopify では管理画面のストア分析レポートから速度スコアを確認できます。（こっちの方が手っ取り早いかもしれません）

以下は、とあるECサイトのスコアです。見てみると、「ホーム」や「コレクション」の速度スコアは平均以上なので取り立てて大きな問題はなさそうに見えますが、一方で「商品」ページについてはスコアが 35 と低く、画像やレンダリング、アプリなどに問題がありそうなことが推察できます。

なお、Shopify の分析ツールは Google の Pagespeed Insights と連携していますので、その場でページのパフォーマンス診断や改善項目を確認することができます。（上記の画像では「インサイトを表示する」をクリック）

CSS や Javascript の大幅な改善が必要だったり、Theme Liquid のそのものの書き換えが必要だと判断されるような場合は、テーマの変更も選択肢に入ってくるかもしれません。

とはいえ、繰り返しになりますが稼働中のテーマを切り替えるのにはかなりのリソースを必要としますので、なるべく初期構築で重すぎるテーマは選ばないというのがポイントでしょうか。Shopify は最初に無料の試用期間がありますので、その段階である程度調べておきたいですね。

3.最低限のアプリ

ストアを運営していると、チャットボットによる顧客サポートやポップアップジェスチャー、表示上のギミックなど、さまざまな機能のアプリを試したくなりますし、実際にそれが顧客満足度やコンバージョン率に影響をおよぼす場合があります。

一方で、これらの画面表示へ影響を与えるアプリは、ページの表示速度とのトレードオフの関係でもあります。

Shopify のアプリはページが読み込まれる際にサーバーに追加のリクエストを行いますので、場合によってはページの肥大化をもたらし、サイトの速度を低下させる大きな要因になってしまいます。

原因の特定方法は既に記載したやり方の中に含まれていますが、アプリはストア運営に直結するものでもありますので、定期的に「このアプリは維持する価値があるのだろうか？」と自らに問う機会を確保しておきたいところです。

まとめ

Shopify のページパフォーマンスに必要な条件は以下の3つでした。

軽量な画像
軽量なテーマ
最低限のアプリ

この中では、特に画像は定期的に追加更新が発生しますので、今からでも見直しやすい項目ではないかと思います。

アプリについては月額課金のものも多くありますので、オペレーションの見直しとあわせて振り返りの項目に入れていただくのがよいですね。

もともと Shopify 自体は配信が非常に安定しているプラットフォームです。だからこそ、ショップ側でも表示速度に気をつけた運営をすることで、ユーザー体験をさらに引き上げられるのではないかと思います！