[対象: 上級]

ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。

そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。

スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman(ジョナサン・コールマン)氏です。

ウェブサイトのパフォーマンス最適化

タイトルスライド

サイトを高速化する理由

  • コンバージョン率の最適化
  • カスタマーエクスペリエンスとカスタマー満足度の向上
  • 直帰率を下げる。
  • 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。
  • 全体的な競争力を高める。
  • 運用費を節約する。

数字で見るページスピード

  • Googleではページスピードが検索の1%に影響している。
  • ユーザーがページ表示に待てるのは2秒まで。
  • 3秒以上かかると40%以上のユーザーは離脱する。
  • フォーチュン500の企業のサイトは平均で表示に7秒以上かかっている。
  • 表示が1秒遅れるごとにコンバージョン率は7%落ちる。
  • 表示が1秒遅れるごとに顧客満足度は16%落ちる。
  • 速いサイトはインフラと公開にかかるコストを50%かそれ以上削減する。

ウェブサイトのパフォーマンスを最適化するステップ

1. 勉強する。

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スプライト(クリックで拡大)。

REI.comのCSSスプライト

下はGoogle DoodleのCSSスプライト(クリックで拡大)。このアニメーションは、CSSスプライトを利用して動かしている。

Google Doodleの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アプリケーション開発者、ネットワーク管理者、サーバー管理者などサイト運営に関わるすべてのスタッフの力が必要です。

目標値を設定して関係者みんなで力を合わせて今日からさっそくスピードアップに励みましょう。

このエントリーが役に立ったらシェアしてください

[Ads & Featured Contrents]

海外SEO情報ブログTOPUX・IA・CRO・EFO › 最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012

Comments

  1. By 通りすがり on

    こんにちは
    いつも色々読ませていただいてます。

    さて、すごい勢いでapacheがシェア落としてます。
    この辺の影響とかどうなんでしょう。

    wordpressでnginxを試してみましたが、
    サイト表示が速くなりました。
    apacheじゃ無理な気がする。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


▲ページの一番上に戻る