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

🍄 tags: [Rails, Server]

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)に次の設定を追加。

# これは既に設定済の可能性があるので確認
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)に次の設定を追加。

# ETags
FileETag MTime Size

🎃 ということで

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

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

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

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

📚 おすすめの書籍