デザイナーと二人組で超チューニング祭に参加しました。速度面での最終順位は7位でした。デザイナー視点でのまとめは、こちら http://blog.mikiishijima.com/cho-tuning-fes/
コミットログはこちら https://github.com/tai2/nicohaya/commits/master
主に使ったツールは、ChromeのDeveloper Tools,PageSpeed Insights,YSlowぐらい。
- DevToolsのNetworkで、jquery.min.mapが404でエラーになってるのに気付く この時点でmapファイルがなんのためのものなのかわかってなかったが、気持ち悪いので、エラーなしの状態にしたかった。jqueryをGoogleがホストしてるものに変更することで解消。(のちのち、mapファイルについて調べて、測定時には不要とわかったので、disableにした)。
- レギュレーション上、必要広告数は2つなので、3つあった広告のうちひとつを削除。
- categoryalliance.jsというのが広告に関するなにからしかったが、使ってなさそうなので除去。
- jsCacheの導入
- HTTPヘッダを見ると、画像のローカルキャッシュが効いてないのが気になった。304 Not modifiedなのでデータ転送はないが、リクエスト・レスポンス自体は発生してた。
- サーバーがApacheなら、.htaccessでリクエストしないようにできるかもと思って調査したが、サーバーnginxで、レスポンスヘッダ変更するのできなさそうだったので断念。
- どうにかして画像をキャッシュにできないか頭を捻った結果、画像をbase64化して、localStorageに入れるという方法を思い付く。ググったら、それをやってくれるjsCacheというライブラリを見付けたので、branch切って、検証開始。
- とりあえず動作確認できたあたりで、まだ午前。どうしてもコーヒー飲みたかったので、しばらく展示みながら会場ウロウロ。
- jsCacheをすこし導入してみて、有効性に疑問を持ちはじめたあたりで、一日目終了。jsCache導入しても、省略できるのは、ボディなしのリクエスト・レスポンスだけだし、Keep-Aliveもちゃんと効いてるので、たいした効果ないとか、逆にbase64化されることでコスト上がってるかも?とか。Dev Toolsも使いかたもあまり慣れてないので、NetworkとかTimeline見てもいまいち自信が持てず。
- ホテルに帰ってからも、ビール飲みながら、引き続きjsCacheへの置き換え作業。悩んだが、jsCacheでいくことを決断。途中、jsCacheのバグらしきもののworkaroundを考えたり、使い勝手悪い部分を修正するなどして、深夜までかけて導入完了。
- CSSのbackgroundのままだと、jsCacheに入れられないので、いくつかimgタグにしてもらうようにデザイナーに依頼。
- InsigtsやYSlowの結果で出たものをちょこちょこ修正(scriptタグをbodyタグの下のほうに移したり)。CSS Spriteというのを導入しろというアドバイスが出てたので、調べて、デザイナーに導入できるか聞いたところ、できるということだったので、やってもらう。
- モバイルで表示したときのバルーンも、レギュレーションになかったので削除。
js,cssのminifyは一番最後にまとめてやればいいと思ってたので、一日目は手をつけなかった。
- urchin.js,nikapi.jsなどは使ってなさそうだったので削除。
- js,cssのminify(ググって上に出てきたサービスを使用)。htmlのminifyもしたかったが、どうしても表示崩れおこしてしまって断念。
- jquery,common.jsをjsCacheでキャッシュ化。