sitespeed.ioを見ながらサーバチューニングやってみた
Sitespeed.ioというツールを使うと、webサイトのパフォーマンスをかっこよく可視化してくれるらしく、早速試してみた。
導入と計測
インストールは公式ドキュメントの通りにhomebrewから。
✘ brew tap sitespeedio/sitespeedio ✘ brew tap tobli/browsertime ✘ brew install sitespeedio/sitespeedio/sitespeed.io
インストールが完了すると、あとは解析したいサイトのroot URLを指定するだけ。このURLを起点に各ページのパフォーマンスを測定してくれる。
今回は自宅サーバにホストしたOctopressブログで試してみた。
✘ sitespeed.io -u http://blog.horimisli.me [~/Desktop/workspace] Will crawl from start point http://blog.horimisli.me with User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36 and viewport 1280x800 with crawl depth 1 using ruleset sitespeed.io-desktop ... this can take a while Using sitespeed.io version 2.5.5 Using PhantomJS version 1.9.2 Using Java version 1.8.0-b50 Using BrowserTime version 0.6 From IP 223.133.72.97 Will analyze 21 pages Analyzing http://blog.horimisli.me Analyzing http://blog.horimisli.me/blog/categories/sass/ .... Finished analyzing blog.horimisli.me
結果をもとにチューニング
計測結果はこんな感じ。
Summary of the sitespeed.io result - http://blog.horimisli.me
総合点(Rule Score)が90点以上だとグリーンになるらしい。結構基本的なチューニングが抜けていたので、早速指摘された項目ごとに修正してみた。
scriptタグをheadに書かない
超基本だけれど。デフォルトでOctopressのsource/_includes/head.html に色々タグが入っているので、すべて _includes/after_footer.html へ移動。
E-Tagの除去
Webサイトの高速化 ルール13 ETagを正しく設定する! (Yahoo! developer netoworkより翻訳) | 株式会社インターオフィス
以下をconfに追加。
FileETag none
静的ファイルにExpiresヘッダを付与する
Apacheにmod入れていなかったので導入。
✘ a2enmod expires
confで画像ファイルなどにヘッダ付与するよう設定。
<FilesMatch "\.(gif|jpeg|jpg|png|css|js)$">
ExpiresActive On
ExpiresDefault "access plus 365 days"
</FilesMatch>
新しいバージョンのjQueryを使う
1.7.2を参照していたのを1.10.2に。一部のjQueryプラグインが動かなくなったけど、大して大事な機能じゃなかったのでついでに取っ払った。
結果
Summary of the sitespeed.io result - http://blog.horimisli.me
ギリギリ90点代には乗った。ツールの導入から改善までほんの1時間程度。
Apache abとか使うのと違って問題箇所を詳細に指摘してくれるし、NewRelicみたいにサーバ側のセットアップも必要ないのですごくお手軽。
