超チューニング祭
ちょっと遅くなったけど、2014/4/26-27の二日間、ニコニコ超会議3内のまるなげひろばの一角で開催された超チューニング祭にドワンゴチーム(メンバーは 江添亮さん, kmizuさん, masarakkiさんと合わせて4人)として参加したり表彰などをした話。
参加チームは全部で18チームかな?(チーム番号は20までだけど、2チーム欠番?)。
競技ルール
ルールは、niconicoのスマートフォン版webのコピーの一部改変版を主催者サーバー上に配置し、速度とUIの改善を競うというもの。チームごとにコピーが配置され、各チームに秘密鍵が配られ、その鍵でSFTPで各チーム用サーバーにuploadする。
UIのユーザー投票と測定結果のそれぞれの順位の合計が一番少ないチームが総合優勝となるため、速度だけでもデザインだけでもだめ、というものであった。
投票以外では、UI要件(どの要素がいくつ必要とか、2クリック(タップ)以内でそれぞれのリンクに到達できること、iOSで判定されることなど)と、速度(リソース取得時間とレンダリング時間)などが判定された。
競技は1日目の朝9時すぎから始まり、二日目の午前11時に終了。
競技でやったこと
私は最近サーバーばっかりでフロント部分は勉強中で勝利をめざすレベルにないので、UI改善は放棄して、速度改善の勉強として手法を色々試してみることにした。
-
IntelliJ IDEAでソースを見ると警告やエラーが多数でたので、それをチェックしていった。
- とりあえず画像のサイズ指定と画像の実寸が違うため、表示サイズに縮小・再圧縮してサイズを削減した。
- ブラウザの開発者ツールでタイムライン(ネットワーク)を確認して、ボトルネックを確認した。
- 特定の広告の取得がすごい遅いが、レギュレーションに必要な広告は２つだけで、この遅い物を抜いても満たすので撤去。
- jQueryのロードが遅い。ソースマップが無いエラーが出ている。
- jQuery取得元をCDNに変更
- さらに、jQueryではなく互換もので小さいもののひとつ、Zepto.jsに変更
- cssを結合してgulp-minify-cssでminifyすることでファイルを減らした。またこれをgulp watchすることでcssの編集に自動追従させる。
- jsも要らないものを撤去
- 画像をcss sprite化。windows環境で挑戦している関係でcss-sprite関連のセットアップを放棄して、css spriteを作ってくれるweb service CSS Sprite Generatorに画像をuploadして結合画像にし、参照を置き換え
- cssが巨大で、中を見ると要らない物が一杯あるので手でチマチマ参照を探しては削除してサイズを削っていった
結果は、速度で18チーム中10位ということで中程かなｗ
表彰とLT発表会
結果は:
戀塚賞だけど、ファーストビューで読み込むのがindex.htmlだけ？というところまで削減しきっていて、モバイル回線速度条件だと最重要な点をきっちりやってると考えて選んだ。
賞品のひとつとして無刻印HHK Pro2のキートップに手書きでキーを書くよう指示されたので、ニコニコらしいコメントに使うような文字だけ書こう、と考えて「8」「w」「!」「?」と、最後にenterキーを書いた。どうだったかなー。
表彰後、LT大会が行われた。ここで各チームがどのような工夫をしたのかがそれぞれ解説された。これによって知識差が埋まってゆくとしたら良いイベント形態だなぁ。
参加者のみなさん、主催のくにきやさんをはじめとするスタッフの皆さん、お疲れ様でした。