酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

YSlowはWebサイトの速度改善を提案するアドオン☆Rails 3.2アプリで試してみた!

Where?今話題の「スタートアップ向け!1人日でできるサービスの高速化方法と成果」に乗っていたアプリのスピード改善を提案してくれる「YSlow」を試してみました!ちなみにこのアドオンはアメリカのYahooが無料で提供しています。


Addonをインストール

YSlowでアドオンをダウンロード。

YSlow Addon

YSlowのアドオンを実行

分析したいWebアプリのページに進んで、YFlowのアドオンをクリック。

どうぶつの森 QRコードまとめ

分析開始

新しいタブが開いて、Run Testを実行すると分析が始まります。

YSlow addon start screen

結果は個別で23項目出てきました。

YSlow 評価結果

いよいよ速度を改善

今回の速度を改善する対象のRailsアプリ「どうぶつの森 QRコードまとめ」の前提条件として、

Railsアプリなので、CSS/JSの圧縮はやってくれている(assets:precompile)
Twitpicなどの公開されているサムネイルを使っているので画像系はノータッチ
VPSから送る重いデータはないのでCDNにはタッチしない

としました。それを考慮して今回のアプリでは次の点について改善を行なってみます。

Faviconの設置(今までなかったのでエラーになっていたため)
Apache Expire Headerの設定(ブラウザがhtml/jsなどをキャッシュする期間を伸ばす)
ETagsの設定(トラフィックを抑えるように設定する)

Faviconの設置

デザインセンスないので30分くらいデザインを考えて、諦めてとりあえず設置してみました!

スクリーンショット 2012-12-23 11.30.53

作成・設置方法はよかったらArt Text2はエンジニアのためのボタン・ファビコン作成ツールだ!を参考にしてみてください。

Apache Expire Headerの設定

サーバーのhttp.conf(CentOSなら:/etc/httpd/conf/http.conf)に以下の設定を追加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# これは既に設定済の可能性があるので確認
LoadModule expires_module     modules/mod_expires.so

# 以下を新規で追加
# Apache Expire Header
ExpiresActive On
ExpiresByType application/javascript "access plus 1 days"
ExpiresByType application/x-javascript "access plus 1 days"
ExpiresByType text/javascript "access plus 1 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/jpeg "access plus 3 days"
ExpiresByType image/png "access plus 3 days"
ExpiresByType image/gif "access plus 3 days"
ExpiresByType image/x-icon "access plus 3 days"

ETagsの設定

サーバーのhttp.conf(CentOSなら:/etc/httpd/conf/http.conf)に以下の設定を追加。

1
2
# ETags
FileETag MTime Size

ということで

まだ設定して時間が立っていないので、速度がどのくらい改善したかはかけません。ですが、レスポンスの向上でユーザーの満足度も向上すると思います!更に詳しい説明は以下のリンクがオススメです。

サイトパフォーマンス計測ツールYSlowの評価項目まとめ

【ハウツー】YSlowでWebページを高速化 - リッチさと速さを同時に実現するUIを! (3) YSlowの評価内容 | 開発・SE | マイナビニュース

クラウド環境でのApacheの設定 | cloudrop

おすすめの書籍