スタッフブログ

その1秒が売上を左右する!5分でわかる「楽天スマホページの表示高速化」

スマホページ高速化

こんにちは、コンサルタントの大邉です。

みなさん、スマホページの表示を早くする(=軽くする)のが、売上アップに役立つってご存じでしたか?

楽天界隈では、まだそれほど話題でもありませんが、最近、ブロガーやWEBマーケターの間では、「スマホページの表示をいかに早くするか」が議論になっています。なにせ、「表示が遅い」だけで、スマホのお客さんはどんどん離脱、検索の順位まで落とすような時代です。Googleも表示時間の計測ツール(後述)をリリースしました。EC業界も、そろそろ本腰を入れて考えていく時なのだと思います。

ということで、楽天向けに、技術に詳しくない方でも、5分でわかるように対策をまとめてみました。単純作業をやりさえすれば、着実に売上アップに貢献してくれるだろうお話です。対応の足がかりにご活用ください。(楽天出店者さん以外の方もどうぞ)

なお、便利な「チェックリスト」をご用意しました。抜け漏れ対策だけでなく、社内のスタッフさんや外注先に渡す用途としてもどうぞ!スキマ時間で進めてもらえば、ほどなく対応も済むはずです。

まず以下からダウンロードし、記事とあわせてご確認ください。
≫チェックリストを無料でダウンロード(要メールアドレス)

そもそも何の話?

要するに、「スマホページのアクセス~表示までの時間を短くしましょう」というお話です。

理由はシンプル。表示が遅いと、お客さんは逃げるし、検索エンジンの評価も下がるしで、何も良いことがないからです。

遅いページはユーザーに避けられる

スマホユーザーは、ほんの数秒、表示が遅れただけで離脱してしまいます。

具体的な影響度は、こんな感じだそうです。

表示速度が1秒から3秒に落ちると、直帰率は32%上昇
表示速度が1秒から5秒に落ちると、直帰率は90%上昇
表示速度が1秒から6秒に落ちると、直帰率は106%上昇

(参照)海外SEO情報ブログ『表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命』

サイト運営者からすれば、驚きの数字ですよね…。

でも、これって言いかえれば、「表示速度が6秒→1秒 = お客さんの数も2倍」ということでもあります。(理論上ですが)

そもそも楽天自体が重いので、1秒台はまあ難しいですが、それでも今まで表示時間を気にしてこなかったこなかったお店にとっては、お客さんを増やす伸びしろと言えそうです。

検索エンジンにも嫌われる

離脱するユーザーが増えれば、アクセス数が減って、売上も落ちますよね。そうなれば当然、ページ評価も下がり、楽天サーチの検索順位にも悪い影響がでます。

これはGoogle検索(=Yahoo検索)でも同じです。むしろ、こちらの影響こそが大きいです。そもそもGoogleはページの評価項目に表示速度を含めていますし、これから「モバイルファーストインデックス」(=スマホページの品質で検索順位が決まる仕組み)も始まります。そのため、今後、ますますページ速度の重要性は高まっていくと考えられます。

高速化の手順

ということで、早いところ対策を進めましょう。

手順はおおまかに以下のとおりです。

  • 1:まずはいまの自店舗の表示速度を知る
  • 2:表示を早くする方法を確認し、ページを改善する
    それぞれツールを使って進めます。(どちらもよく似たツールですが、微妙に役割が異なりますので使い分けています)

1:Test My Siteで今の速度と離脱率を知る

Test My Siteは、モバイルページの表示速度計測ツールです。所要時間や予測離脱率などを確認できます。

>>Test My Siteはこちら
testmysite

使い方は簡単、測定したいページのURLを入力するだけ。ダウンロードやインストールは不要です。確認も1ページ1~2分で終わります。

ちなみに某有名店鋪の結果がこちら。
離脱率

なんと14秒もかかっていて、32%が離脱!
あくまで目安でしょうけれど、本当にこれだけのユーザーを逃しているとしたら恐ろしいですね。

2:PageSpeed Insightsで解決策を確認

自店舗の速度がわかったら、どこを手直しすれば良いかを調べます。
PageSpeed Insights(ページスピードインサイツ)というツールを使います。これもURL入力するだけの簡単操作です。

>>PageSpeed Insightsはこちら
pagespeedinsights

機能的にはほぼTest My Siteと同じですが、コチラのツールは、どの「画像が無駄に大きいか」「HTMLやCSSの改善点はどこか」などを1つ1つ丁寧に教えてくれます。
トップページや、売れてる商品ページで調べてみてください。

こんな感じで教えてくれます。
画像軽量化
このお店の場合は、軽くできる画像がたくさんあるようです。(7.1MB削減はデカい!

楽天店舗向け!スマホ高速化3つのポイント

改善点がわかったら、あとはガンガン更新して行くだけなんですが、PageSpeed Insightsのヒントは、技術者向けで正直わかりづらいんですよね…。

そこで、上記ツールのヒントをもとに、「楽天店舗が対応しておきたい主な高速化対策」を平たくまとめなおしました。もちろん、これだけで万事OKとはいきませんが、それなりに効果も期待できると思います。以下、確認していきましょう。

※作業前のバックアップは忘れずに!
※スマホページの自動生成ツールを使っている場合は、「1:画像まわりの調整」だけでも対応しておきましょう。

0:まずは「チェックリスト」をダウンロード

色々な箇所を、細かく直しますので、抜けモレのないよう、「チェックリスト」の活用をオススメします。以下のボタンから無料でダウンロードできます。お気軽にどうぞ!(要メールアドレス)

download

RMSの編集画面にジャンプするリンク機能付きです。上から順番に直していきましょう。
チェックリスト

作業が完了したら、項目右側の空のセルに印を付けて、進捗を管理しましょう。大バナーの画像軽量化、削減が終わったら、完了日を記入しておくイメージです。各項目、左から右に向かって1つ1つ潰していってください。

※途中で作業を止めても何の問題もないので、ちょっとしたスキマ時間でゆっくり進めましょう。

1:画像まわりの調整

画像サイズを軽くする

ページで使う画像を、軽くしたものに置き換えます。高速化はもちろん、R-Cabinetの容量削減にもなりますし、真っ先に検討したい対策です。

画像の軽量化には、TinyPNGというウェブツールがおすすめです。ドラッグ&ドロップだけで作業を完了できます。
>>TinyPNGはこちら
tinypng

画質の劣化も気にならない(というか、ほぼわからない)レベルです。素晴らしい。
画質比較

画像を別のものに置き換えて削減

「ムダな画像」は、なるべくページに載せないようにしましょう。
楽天でよく見るのが「画像化した説明文章」です。こんな感じ。
文字だけの画像

これは表示速度だけでなく、SEO的にも宜しくありません。テキストで事足りるものはテキストで伝えましょう。(ただし、スマホページ冒頭の「商品画像」に載せる分には別です)

※ただ、この作業に関しては、手間がかかります。今後の改善テーマとして記録をしておき、余裕のあるときに都度対処でも良いでしょうね。

2:不要なHTML情報を削る

今のページに不必要なHTMLを削ります。

コメントアウト

コメントアウト(非表示箇所)が多いと、読み込み時間が長くなります。特殊なHTMLコードの始まりと終わりを示す目印くらいなら良いのですが、セールや配送遅延の告知用の膨大なHTMLをまるごとコメントアウトで残している場合は、面倒でも削っておいたほうが良さそうです。

ゴミタグ

無駄なタグや、改行、スペース、インデントなど、いわゆる「ゴミタグ」を取り除きます。ホームページビルダーなどのソフトを使っている場合は、特に注意が必要です。画像調整ほどの軽量化にはなりませんが、無駄は無駄なので、対策しておきましょう。

インラインフレーム(上級者向け)

何かと便利なインラインフレームですが、「読み込みにものすごく時間がかかる」という大きな弱点があります。RMSのスマホページで(一応は)使用が制限されているのも、こうした所が一因だと思われます。

デザイン調整や、導線の確保、更新の手間削減などの都合もありますから、なかなか対応は難しいかもしれませんが、もし使わずに済むところがあれば工夫してみましょう。

3:CSSを圧縮

CSSをアレコレ使って店構えを工夫しているお店は、CSSの圧縮も検討しましょう。コードを貼り付けて、ボタンを押すだけで自動圧縮できる便利サイトもあります。手間なく、機械的に対応できますので、バックアップを取った上で試されることをオススメします。

>>Online JavaScript/CSS Compressor
CSS compressor

おわりに

以上、主に楽天出店者さんに向けて、スマホページ軽量化の手順をご紹介してきました。

色々とお伝えしてきましたが、「表示が早い=売れる」ではありませんし、先述したツールで合格を取らないとダメ、ということでもありません。

軽量化に夢中になりすぎて、お客さんの心を掴むような写真まで取り去ってしまうと、離脱は減らせても、転換が取れず、かえって売れなくなってしまいます。本末転倒ですよね。(ファッション、インテリア、雑貨など、ビジュアルでの訴求が重要な商材は特に注意!

現実問題、できること・できないことがあると思います。ただ、まったく高速化を意識できていないのは宜しくないはずです。今後の世の流れもふまえ、「ページを軽くしよう」という観点は、ぜひ頭の片隅に置いておきましょう。

ぜひ、この記事を使って、改善を進めてみてくださいね。

この記事を書いた人

大邉 勇介
TSUTAYAにて、リアル店舗の新規出店業務に携わる。マーケティングからコンセプト立案、在庫調達、売場作成まで幅広く経験。2000坪の大型店、海外、図書館内出店まで、手掛けた店舗は120を超える。楽天市場の超ヘビーユーザーでもあり、豊富な事例知識を使った提案に強みを持つ。映画の目利きに自信あり。

このブログについて

中小ネットショップ専門のコンサルティングを行う「コマースデザイン株式会社」の社員ブログです。

値引きや広告に頼らない販促施策を中心に、小さな会社や1人事業のための業務改善・組織運営術など、経営全般にわたって支援をしています。

当社について

Eコマースの運営ノウハウ本を出版し、10回以上増刷されて業界で1位のベストセラーとなりました。



弊社の知見や取り組みは、NHKなど多くのメディアでも紹介されています。

ネットショップ運営相談室

サイト内検索

代表ブログ

コマースデザイン社長ブログ「ECバカ一代」