[対象: 上級]
ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。
そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。
スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman（ジョナサン・コールマン）氏です。
ウェブサイトのパフォーマンス最適化
サイトを高速化する理由
- コンバージョン率の最適化
- カスタマーエクスペリエンスとカスタマー満足度の向上
- 直帰率を下げる。
- 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。
- 全体的な競争力を高める。
- 運用費を節約する。
数字で見るページスピード
- Googleではページスピードが検索の1%に影響している。
- ユーザーがページ表示に待てるのは2秒まで。
- 3秒以上かかると40%以上のユーザーは離脱する。
- フォーチュン500の企業のサイトは平均で表示に7秒以上かかっている。
- 表示が1秒遅れるごとにコンバージョン率は7%落ちる。
- 表示が1秒遅れるごとに顧客満足度は16%落ちる。
- 速いサイトはインフラと公開にかかるコストを50%かそれ以上削減する。
ウェブサイトのパフォーマンスを最適化するステップ
1. 勉強する。
- Exceptional Performance – Yahoo! Developer Network
- Web Performance Best Practices – Make the Web Faster — Google Developers
- Steve Souders – High Performance Web Sites
2. ツールを使う。
3. 有効期限がずっと先のExpiresヘッダーを返す。
例:
Expires: Tue, 06 June 2023 20:00:00 GMT
静的なページオブジェクトのリロードに役立つ。画像だけでなくスクリプトやスタイルシート、Flashコンポーネントなどすべてのコンポーネントに使うといい。
4. Javascriptを重複させない、使わないCSSを削除する。
不必要なHTTPリクエストを発生させ、Javascriptを余分に実行してしまう。
5. link要素でスタイルシートを指定する。@importは避ける。
例:
<link rel="stylesheet" href="jacob.css"> <link rel="stylesheet" href="edword.css">
同時ダウンロードが可能になり、余分な遅延を防ぐ。
6. リダイレクトを避ける。
待ち時間を減らせる。
7. CSSスプライトを使うとHTTPリクエストを減らせる。
※鈴木補足: 「CSSスプライト (CSS Sprites)」は、複数の画像を1つにまとめて必要な部分だけをCSSで表示させる技術です。
共通して使われる画像はスプライトに含めるといい。転送量を削減できる。
CSSスプライトを利用すべき条件
- 画像を一緒に読み込むとき
- 同系色のとき
- PNG/GIFのとき
- 画像が小さくかつキャッシュできるとき
- （大きなJPEGや写真には使わない）
下はREI.comのCSSスプライト（クリックで拡大）。
下はGoogle DoodleのCSSスプライト（クリックで拡大）。このアニメーションは、CSSスプライトを利用して動かしている。
8. サイトのパフォーマンスを最適化した結果
- Googlebotのページのダウンロード時間が50%減少
- Googlebotの1日あたりのクロールされたページ数が100%増加
- ユーザーの1PVあたりの表示にかかる時間が平均1.5短縮 — ユーザーの22年分の時間を節約
9. まとめ
サイトのパフォーマンス向上の取り組みはSEOではなくユーザーエクスペリエンスに関わること。
10. 他のスピーカーのプレゼンからの重要点
※鈴木補足: Colman氏以外のスピーカーのプレゼンから僕が重要に感じたポイントです。
- Amazonの調査では0.1秒反応が遅くなると売上が1%減る。
- スピードのベンチマーク
– 1.5秒（1,500ミリ秒）が許容範囲
– Googl.e.comは300～500ms.
– 1秒以内を目指したい。 - サーバーとの物理的な距離もスピードに影響する。
- CDN (Content Delivery Network) を使うとスピードが上がる。
- ホスティング（レンタルサーバー）もスピードに影響する。
- HTMLのデータサイズはほとんど影響しない。
- CMSではキャッシュプラグインを使うといい。
- 非同期のビデオ（とAjax）はページスピードにほとんど影響を与えない（遅くしない）。
- 同じサーバーから大きなサイズの動画ファイルをストリーミングしないほうがいい。
- HTTPリクエストを減らす。
- GZIP圧縮を使う。
- スタイルシートを最初に置く。
- Javascriptを最後に置く。
- DNSのルックアップを減らす。
以上が、今回のSMXで僕が学んだサイトの高速化のためにできることです。
比較的簡単にできるものから方法を丹念に調べて実装しなければならないものまでさまざまでしたね。
個人的にインパクトがあったのはCSSスプライトです。
サイトワイドで繰り返し使われる画像はCSSスプライトを使うと使い回しができるので転送量を減らすことができます。
見た目にはまったく気付きませんが、特に大手のサイトで使われています。
ウェブページを高速化することはGoogleのランキング要因になっているとはいえ、ほとんど取るに足らない要因です。
ほぼ同じような質と関連性のサイトがあった時に、速い方と遅い方とどっちがいいか問われたら速い方がいいくらいなものです。
質や関連性を上書きするほどの影響力は持ちません。
ですが、コンバージョンやユーザーエクスペリエンスのことを考えると、ページの表示速度は非常に大きなインパクトを持ちます。
プレゼンの冒頭部分で数字がたくさん出てきていましたね。
こんなデータを以前にWeb担でピックアップしたことがあります。
- Googleでは、検索結果がほんの1秒遅れただけでもユーザーの検索が減る。0.4秒遅くなっただけで検索回数が0.44%減少する。
- edmundsでは、 読み込み時間を9秒から1.4秒に減らしたところ広告収入が3%増加し、1訪問あたりのページビュー数が17%上昇した。
- Shopzillaでは、 待機時間を7秒から2秒に減らしたら収益が12%アップしページビュー数が25%跳ね上がった。さらにハードウェアのコストを50%削減できた。
僕がよく聞く、ページの表示時間は2秒以内です。
スピーカーの1人は1秒以内を目指して目指して取り組むべきと主張していました。
高速化にあたっては、ウェブ制作者とシステム開発者、Webアプリケーション開発者、ネットワーク管理者、サーバー管理者などサイト運営に関わるすべてのスタッフの力が必要です。
目標値を設定して関係者みんなで力を合わせて今日からさっそくスピードアップに励みましょう。