面白コンテンツ探求日記

ラーメン食べたい

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

結果をもとにチューニング

計測結果はこんな感じ。

f:id:horimislime:20140225002439p:plain

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みたいにサーバ側のセットアップも必要ないのですごくお手軽。