読み込み時間の遅いオンラインストアを何とかしたい！表示時間を短縮する12のステップ
通販サイトなどを中心としたオンラインストアは、裏でいろいろなシステムが動いているためどうしても読み込み時間が遅くなりがちです。
ですが、参入障壁が低いため、どの分野でも競争が激しくなってしまうオンラインショップ界隈では、
- 少しでも読み込み時間を短縮してユーザの直帰率、離脱率を下げたい
- なんだかGoogleも読み込み時間を検索順位の指標に入れてるらしいから、スピードを上げて順位アップしたい
という状況ですよね。少しでもマイナス点を減らして売上に繋げたいんのではないかと思います。
SEOに影響する効果は遅すぎなければそれほどないというのが定説ですが、直帰率や離脱率は思いっきりコンバージョンレートに直結してきます。とても大事です。
とはいえ、どうすれば…となってしまうのも事実ですよね。
そんな方に役立ちそうな記事が、Search Engine Landにありましたたので、紹介したいと思います。
▼12 Step Program For Improving The Load Speed Of Online Stores
「オンラインストアの読み込み時間を改善する12のステップ」です。
細かいポイントから大きな枠組まで挙げられているので、この順番を追って実践していくのはもちろん、チェックリストとしても、とてもいいんじゃないかと思いますよ。
大枠
12のステップですが、大きくは4つのステップにわかれます。具体的には、
- 現在のサイトの状況から、基準値を決める
- ページの種類にあわせて、目標とする許容範囲を決める
- サーバやファイルの読み出しを高速化する
- 月一回など、継続的に計測をしてい（他社とも比較する）く
です。とはいえ記事の中ではちょっと錯綜しているのですが…
それはともかく、では早速1番からいきます。訳者注と書いてない限りでは原文の著者の言葉です。
1.現在のサイトの状況から考えた、基準値を決める
- まずは、殆どの人が最初に見るであろう「トップページ」を計測する。
- 次に、人気のあるページを20ほどピックアップし、そこを計測する
- そして、最も売れている20商品の個別ページを計測する
- GoogleのWebMasterToolでサイトの平均値を見る
- 最後に、コンペティターのサイトと比較する（これは感覚値でしかないですね）
2.許容できるページサイズと読み込み時間を決める
Googleはページが読めるようになるまでに1.5秒以上待たせるのは良くないとしている。E-コマースとユーザビリティの専門家であるMichael Summers氏は、これを「3秒」としている。
Summers氏は、1000以上の実際のオンラインショップをユーザビリティとアイトラッキングラボを通じて見てきている。彼曰く、3秒以上経つといらいらし始めるそうだ。
なので、私は「3秒」という数字を基準値として考えている。
とはいえ、同じE-Commerceとは言ってもそれぞれのサイトごとに事情はぜんぜん違う。私のサイトは先月2秒まで下げることができた。これはオンラインショップというくくりで言えば相当速いことになるが、もっと時間がかかってしまう業界だってあるだろう。
また、ページの種類によって読み込み時間の許容量は変わってくる。具体的には
- トップページ：4秒
- 人気のある20エントリー：3秒
- カテゴリーページ：3秒
- 個別商品ページ：3秒
- コンテンツ、読み物系ページ：2秒
- 個別商品詳細ページ：5秒
といったあたりが、目安としていいのではないかと思う。
最も気にしている競合サイトの読み込み速度と比べて、この数字を適切なものに変えていってほしい。
3.ファイルをもっと速く読み込めることを知る
ファイルサイズは大きな問題の1つだ、しかし読み込み時間は、ファイルサイズだけではなく「ファイルの数」や「サーバの性能」にも大きく寄る。
先月私はYahoo!Storeを開発してるところのホームページを30ほど見た。
一番遅かったのは、何十もの画像やJavaScript、Flashを使った50MBくらいのサイトだったけれど、ワースト10の中には200KB程度しかないのに、サーバの性能が悪いせいで読み込み速度がとても遅くなっているところもあった。
4.最も速いホスティングサーバを見つけるには？
私（筆者）はネットワークには詳しくないのでよくわからない。なのでYahoo!SItoreを使っている。他のブログなどの運用経験から言って、たくさんの客を1つのサーバに押し込めているようなところはとても遅いと思う。
5.コンテンツデリバリーネットワークを使え
コンテンツデリバリーネットワーク(CDNs)は、画像や動画などのファイルを、通常のレンタルサーバのように単一のサーバから呼び出すのではなく、勝手にたくさんのサーバから呼び出しすようにしてくれるシステムのことだ。
また、ユーザが住んでいる地域に近いところのサーバを自動的に選んで、そこに接続するようにしてくれるので、それも相まってとても速くなる。（※訳者注：Amazon CloudFrontなどが身近なCDNsですね）
Yahoo! StoresはCDNを備えていて、画像やアイコンはCDNs経由で配信してくれるから、とても速くなるよ。
6.たくさんの画像を載せないといけないようなデザインはやめよう
7.キャッシュを有効活用できるようなしくみに
例えば極端な例だけど、1ページに800もの商品のサムネイル画像があるようなページはダメだ。20、せめて50くらいに収めたほうがいい。
- 画像は再利用できるようにできるだけデザイン側で調整
- 画像もきちんと容量を最適化する（ブロードバンドを過信しない）
事を忘れずに。
サードパーティのWIdgetは使いすぎないこと。
8.画像を最適化する
※基本的なことなので割愛します。数とか圧縮とかのお話。サーバ側はGZIP圧縮転送に対応しているところを選んで、画像を作る側はPhotoshopなどを使って、細かい作業ですがきちんと減色処理や圧縮処理をしてファイルサイズを小さくすればいいと思います。
ちなみに、個人的には位置ファイルの容量よりも、同時読み込み点数のほうがかなり影響が大きいと思います。
9.月に一回程度計測をする
10.GoogleのWebMasterToolで平均値をチェックする
（※私は知らなかったのですが定期的にメールでPUSHしてくれる機能もあるみたいですね。）
11.他社のツールを利用する
（※例えば「Pingdom.com」といったようなツールがあるそうです。これは、ChromeやFirebugのように、ネットワークを流れるデータを見られるツールです）
（自分のマシンで応答速度を計測する場合、気づいていないバックグラウンド通信や起動中のプロセス、あるいは同じネットワークを利用している人の状況によって、数値が簡単に変わってしまうので、外部のこのようなサービスの方が、もちろん100%ではありませんが、確度の高い測定ができそうですね）
12.ランディングページの直帰率を計測する
（※計測している応答時間と直帰率の間に相関関係が強ければ強いほど、スピードを下げた時の効果が高いと考えられます。逆にあまり相関がなければそれ以外の要素、例えばトップページのキャッチ画像やコピーなど、の改善に工数を割いたほうがいいかもしれませんね。）
終わりに
駆け足で書いていきました。1つ1つはどこかで聞いたことのある内容だったかもしれませんが、これをすべて行うと、それはなかなか大変です、
とはいえ、私の経験上もそうですがスピードアップに「銀の弾丸」はありません。コツコツと細かいことを積み上げていくしかないんですね。
これ以外にも、高速化については、CSSスプライトであったり、キャッシュコントロールであったり、スクリプトの非同期化読み込みであったりと、たくさんやれることはあります（やれることを知りたい方は、まずはGoogleのPageSpeedを使ってもらうのがいいと思います。）
Googleも、パンダアップデートで判断する「室の低いサイト」のシグナルの1つとして「15秒以内に直帰されて検索結果に帰ってくること」を上げているという話もありますので、できることから順番に早めに手を売ってみてはいかがでしょうか。
無料「ウェブ解析ガイドブック」のご案内
アクセス解析やウェブサイトの現場での運用について書いた初心者向けガイドブック、『「現場で使える」WEB解析入門』をリリースしました。
企業でウェブ解析を内製化したい!ノウハウを溜めたい！というあなたにぴったりです。約3万文字、ぜひ会社に一冊どうぞ。
無料でダウンロードできますので、ぜひお持ち帰り下さい。印刷も自由です。(^-^