Webページの読み込み速度を向上させ、検索エンジンの評価を高める
1年前に書いた「Webページの読み込み速度を高める」と最近書いたWebサーバの話をベースに、Webページの読み込み速度の向上について、少しまとめます。
Webページの読み込み速度が検索エンジンの評価に影響する
1年前に、GoogleがWebページの読み込み速度をサイトの評価項目として採用したことを発表しました。
単に速ければ速いほど評価が高いというわけではなく、1ページの平均読み込み速度が1.4秒以内に収まるかどうかが評価基準になるようです。
ページの読み込み速度は、Google ウェブマスター ツールの「Labs」にある「サイトのパフォーマンス」で確認できます。
この例だと、ほぼ「遅い」と評価されています。
サーバのチューニングやキャッシュ処理をさせているのですが、それでもサイト内のほとんどが動的ページで重たい処理をさせているので、このくらいの速度になっています。
あとは、もっとパフォーマンスの高いサーバに切り替えるなどハードに投資すれば、おそらく「速い」になると思います。
ただ、サイトの読み込み速度が速いと検索エンジンの評価は高くなりますが、あくまで評価項目の一つであり、それだけで劇的に良くなるわけではないので、あまり無理してコストをかける意味はありません。
ここでは、固定コストをかけずにできる高速化を紹介します。
Webサーバの処理を高速化する
Webページの読み込み速度を高速化する主な方法の一つは、Webサーバの処理を高速化するということになります。
以前の記事、「最低限やっておくといいApacheチューニング」と「簡単にできるWebサーバの負荷軽減」を参考にWebサーバの処理を高速化してください。
その記事の中では言及しなかったのですが、htaccessと同様にコンテンツネゴシエーション(mod_negotiation.so)もそこそこ遅くなります。使うことがなければ無効にしてください。まず使うことはないので、その記事ではこのモジュールを無効にすることを推奨しています。
コンテンツデータの最適化
もう一つ主な方法となるのがコンテンツデータの最適化です。
こちらは「Webページの読み込み速度を高める」と「SEOのため、PNGのファイルサイズを極限まで縮小させる」という記事を参考にしてください。
一点、そこで紹介しているAdobe Spryのpackedについて補足すると、「ライブラリは縮小版を使うべき」ということです。
jQueryやAdobe Spryなどのライブラリは、特別な理由がなければ、可読性を無視してファイルサイズを縮小したもの（jQueryならMinified、Adobe Spryならpacked）を使ってください。これだけでWebページの読み込み速度が速くなります。
ハイパフォーマンスを追求する
Webサーバの処理の高速化も、コンテンツデータの最適化も、ここで紹介しきれないほど様々な方法があります。
紹介した別記事の中でも何度も推薦していますが、オライリーの「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」と「続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス」の2冊は、本当に良くまとめられているので、是非読んでみてください。
ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス
Webページの読み込み速度が検索エンジンの評価に影響する
1年前に、GoogleがWebページの読み込み速度をサイトの評価項目として採用したことを発表しました。
単に速ければ速いほど評価が高いというわけではなく、1ページの平均読み込み速度が1.4秒以内に収まるかどうかが評価基準になるようです。
ページの読み込み速度は、Google ウェブマスター ツールの「Labs」にある「サイトのパフォーマンス」で確認できます。
この例だと、ほぼ「遅い」と評価されています。
サーバのチューニングやキャッシュ処理をさせているのですが、それでもサイト内のほとんどが動的ページで重たい処理をさせているので、このくらいの速度になっています。
あとは、もっとパフォーマンスの高いサーバに切り替えるなどハードに投資すれば、おそらく「速い」になると思います。
ただ、サイトの読み込み速度が速いと検索エンジンの評価は高くなりますが、あくまで評価項目の一つであり、それだけで劇的に良くなるわけではないので、あまり無理してコストをかける意味はありません。
ここでは、固定コストをかけずにできる高速化を紹介します。
Webサーバの処理を高速化する
Webページの読み込み速度を高速化する主な方法の一つは、Webサーバの処理を高速化するということになります。
以前の記事、「最低限やっておくといいApacheチューニング」と「簡単にできるWebサーバの負荷軽減」を参考にWebサーバの処理を高速化してください。
その記事の中では言及しなかったのですが、htaccessと同様にコンテンツネゴシエーション(mod_negotiation.so)もそこそこ遅くなります。使うことがなければ無効にしてください。まず使うことはないので、その記事ではこのモジュールを無効にすることを推奨しています。
コンテンツデータの最適化
もう一つ主な方法となるのがコンテンツデータの最適化です。
こちらは「Webページの読み込み速度を高める」と「SEOのため、PNGのファイルサイズを極限まで縮小させる」という記事を参考にしてください。
一点、そこで紹介しているAdobe Spryのpackedについて補足すると、「ライブラリは縮小版を使うべき」ということです。
jQueryやAdobe Spryなどのライブラリは、特別な理由がなければ、可読性を無視してファイルサイズを縮小したもの（jQueryならMinified、Adobe Spryならpacked）を使ってください。これだけでWebページの読み込み速度が速くなります。
ハイパフォーマンスを追求する
Webサーバの処理の高速化も、コンテンツデータの最適化も、ここで紹介しきれないほど様々な方法があります。
紹介した別記事の中でも何度も推薦していますが、オライリーの「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」と「続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス」の2冊は、本当に良くまとめられているので、是非読んでみてください。
ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
- HTTPリクエストを減らす
- CDNを使う
- Expiresヘッダを設定する
- コンポーネントをgzipする
- スタイルシートは先頭に置く
- スクリプトは最後に置く
- CSS expressionの使用を控える
- JavaScriptとCSSは外部ファイル化する
- DNSルックアップを減らす
- JavaScriptを縮小化する
- リダイレクトを避ける
- スクリプトを重複させない
- ETagの設定を変更する
- Ajaxをキャッシュ可能にする
続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス
- Ajaxアプリケーションとパフォーマンス
- 応答性の高いウェブアプリケーション
- 初期ロードの分割
- 実行をブロックしないスクリプトのロード
- 非同期スクリプトの組み合わせ
- インラインスクリプトの適切な位置
- 効率的なJavaScriptコード
- Comet
- gzip圧縮再考
- 画像の最適化
- 主ドメインの細分化
- ドキュメントのフラッシュ
- iframeの取り扱い
- CSSセレクタの単純化
