Cherry＆Lotus™

YSlowを使ってWordPressの表示速度の改善をやりました

ブログを書いていて最近思うのは、表示速度の遅さ。XREAのWebサーバとデータベースサーバに問題があると思って、こればかりはどうしようもないと思っていたのですが、以下の記事を見てまだまだやれる事があると実感しました。

YSlowでWebページを高速化 – リッチさと速さを同時に実現するUIを!

YSlowとは、Yahoo! Developer Networkが提供するWebページパフォーマンス計測ツール。FirefoxにAdd-onとして実装する事が出来る。YSlowを使うには、Firebugをインストールする必要がある。

使い方は簡単だ。[ツール] – [Firebug] – [Firebugを新しいウィンドウで開く]を選択し、Firebugを開く。

YSlowをインストールすると、通常のFirebugの画面にYSlowという項目が追加される。この項目を選択すると、上の段に、Performance、Stats、Components、Tools、Helpという項目が表示される。

Performanceをクリックすると、現在開いているWebページのパフォーマンスを計測しはじめる。

結果はこんな感じ。この結果は、前述の記事を参考にチューニングした後の結果である。チューニングよって改善したのは、10. Minify JS と 13. Configure ETags の二つだ。後の項目は、利用している共有レンタルサーバでは多分対応が不可能だと思われる。

Minify JSについては、結果で引っかかったJSファイルを、Javascript Compressionを使って圧縮してみた。Configure ETagsについては、.htaccessに「FileETag None」の記述を追加しただけ。これだけで、評価が良くなったよ。

1. Make fewer HTTP requests と 2. Use a CDNは、これ以上改善しようがないので、諦めるとして、頑張って結局出来なかったのが、3. Add an Expires header と 4. Gzip componentsの二つ。

3. Add an Expires headerに関しては、XREAにmod_expiresが入ってないので無理。4. Gzip componentsに関しては、mod_gzipは入っているが、一部のJSファイルとCSSは何故かgzip圧縮がされない。

httpd.confにて設定されている可能性もあるので、.htaccessにJSやCSSも圧縮の対象にする様に以下のコードを書いたのだが、何故か改善しない。

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_can_negotiate Yes
mod_gzip_update_static No
mod_gzip_temp_dir /virtual/username/tmp
mod_gzip_keep_workfiles No
mod_gzip_minimum_file_size 1001
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 mime ^text/.*
mod_gzip_item_include mime "application/x-javascript"
</IfModule>

色んなサイトを参考にしてコピペしているわけだが、何が駄目なのか分かる方はコメントにて教えて頂けると助かります。

その他には、mod_headersを使って、ファイルのタイプ毎にキャッシュ制御様のheaderを追加する様にしてみました。

<IfModule mod_headers.c>
<FilesMatch "¥.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "¥.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "¥.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "¥.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>
</IfModule>

画像をキャッシュする分、少しは早くなったと思いますが、どうでしょうか？

関連記事

• 関連する記事はありません

トラックバック URL

Trackbacks/Pingbacks

• ClareChronicleの新テーマパフォーマンス - Clare Chronicle
  [...] xreaの方はCherry＆Lotus™さんとこのYSlowを使ってWordPressの表示速度の改善をやりましたを見ていただくと、対応方法がわかりやすいと思います。 [...]