slide.md

超チューニング反省会

mizchi

About

• mizchi / Quipper
• JavaScriptが専門でCSS書けないフロントエンドエンジニア
• 元兄貴動画の工作員(2007年06月頃~2007年08月頃)
• デスマ中(再来週がリリース)

なんできたの

JavaScript勢がいなかったから

今日やらかしたこと

アップロードするスタイルシート間違えた

.

ローカル

サーバー

...

成果報告

過程の方法

Chromeのデベロッパーツールと向き合う

すぐわかること

• jquery引っ張るCDNで引っかかってる
• 大量のアセットを並列で読むのが詰まってる

やったこと1

• cdnのjQueryからローカルのjQueryへ(20s -> 3.0sぐらい?)
• jsやcssをbrunchにのっけて結合(3.0s -> 2.5s)
• brunchでproductionビルド(2.5s -> 1.8s)
• jQueryからlodash(1.8秒 -> 1.5s)
• 画像の先読み(キャッシュ効かせる)

(記憶が曖昧)

Brunch便利

• Brunch | ultra-fast HTML5 build tool
• タスクを特化したGruntみたいなもの
• シングルページアプリケーションを組み立てるのに有用

やったこと2

• 読み込み順を負荷考えて並び替えた(1.5s -> 1.2s)
• JSから非同期通信を抜いて固定データにすり替え(1.2s -> 0.8s) //やや卑怯
• CSSスプライト化(0.8s -> 0.4s)
• CSSの圧縮(0.4s -> 0.35s) // ここでミスった

他にやれたこと

• タイムラインの画像を結合
  • たぶんあと0.5sぐらい速くなる

無駄だったこと

• CSS/JSの不要な部分削除
  • 画像の方がインパクト大きい
• gzip化
  • サーバーサイドで有効になってない

そもそもブラウザが重いとは

• Network IO(通信)
• CPU(JavaScript/DOMツリー構築)
• GPU(CSS/Canvas)

負荷を掛ける順を調整することで解決したい

例: 画像へ非同期通信を投げといて(Network IO)その間にHTMLレンダリング

本レギュレーションで有効な戦略

(サーバーの性能を上げる) > CSSスプライト > 各種遅延ロード

• クライアントで稼げるのは精々3秒.
• あとはサーバーサイドで頑張ってください

どんなサイトでも有用？

• トップページの負荷が高いポータル系サイト
  • Amazon
  • Yahoo
  • Google
  • ニコ動のこれ

誰が有利だったか

• JavaScriptも書けるマークアップエンジニア
• CSSスプライトは効果が大きいけど大変
  • 昨日はじめて書いたので時間掛かった
  • ムズい…

反省

• CSSスプライト使うのわかってたんだから予習してくればよかった
• デプロイ手順を整理しておくんだった
• 寝坊…