超チューニング祭で努力賞(最速賞)をとるためにやったこと

3行で

  • ソーシャルハック(要件定義)
  • 計測
  • 勘

獲得品.jpg

はじめに

2日にわたる超チューニング祭 in ニコニコ超会議3で最速になってきました。参加された方々、スタッフの方々にはお世話になりました。ありがとうございました。

1日目午前にやったこと

レギュレーションの確認

  • サーバ側にロジックはいれない
  • ページのソースコードは対象サーバへアップロードする
  • CSS, JSなどのアセットはCDNにのせていい
  • 運営側が計測
  • iPhone iOS 7.1.1 mobile safariベースの計測ツールをつかう
  • 指定されたいくつかの要素が表示されていること

sftp用の秘密鍵がDropbox経由で各自に配布され、10時くらいに開始。コードを落そうとsftpでつなぎにいくが、ポートが標準ではないようでつながらない。 コード落としつつレギュレーションを検討した。

  • サーバ側にロジックはいれない
  • gzは有効か
  • .htaccessでコントロールは可能か
  • ページのソースコードは対象サーバへアップロードする
  • sftpってことはsshでのりこめ。。。なかった
  • 運営側が計測
  • 計測回数はどれくらいか平均化できるか
  • 回線はどれを使うか LANか外部ネットワークか
    • docomo LTEを使うとの回答をえた
  • 指定されたいくつかの要素が表示されていること
  • 表示していればいいのか
    • 最低要件を満たすHTMLを検討したが、ユーザ投票で見た目が計測されるため却下

なにはともあれコードを動かす準備。

$ git init .
$ git add *
$ git commit -m init
$ python -m SimpleHTTPServer

深く考えずにHTTPサーバを立ちあげられるPythonは良い環境。

こういうときの調査はChromeのDeveloper Toolsで性質を調べる。

  • 明らかにjqueryの読み込みが遅くて2秒くらいかかってる
  • Google Analytics使ってる

まず始めに影響の大きかった2つについて検討した。

  • 明らかにjqueryの読み込みが遅くて2秒くらいかかってる
  • zeptoに置き換える
  • あとでminifyするつもりだったのでCDNではなくローカルにとってくる
  • Google Analytics使ってる
  • 表示には関係ないので除去

これらで2秒くらい改善した。

次に非同期でコンテンツを取得しているところの通信が気になったので調査した。 「注目のコンテンツ」という箇所が実際には広告で別のバックエンドから取得しているようだった。 ここでスタッフにソーシャルハッげふん、げふん、要件を定義してもらい静的コンテンツにしてしまっていいという答えをえた。 要件定義.png この改善で60msくらい減った。この変更はあとからQ&Aにのったけど見てなかった人とはここで差がでたと思う。

ここまでやるとおかしな接続はなくなってCSSファイルのサイズが気になってきた。 以前Qiitaでそんなこと書いてるようなことを覚えてたのでググった。

結果としてダメcommonだということが判明したので、それ中心にCSS全体として50%くらい?不要な記述があったので削った。そしたら必要なものもあったらしくレイアウト崩れてしまったのでインスペクタで確認しつつ部分的に戻した。

猫の日 #とは

/* 猫の日対応＠2/22が終わったら消す */

CSSの中身はさわり始めると地獄になりそうだったので、見た目崩れていないことの確認以上は深入りをしなかった。

1日目午後にやったこと

表示に必要のないJSを削除。 minify系のウェブサービスを使ってCSSとJSを縮小。 CSS Spriteを検討したが、詳しくなかったので今回はやめた。 サーバのnginxがそんなに性能よくなかったぽいのでTCPソケットを減らすために画像をdataスキームに埋めこむ。

たんぽぽわーくで日が暮れる。

15時くらいに中間計測があり、その時点での評価結果が出された。 今回は連番にIDが振られており、そのIDがそのまま評価用のURLにも使われていたので、かつレギュレーションになかったので、上位のサイトを検証しにいった。 速いところはみんな似たようなことやってた。CSS Spriteやってる人もいて尊敬した。

最速のページ

<html>niconico(C++)</html>

1日目夜

作業やってもよいレギュレーションだったけど、疲れたので寝た。もう若くない。

2日目会場に着くまでにやったこと

いいかげんたんぽぽ疲れしたのでgruntを調べる。 grunt-contrib-uglifyとgrunt-contrib-cssminが使えそう。

2日目午前にやったこと

この日は競技時間が1時間半くらいしかないので大きな変更はあきらめて細かく修正することにした。 細かく成果物を生成するには手作業でminifyしてるとつらいのでgruntを導入した。 uglifyとcssminが他のminify系サービスより性能が良かったのが驚いた。

zepto外しのためにjQueryを想定しているコードの機能だけ抽出して代替コードを書きだす。が間に合わずに中止。 残り2分でhtml自体をminifyしてないことに気付く。ググったらgrunt-contrib-htmlminが。 とりあえず入れてREADME通りに設定して動かす。何か成功したっぽい。時間ないから 確認せずそのままアップロード

そして結果発表を待つ。

結果発表

最速になりました。そして戀塚さんの目にとまったらしく審査員特別賞もいただくことになりました。

何が決め手だったか

計測結果からの推測になってしまうのですが、LTE回線だったこと、計測は10回読んだ平均を使ったことから、 アセットをページに全て展開するのではなく、ある程度の粒度の少数のファイルに分けることでの並列の効率化が効果があったと思われる。あと AppCache これは計測方法が詳細不明だったので有効かどうかは不明だったけど、うまく刺さったようで爆速になった。たぶんこれが随分大きな要因。ただ個々のサイズが大きいとレンダリングが終わるまでに時間がかかるのは明白なので、極力サイズを減らす努力は無駄じゃなかったと信じたい。

おわりに

そもそもチューニング厨は参加自粛するべきイベントだったのではないかと思い始めましたが、司会進行の方が私のいま住んでる地方ラジオに枠をもってるとか何かよくわからないつながりがあったり、表彰式に偶然ymotongpooがいたりで終始中々面白かったので良しとします。 再度になりますが、参加された方々、運営されたスタッフの方々、ほんとうにありがとうございました。 :)