社内フロントエンドチューニング大会の感想を書いてみる

インフラチューニングに続いてフロントエンドチューニングにも参加したので感想を書いてみます。

ちなみにトップの人のブログはこれ

http://ameblo.jp/ca-1pixel/entry-11925409995.html

大会の中身

大会の中身は以下の様なもの。

  • 渡されたGithubリポジトリのHTMLサイトを出来るだけ軽くする
  • リポジトリにプッシュすると自動的にスコアを集計
  • 見た目を崩してはいけない
  • 同じ動作をしなければいけない

この条件でスコアを競います。スコアは以下のタイトルがついていました(どういった基準なのかの詳細は説明がなく推測で判断するしか無い)

  • HTMLファイルサイズ
  • CSSファイルサイズ
  • JavaScriptファイルサイズ
  • 画像ファイルサイズ
  • リクエスト数
  • DOM要素数

やったことを順番に

今回も遠隔地の参加だったのでレギュレーションを軽く読んでGithubにつないでファイルをダウンロード。説明を見た感じファイルをどれだけ軽く出来るかの勝負みたいだったので、とりあえず時間がかかりそうなImageOptimに放り込んで画像ファイルを軽くしてみる。その間にファイルを見てみるとJSとかCSSとか死ぬほど読み込んでる。jquery-uiとかbootstrapとか色々読み込んでるけど、動きを変えちゃ駄目なら削らないほうが無難だろうとこのへんはそのまま進む

触らないほうが無難だと思ったライブラリのJSとCSSたちをまとめて圧縮して上げてみるも何故かエラー。。。CSSの改行とコメント削ってるだけなのになんでエラーになるんだよと思いながらもしょうがないから地道に個別に圧縮して最後にくっつけることにする。あとで聞いたらCSSにバグが仕込まれていたらしくそのせいなんだろう。その時は気づかなかったからライブラリ関連のファイルを個別圧縮して、画像ファイルを軽くしたものを上げてとりあえず満足。

次にcoffeescriptが使ってあったのだけど、jsで動的にコンパイルしていたのでこんな無駄なものないだろうとコンパイルしたものを上げてcoffeescriptを動的コンパイルしているjsファイルを削除。coffeescriptはよくわからないけどjsの中身を見ながら何やってるのかを確認すると、ajaxでjsonファイルを取ってきてテンプレートを使って動的にDOMを構築しているっぽい。DOM要素数がスコアにあるからココらへんをいじくったほうがいいのかなぁと調査を開始。

見てみると40個ぐらい同じテンプレートから作られてる要素を発見。ここを変更すればDOMが一気に削減できると綺麗にdivでくくってあるものをガッツリ削ってCSSで見た目を整えてみる。これでDOM要素が減ったけどあまり変わらず。次何するかなーとぼーっと眺める。

どういう感じで作られてるのかとHTMLのClass名でCSSをGrepをかけると結構使ってない奴がある。これを削らないといけないのかと気付き使っていないClassが使われているDOMをガンガン削っていく。Grep→使ってない→削るというすごい地味な作業を繰り返す。後で調べたらCSSの要素で使っていないものを見つけるとかいう便利なライブラリがあるらしいですね。それ使えばよかった。。。

ひと通り削り終わって次何しようかと眺めていると、修正前と修正後の画像が完全に一致していることに気づく。もうちょっと画像を粗く圧縮すればスコア上がるんじゃね?ともう一回ImageOptimに放り込んでみるけどあまり変わらない。もうちょっと圧縮できるライブラリ無いのかなと探したところpngquantがよさ気。こいつを使って画像を更に圧縮して上げてみると画像ファイルが結構軽くなった。

リクエスト数もスコアにあるんでリクエスト数を減らしたいなぁと思いCSS Spriteでもやるかと思ったけど、CSS変更するのがだるい。でも画像ファイルをいっぱいダウンロードしてるのでbase64にしてそれをimgタグに無理やり読み込ませるように変更してみる。タグを削ったテンプレートを作成しているjsonファイルにbase64データを入れるところを作って画像ファイルを全部base64にして読み込ませたものを上げてみたところリクエスト数は減ったけど画像ファイルの劣化が激しく修正前の画像との差分がギリギリラインまで上がってしまった。これ以上画像ファイルをどうにかすることはできないので画像ファイル関連は諦める。

ファイルサイズ下げるならgzip化したほうが楽じゃないかとgzip化を試してみる。ヘッダを見るとExpressを使ってサーバは動いているようなのでExpressで.htaccessとか使えないかと調べてみたけど無理っぽい。色々やってみたけどgzipで読み込ませるのは無理っぽいので諦める。

そうこうしているうちに競技時間の終わりが近づいてきたので今まで圧縮していなかったmain.jsとかindex.htmlとかを圧縮してcss/jsファイルを1Fileにまとめて競技終了。

総評

トップの人との違いを見てみると最初からcss/jsの圧縮をしてしまったのが駄目だったみたいですね。フロントエンドチューニングっていうぐらいだからmain.jsで色々ごちゃごちゃ動かしててそれを削るのかと思ったけど、いらないjs/cssが読み込まれている可能性を考えなかったのが一番の敗因っぽいです。本来ならCSSの使っていない要素をbootstrapから削ったりとか、jsの使っていない関数を無理やり削ったりとかしてあげればもうちょっとスコアは上がるんでしょうけど、その時閃かなかったからだめですね。業務でライブラリの使ってない関数を削るとかライブラリのバージョンが上がる毎に手を入れないといけなくなるからやらないせいで頭が回らなかったと言い訳。

とりあえず、インフラチューニングよりも検討できたんじゃないでしょうか。こうやって色々参加すると自分が足りない点がわかって楽しいですね。次回があるのであればもうちょっと勉強して参加しようと思います。