mod_pagespeedでWEBの表示をビックリするほど高速化

シェアする

  • このエントリーをはてなブックマークに追加

Googleが公開しているApacheモジュールであるmod_pagespeedをさくらインターネットのVPSに導入して、このWordPressでつくられているこのBlogを高速化してみます。

スポンサーリンク

mod_pagespeedとは?

公式サイト:http://code.google.com/p/modpagespeed/

配信されているコンテンツを高速通信、高速レンダリングできる形に変換してブラウザにコンテンツを返すApacheモジュールです。

つまり、あなた自身がサイトのコンテンツを最適化することなく、mod_pagespeedが全部自動でやってくれる、お手軽チューニングです。

これを見れば、どれだけ早くなるのかは想像がつくでしょう。

一例として以下のようなことをしてくれます。

  • HTMLのコメントなどコンテンツに意味のないデータを削除
  • ブラウザキャッシュしやすい形に最適化
  • 複数ファイルのCSSを一つにまとめる

などなど、機能は満載です。詳しくは公式サイトをご覧ください。

実際どうなの?

導入前 導入後

スコアが上がっています。

インストール方法

Ubuntu 10.4 64bit環境での手順です。

自分の環境に合わせたファイルをこちらからダウンロードしてください。

$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb
$ sudo dpkg -i ./mod-pagespeed-beta_current_amd64.deb
$ sudo /etc/init.d/apache2 restart

基本的には以上で終了です。

詳細な設定

細かいレベルでの設定をしたい人や導入したことにより問題が発生して人は設定を変えましょう。

設定ファイル

/etc/apache2/mods-enabled/pagespeed.conf

ModPagespeedRewriteLevel CoreFilters

特に設定をしなくてもCoreFiltersが設定されています。(*1)

Filterのドキュメントを見る限り、以下がCoreFilterに含まれているようです。

add_head
combine_css
extend_cache
inline_css
inline_javascript
insert_img_dimensions
rewrite_images

詳しいドキュメントはこちら

実際の設定

いろいろと試行錯誤した結果CoreFiltersがドキュメントに記載されている内容と違うのではないか。という結果が出たりしたので、明示的にFilterを全部設定することにした。

Filterの詳しいドキュメントはこちら

実際の例などを記載したコンテンツはこちらが参考になる。

    # ModPagespeedRewriteLevel CoreFilters                                                                                                                                                     

    # Add                                                                                                                                                                                      
    ModPagespeedEnableFilters combine_heads,combine_css
    ModPagespeedEnableFilters move_css_to_head
    ModPagespeedEnableFilters remove_comments
    ModPagespeedEnableFilters collapse_whitespace,elide_attributes
    ModPagespeedEnableFilters rewrite_javascript,rewrite_css,rewrite_images
    # ModPagespeedEnableFilters inline_css,inline_javascript                                                                                                                                   
    ModPagespeedEnableFilters extend_cache
    ModPagespeedDisallow */wp-admin/*

幸い、JavaScriptの動作などに不具合が出なかった。

だが、WordPressの管理画面側のJavaScriptがダメっだので、最後の行で無効にしている。

inline_cssやinline_javascriptはpagespeedの評価の結果が悪くなったのでコメントアウトした。

環境によって、Filterは細かく有効と無効を設定した方が良いでしょう。

逆に遅くなるケースというのはあるはずです。

JavaScriptの動作に不具合が出た人は、以下のようにrewrite_javascriptを無効にしてみて。

ModPagespeedDisableFilters rewrite_javascript

apacheを再起動して設定を有効化する。

$ /etc/init.d/apache2 restart

一通り、動作確認をして終了。

Show Slowなどを利用して、モジュールの組み込み前と後を比較するとおもしろい。

mod_pagespeed_statistics

導入したサーバでmod_pagespeed_statisticsへの閲覧が初期設定では許可されている。

$ curl http://localhost/mod_pagespeed_statistics
resource_fetches_cached: 32
resource_fetch_construct_successes: 0
resource_fetch_construct_failures: 0
total_page_load_ms: 0
page_load_count: 0
cache_extensions: 42
not_cacheable: 0
css_file_count_reduction: 0
css_filter_files_minified: 34
css_filter_minified_bytes_saved: 30984
css_filter_parse_failures: 33
css_elements: 0
image_inline: 190
image_rewrite_saved_bytes: 440452
image_rewrites: 19
image_ongoing_rewrites: 0
javascript_blocks_minified: 170
javascript_bytes_saved: 208633
javascript_minification_failures: 1
javascript_total_blocks: 185
resource_url_domain_rejections: 652
url_trims: 0
url_trim_saved_bytes: 0
resource_404_count: 0
slurp_404_count: 0
serf_fetch_request_count: 77
serf_fetch_bytes_count: 1922757
serf_fetch_time_duration_ms: 4192
serf_fetch_cancel_count: 0
serf_fetch_outstanding_count: 0
serf_fetch_timeout_count: 0

このようにmod_pagespeedの統計情報を見ることができる。(*2)

設定が効果的なのか一つの指標にすると良い。

*1: コメントアウトされていてもCoreFiltersは有効

*2: curlがインストールされてなければ、sudo apt-get install curlでインストールする

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする