YSlowによるパフォーマンス改善

サーバがアメリカ西部にある+サーバレンタル契約がエントリープランなので、やむなし的なところはあるけど、この blog の表示速度は概してよくなく、パフォーマンス改善が必要な状態にあった。そこで、YSlow を使って、ボトルネックの洗い出し、および、ボトルネック解消による効果検証を行った。

YSlow
http://developer.yahoo.com/yslow/

YSlow のベースとなる考え方は Exceptional PerformanceHigh Performance Web Sites (slides) に示されているが、以下13項目を実行に移すことがパフォーマンス改善につながるとしている。JavaScript/CSS を外部ファイルに、といった基本的なことのみならず、CSS はページ冒頭に、JavaScript はページ下部に、といったもう一歩踏み込んだ形で改善方法を示しているのが、興味深い。

Rules for High Performance Web Sites

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put CSS at the Top
  6. Move Scripts to the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags

Exceptional Performance より)

この個人 blog で CDN なんて無理、広告やアクセス統計で外部ドメインの JavaScript を読み込んでるので、DNS Lookup を減らしようがない、といったところはあるけど、上記に基づき、いくつか改善を行ったので、メモしておく。

改善1 – mod_gzip による gzip 化

まず Gzip 化について。Gzip 化にあたり、使用しているサーバ環境(Debian GNU/Linux Sarge)では、以下パッケージが必要になるので、apt-get でインストール。

libapache-mod-gzip
http://packages.debian.org/sarge/libapache-mod-gzip

※注
apache 2.0 以降は、mod_gzip ではなく mod_deflate を使う模様。現在の環境が、apache 1.3 系なため、mod_gzip を使う前提で話を進める。

/etc/apache/modules.conf に以下記述が追加されていることを確認する。

LoadModule gzip_module /usr/lib/apache/1.3/mod_gzip.so

apache の設定ファイルに、以下記述を追加する。

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_can_negotiate Yes
mod_gzip_update_static No
mod_gzip_temp_dir /tmp
mod_gzip_keep_workfiles No

mod_gzip_minimum_file_size 500
mod_gzip_maximum_file_size 0
mod_gzip_maximum_inmem_size 60000
mod_gzip_min_http 1000
mod_gzip_handle_methods GET POST

mod_gzip_dechunk yes

mod_gzip_item_include file \.css$
mod_gzip_item_include file \.js$
</IfModule>

Netscape 3-4 で gzip 化された JavaScript が読めない、といった環境ごとに細かいバグがあるようだけど、取り急ぎ放置。

改善2 – PHP 側での gzip 化

上記だけでは、HTML ファイルの gzip 化がなされないので、PHP の設定ファイル /etc/php4/apache/php.ini に以下設定を追加した。

zlib.output_compression = On

改善3 – Expires Header

次に Expires Header について。以下を apache の設定ファイルに追加することにより対応完了。

ExpiresActive On
ExpiresDefault "access plus 10 years"

改善4 – ETag

次に ETag について。以下を apache の設定ファイルに追加することにより対応完了。

FileETag none

改善5 – CSS ファイル統合

この blog では、以下3つの CSS が使われており、YUI のものだったり、Wordpress のテーマ付属のものだったり、と由来は異なるが、全ページに読み込まれるものなので、main.css ということでひとつにまとめた。

  • reset-fonts-grids.css
  • autocomplete.css
  • style.css

なお、JavaScript については、先日の 記事検索の autocomplete 化 の際に統合済み。

効果測定

上記の改善を踏まえ、http://blog.shimazu.org/ での読み込みスピードで実施前後の比較を行った。

まずページ容量について。Firebug でページ容量を比較すると、

  • 改善前: 276KB
  • 改善後: 148KB

ということで、同じコンテンツなのに gzip 化により半分近い容量削減となった。改善前(左)・改善後(右)のキャプチャは以下のとおり。

改善前改善後

YSlow の Performance Grade と呼ばれる指標でも比較してみた。すると、

  • 改善前: Performance Grade: F (56)
  • 改善後: Performance Grade: C (75)

といった感じで、こちらも改善が見られた。詳細結果は以下のとおり。

performance2.png

最後に、ページ読み込み速度を、yslow のステータスバーに読み込み時間を表示する機能を使って計測した。10回計って、平均を算出、という方法で、

  • 改善前: 3.9954秒
  • 改善後: 3.1822秒

という数字上はそれほど差が大きくないが、体感的には少し早くなったかな?という感じがする。詳細結果は以下のとおり。

performance.png

ということで、YSlow によるボトルネック洗い出しとその改善を行ったが、Gzip は設定に若干てこずったものの、その他は簡単に実行可能な改善策で、結果を見ても、これらの施策は非常に有用な印象を持った。今後開発など進めるうえで表示パフォーマンスが気になったら、まず今回のような改善策を試そうと思う。

Leave a Reply