僕はshopifyで複数の自社ECサイトを運営していますが、サイトの表示スピードについて気にしたことはありますか？サイトの読み込み速度というのは、快適にショッピングをしてもらうためには重要な要素です。
今回自社ecサイトの1つの読み込みスピードをPageSpeed Insightsで計測してみたのですが、あまりにも結果が悪かった、、、、ので皆さんにその結果を共有させていただこうと思います。
あわせて、どうやってサイトスピードをあげるのかについてもまとめてみました。
モバイルユーザーは3秒も待てない
そもそも、ページ読み見込み速度が遅いとどのような弊害が起こるのかについて。
実はモバイルユーザーに限っては、ページの読み込みにたったの3秒かかるだけで、ユーザーの53%がページを離脱すると言われています。
広告費を払ったり、SEO対策を頑張ったりして、せっかくサイトにアクセスしてもらえたのに、ページの読み込みスピードが遅いだけで離脱されてしまうとはなんとも悲しい話です。商品ページを作りこんだとしても、ページを見てもらえなければ元も子もありません。
また、読み込みスピードが1秒遅れるだけで、コンバージョン率が7%も下がると言われています。
グーグルからペナルティをくらう
ユーザーの離脱率が上がるだけではありません。読み込み速度が遅いサイトは、グーグルからペナルティを課せられます。そうすると、SEOで上位表示されづらくなります。また、広告を出稿した際に、クリック単価が上がる弊害もあります。
GoogleのPageSpeed Insightsで計測してみよう
では、実査に自分が運営するサイトの読み込みスピードをGoogleのPageSpeed Insightsを使って測ってみましょう。
PageSpeed Insightsでは、モバイルとPCそれぞれのサイトスピードを測定できます。
まずは、PageSpeed Insightsにアクセスします。
ボックスに測定したいページのURLを入力し、分析ボタンをクリックします。
分析が終わると、このようにグラフと分析レポートが表示されます。100点満点評価で、数字が少なくなるにつれて評価が悪くなります。
自分の運営サイトの結果
では、おまえのサイトはどうだったん？ということで、自社ECサイトの中で最も数値の悪かったサイトの結果を公表させていただきます。
ちなみに、PageSpeed Insightsはページごとに調査する必要がありますが。今回はトップページを計測しています。
モバイルは驚愕の2点
はい、その結果がこちら。モバイルは驚愕の2点。
パソコンの結果が12点。
どうですか？やばいですよね？
このサイトはかなり力を入れて作りこんでいるサイトです。しかし、自社サイトの中でも、作りこんでいるサイトほど結果が悪い。。。これでは本末転倒です。
この数値はどれぐらいやばいんでしょうか？
他のサイトの結果を見てみよう
PageSpeed Insightsは、自社サイトだけでなく、ほかのサイトの結果も見ることが可能です。
ということで、いくつかのサイトの結果を見てみることで、自分のサイトの評価がどんなものなかをチェックしてみてます。同じくトップページを計測しています。
UNIQLO
ユニクロはモバイル39点。パソコン61点。
ZOZOTOWN
ゾゾはモバイル38点。パソコン75点。
AMAZON
アマゾンはモバイル45点。パソコン85点。
キナリノモール
キナリノモールはモバイル29点。パソコン78点。
北欧、暮らしの道具店
北欧、暮らしの道具店はモバイル29点。パソコン77点。
いくつかのサイトを調査した上での傾向
以上、有名なサイトを5つ調査してみました。
複数のサイトを調査したことで、いくつかわかったことがありますね。
・パソコンのほうがスコアが高く、モバイルのほうがスコアが低い
・パソコンのスコアがオレンジの中間ゾーン、モバイルのスコアがレッドの下位ゾーンに位置している
・モバイルがレッドゾーンだからといって、致命的なわけではない
・パソコンは60~80点、モバイルは20~40点がほとんど
今回調査したサイトは大手企業が運営するサイトです。ですので、ページ表示スピードの対策にもかなりの力を入れているはず。それでもこの点数ということは、100点を出さなくても全く問題なさそうですね。なぜなら、どのサイトもちゃんと売り上げているサイトだからです。サイトスピードだけでなく、ユーザビリティも考えないといけないということがわかります。
運営サイトがこれらのサイトと似たようなスコアであれば、現状維持で良さそうです。うちのサイトは論外ですけどね。笑
shopifyでの対策
まずはこの結果を真摯に受け止め、スコアをあげるための施策を施す必要があります。
僕はshopifyでサイトを運営しているので、shopifyでできる対策をベースにまとめてみます。
ちなみに、スコアの下にスクロールしていくと、こんな風に具体的に修正すべき項目が表示されるので、この数値をもとに改善できる項目を修正していきましょう。
画像サイズを圧縮&縮小化する
これはshopifyでなくてどのサイトでもそうですが、画像は圧縮＆縮小化してからアップするようにしましょう。ただ、下に記述しますが、shopifyのアプリを入れるのであれば、商品画像は縮小化しなくても問題ありません。
圧縮＆縮小化するにあたり、無料で使えるサイトとしてiloveimgがオススメです。
画像拡張子はJPGを使う
画像拡張子はPNGではなく、JPGを使いましょう。PNGよりJPEGのほうが画像ファイルが軽いためです。拡張子の変換もiloveimgで可能です。
余計な機能は削除する
たとえば、商品のクイックビューですが、クイックビューを使う明確な理由がなければこの機能はオフにしましょう。ほかにも、ニュースレターポップアップや、スライドショーなど、自分の中で使う理由が明確でないものはすべてオフにしておくのが無難です。
商品ページやコレクションぺージのサイドバーも、ユーザーにほとんどみられていないようであれば削除しましょう。
shopifyのアプリを使う
画像を最適化してくれる以下のようなアプリがあります。
料金：無料
料金：一部無料
料金：一部無料
料金：一部無料
個人的に「Bulk Image Edit ‑ Image SEO」は操作しやすい上に、料金体系もわかりやすくオススメです。
shopifyのアプリを減らす
トライアルでアプリを入れてみたけど、有料プランに移行せずにそのまま放置しているアプリはありませんか？使っていないアプリは削除しましょう。
使っていなくても、アプリがあるだけでサイトは重くなるので注意が必要です。
いらいないコードを削除する
liquidのコードがわかる人は、shopifyのコード編集画面でいらないコードを削除しましょう。特にヘッダー内に不要なコードがあれば削除するべきです。
対策後の結果
対策後の結果がこちら。まだまだ改善の余地はありますが、表示スピードはだいぶ速くなりました。
自社ECをPageSpeed Insightsを再テスト。
PC 4→68
Mobile 2→21
とりあえずはこれでいいか。
やったこととして、
・サイドバー削除
・クイックビュー削除
・shopifyのアプリBulk Image Editの有料プランで画像最適化
やったことはそれくらい。 pic.twitter.com/naxmsgQyg6— i..e (@ike20203) March 25, 2020
まとめ
以上、サイトのページ読み込み速度の重要性と、サイトを軽量化するための方法についてご紹介しました。
今回自分のサイトを調べてみてびっくりしましたね。良かれと思ってページを作りこんだのに、結果として悪い方向に進んでいたようです。
自分がオンラインショッピングするときのことを想像すると、ユーザーの気持ちがよくわかります。買いたい商品があっても、読み込み速度が遅いサイトでショッピングしていてははっきり言って商品を買う気も失せます。
この機会にサイトを改善して、今回調査したサイト程度には改善していきたいと思います！みなさんもぜひ自分のサイトがどうなっているか確認してみてください！
