CSS Nite in ISHIKAWAへ行ってきた その１
この記事の所要時間： 約 3分51秒
CSS Nite in ISHIKAWAがお隣、石川県で開催されたので、参加してきました。
初めての開催ということでしたが、石川県内外から約100名が参加（当初は定員75名でしたが、のちに100名まで増員した）したということで、注目の高さが伺えました。
忘れないように・・・メモっておきます。
（注）まとめてるようでまとまってません。
関連記事：
CSS Nite in ISHIKAWAへ行ってきた その２
オープニング
いつもの（？）鷹野さんの娘さん（10歳）のお話でスタート。
- 娘さんのブログでパパはパソコンの先生なのに「全然役に立たない」と書かれた
- お風呂に乳白色の入浴剤を入れたら娘さんが「雲模様１だ」と答え、「雲模様２だとキモイよ？」と聞いたら「知ってる」との返答が・・・
ってなことを言ってたような気がした。（メモってないんで）
High Performance Web Design
～ デザインから考えるハイパフォーマンスWebサイト ～
株式会社ドーガの石本さんの発表。
パフォーマンスとは？
- 表示の高速化
- そういう類はシステム屋さんのお仕事と思われがち
しかし、実際のところ８０：２０＝ブラウザサイド：サーバサイドなので、いくらサーバ側でアルゴリズムの見直しやDBのチューニングをしても全体の10%ぐらいしか効果がないのでブラウザ側で改善した方がよい
なぜパフォーマンスなの？
- 時は金なり
- パフォーマンスを向上させることにより、ユーザの心理的影響を良くすることができるので、顧客満足度があがる。また、利益にもつながる。（みたいなことを言っていた）
どうやってパフォーマンスを計測するのか？
- パケットスニファ（Packet Sniffers）
- Fiddler
- Firebug （Firefoxのアドオン）
- Web Inspector Resource Panel （Safari）
- パフォーマンスアナライザ（Performance Analyzers）
- YSlow （Firefoxのアドオン）
- グレード
- Components
- Statistics
- 評価方法
-
- FireBugをインストールする
- YSlowをインストールする
- 計測したいページを表示する
- ステータスバーのYSlowアイコンを押下
- RunTestボタンを押下
- 評価内容をチェックし、指摘された項目の対応を行う
初心者にオススメ
評価項目のうち
13項目のなかから評価。
書かれている対策を行えば、自ずと評価が上がる
各コンポーネントが全体のどのぐらいを占めているか表示する
結局のところ、計測できないものは評価できない。
対策
- 大事なのはやみくもに対策をするのではなく、有効的な対策から行っていく
- HTTPリクエストを減らす
- Image Maps （イメージマップ）
- CSS Sprites （CSSスプライト）
- Inline Images （インライン画像）
- Combined Scripts and StyleSheets （スクリプト及びスタイルシートの結合）
common.cssなど１つのファイルにまとめ、HTTPリクエストを減らす - デザインの段階からHTTPリクエストを減らすようにする
画像、Script、スタイルシート、Flashなどページのパーツを減らす
HTTPリクエストが多いようなデザインにしなければいい
まとめ
- パフォーマンスはユーザーエクスペリエンスや収益に影響する
- YSlowなどで評価し、対策をとる
- とりあえずはHTTPリクエストを減らすようなデザインをする
ということで、普段気になるけどなにもしていなかったパフォーマンスについて面白い話が聞けました。
あとは、体感的に遅いな～と思ったりした場合、普段はDBのチューニングとかアルゴリズムの変更とかしていたわけですけど、デザイン側でチューニングすることでパフォーマンスが向上するわけで、今後はこういうのを取り入れていってみたいなと思いました。
また、今までに担当したサイトなどでも評価してみようかなと思いました。
まずは、今朝CSS Nite In ISHIKAWAに行く直前に障害対応していたサイトなんてどうかなっと（笑）
