超チューニング祭に参加した

ニコニコ超会議3のアサインされたブースは超時空ニコニコ研究所だったはずなんですが、 ブース説明会に参加して1時間半ほど真面目に説明を聞いていたところ、 最後の最後に「4人はハッカソン行ってね」と突然言われて「ファッ!?」ってなったわけです。

というわけで超チューニング祭に参加してきました。

やったこと

成果物

フロントエンドの専門知識があるわけでないので 事前に指摘されていたように、 特にフロントを弄ってスピードが改善されるような予感は全くありません。 デザインもできないので提供されたデータ一式には一切手を付けないことにしました。 なので配信周りで速くすることを目論みました。 (全員こっちの方は最低限やってくると思ったのに意外にほとんどの人は全くやってなかった)

方針

  • 配信を速くする
  • その処理をスクリプトで自動化する
  • 元ファイルの構造は弄らない
  • 現実に即した複数ページに応用可能なチューニング方法
  • 計測には http://tools.pingdom.com/fpt/ を使用

css と js を1ファイル化

rails の assets pipeline がやっていることそのままです。 html をそのまま使うということで、明らかな罠である遅いサーバから配信されている jquery もあえてそのまま使います。 単純に html をパースして出てくる js と css を前から順に concat していくだけです。 リクエスト数は減らせましたが結局多いのは画像なのであまり意味ないです。

html と css と js を minify

rails では js の minify を uglifier を使っているのですが、css では何を使っているのか分からなかったので、 両方できるっぽい yui-compressor を使ってminifyしました。

html はもともと html5 だったので不要なタグをだいぶ削除できます。 h5-min という凄く古い gem を多少修正したら最新の ruby でも動作しました。

それぞれファイルサイズを20%程度削減できました。

この html の minify の段階で元ソースの文法的に間違った部分が悪影響を及ぼし、 レギュレーションを満たさなかったようです。

具体的には

1
2
3

<a href="/hoge">
 <p>hoge</p>
</a>

がアウトだったぽいです。

よく考えたらフロントのチューニングなのにブラウザのレンダリング結果は一度も見てなかったような気がします。

AWS で配信

とりあえず assets を s3 にアップロードしました。 これだけでだいぶ速くなります。 デプロイ先のサーバがだいぶアレだったぽいです。

そのあと CloudFront 経由でアクセスできるようにしました。 この効果は絶大で圧倒的に速くなりました。 pingdom の計測結果によると、Connect と Wait にかかる時間が圧倒的に削減されたようです。

ただ、Chrome の Developer Tool で見た場合、 s3 そのままのほうが全体的に速いという結果も出ました。 だいぶ謎いです。

配信ドメインを増やす

ブラウザには1つのドメインに対する同時接続は2までという紳士協定が(一応)あります。 CloudFront のドメインをたくさん作ってラウンドロビンすることで同時ダウンロード数を増やしました。 計測結果によると、1ドメインの場合、後半になるにつれて Connect にかかる時間が長くなっていたのが、 複数ドメインの場合ほとんど変化がないことが分かります。

ただ、ブラウザ全体(またはページ単位)での同時接続数もあるらしく、 増やしすぎてもすべて同時ダウンロードというわけにはいきませんでした。 1ドメインの時の Connect もそれほど遅いわけではないので、ほとんど誤差と言えると思います。 期待したほどの効果はありませんでした。

HTTP compression

css と js を圧縮して配信という昔ながらの方法は試してみましたが、 CloudFront での設定が面倒だった上に、 Receiving は短くなったものの Waiting が長くなって、合計値は素の状態より遅くなりました。 なぜ Waiting に計上されるのわからないけどこれがファイルを展開する時間なのでしょうか? ネットワークが十分速い現代はもはや HTTP compression の必要が無いのかもしれません。

できなかったこと

画像を sprite 化すればかなり効果的だと予想できますが、 正方形に近くなるように詰め込むアルゴリズムでないと、 無限に非効率になってしまいそうです。 それを考えている時間はなかったので諦めました。

結論

RailsとAWS使え

費用

ファイル数も少ないし2日間の合計で アクセス数 35,500 転送量 250MB で1ドルもかかりませんでした。 ドメイン作りまくっても追加で費用がかかることもないようです。

感想

異種格闘技戦だけど自分のフィールドに持ち込んである程度戦えたような感じします。 結局計測方法の詳細がわからないので再検証できないのが辛いですねー。

あと優勝したデザイナの人のスライド見ても全然意味が分からなかったりしたのが衝撃的。