＠ITで CSS Nite LP, Disk23 「表示速度最適化」のレポートを書いた
＠ITで CSS Nite LP, Disk23 「表示速度最適化」のレポートを書きました。
参加したのはこちらのイベント。
登壇者は 岡部 和昌さん([twitter:@kzms2])、石本 光司さん([twitter:@t32k])、斉藤 祐也さん([twitter:@cssrader])、こもり まさあきさん([twitter:@cipher])という豪華な面々で、内容も4セッション+ライブデモと盛りだくさんだった。
しかしながら記事にする上ではいろいろ削らざるを得なかった。なるべく各セッションのポイントとなる部分を書いた。テクニックと考え方が、どちらにも偏り過ぎないように意識した。つもり。ちょっと偏っちゃったりしてるけど。
細かいテクニカルな部分は、最後のライブデモを解説する形でしっかり書いた。つもり。この記事だけでも、ある程度「表示速度最適化」ができるといいな、という思いを込めて書いてみた。
フロントエンドのパフォーマンスチューニングに興味があったけど、やったことがなかった。ちょうどよくこのイベントがあったので、参加してきた。
Apacheのチューニングは何度かやったけど、ある程度まとまった量のアクセスをさばくための設定で、preforkからworkerにするとか、負荷評価をしてMaxClientsあたりの設定を調整するといったことが中心だった。
今回勉強したのは1回のリクエストをどれだけ速くするかということで、これまでやってきたのはたくさんのリクエストをどう効率良く処理するか、ということだった。だから知らないことが多くて、とても面白かった。
こういうパフォーマンスチューニングは、ある程度の経験と幅広いレイヤーの知識が必要になる。例えばこんな感じ。
- フロントエンドはHTML(and HTML5)、JavaScript、CSS
- HTTP / HTTPS / DNS / TCP/IPなどのネットワークの知識
- バックエンドはLinux(or Windows)、Webサーバ、APサーバ、DBサーバの知識
- プログラミング言語、フレームワークに関する知識
全部いっぺんに覚えるのは無理だよね。だから、ちょっとずつチャレンジして覚えていくのがいいと思う。個人的には、フロントエンドの人も、バックエンドの人も、ブラウザから取り組んでいったらどうかなと。
Chrome Developer ToolとかFirebugを使って、フロントエンドの人はNetworkタブを見て、バックエンドの人はElementsタブやResourcesタブを見てみるとか。
Networkタブではどのような通信が行われているのかわかるし、Webサーバから返ってくるヘッダー情報なんかも見れる。Chromeなら chrome://net-internals/ もいいかも。
ElementsタブやResourcesタブでは、サイトがどのような構成になっているかわかるし、その場で書き換えることもできる。
ちょっと話がそれたけど、まとめ。
CSS Nite LPは有料のイベントだけど、お金を払っても聞けてよかったと思った。楽しく勉強になったセッションの内容が、少しでも多くの方に伝わるといいな、と思う。
# この記事書くの、けっこう大変だったしｗ
