CSS Nite in ISHIKAWAへ行ってきた その1

 iTunes Store(Japan)
この記事の所要時間: 351

CSS Nite in ISHIKAWAがお隣、石川県で開催されたので、参加してきました。
初めての開催ということでしたが、石川県内外から約100名が参加(当初は定員75名でしたが、のちに100名まで増員した)したということで、注目の高さが伺えました。

忘れないように・・・メモっておきます。
(注)まとめてるようでまとまってません。

関連記事:
CSS Nite in ISHIKAWAへ行ってきた その2

オープニング

いつもの(?)鷹野さんの娘さん(10歳)のお話でスタート。

  • 娘さんのブログでパパはパソコンの先生なのに「全然役に立たない」と書かれた
  • お風呂に乳白色の入浴剤を入れたら娘さんが「雲模様1だ」と答え、「雲模様2だとキモイよ?」と聞いたら「知ってる」との返答が・・・

ってなことを言ってたような気がした。(メモってないんで)

High Performance Web Design
~ デザインから考えるハイパフォーマンスWebサイト ~

株式会社ドーガの石本さんの発表。

パフォーマンスとは?

表示の高速化
そういう類はシステム屋さんのお仕事と思われがち
しかし、実際のところ80:20=ブラウザサイド:サーバサイドなので、いくらサーバ側でアルゴリズムの見直しやDBのチューニングをしても全体の10%ぐらいしか効果がないのでブラウザ側で改善した方がよい

なぜパフォーマンスなの?

時は金なり
パフォーマンスを向上させることにより、ユーザの心理的影響を良くすることができるので、顧客満足度があがる。また、利益にもつながる。(みたいなことを言っていた)

どうやってパフォーマンスを計測するのか?

  • パケットスニファ(Packet Sniffers)
    • Fiddler
    • Firebug (Firefoxのアドオン)
    • Web Inspector Resource Panel (Safari)
  • パフォーマンスアナライザ(Performance Analyzers)
  • 初心者にオススメ

    • YSlow (Firefoxのアドオン)

    評価項目のうち

    • グレード
    • 13項目のなかから評価。
      書かれている対策を行えば、自ずと評価が上がる

    • Components
    • Statistics
    • 各コンポーネントが全体のどのぐらいを占めているか表示する

    評価方法
    1. FireBugをインストールする
    2. YSlowをインストールする
    3. 計測したいページを表示する
    4. ステータスバーのYSlowアイコンを押下
    5. RunTestボタンを押下
    6. 評価内容をチェックし、指摘された項目の対応を行う

結局のところ、計測できないものは評価できない。

対策

  • 大事なのはやみくもに対策をするのではなく、有効的な対策から行っていく
    • HTTPリクエストを減らす
    • 画像、Script、スタイルシート、Flashなどページのパーツを減らす

      • Image Maps (イメージマップ)
      • CSS Sprites (CSSスプライト)
      • Inline Images (インライン画像)
      • Combined Scripts and StyleSheets (スクリプト及びスタイルシートの結合)
        common.cssなど1つのファイルにまとめ、HTTPリクエストを減らす
  • デザインの段階からHTTPリクエストを減らすようにする
  • HTTPリクエストが多いようなデザインにしなければいい

まとめ

  • パフォーマンスはユーザーエクスペリエンスや収益に影響する
  • YSlowなどで評価し、対策をとる
  • とりあえずはHTTPリクエストを減らすようなデザインをする

ということで、普段気になるけどなにもしていなかったパフォーマンスについて面白い話が聞けました。
あとは、体感的に遅いな~と思ったりした場合、普段はDBのチューニングとかアルゴリズムの変更とかしていたわけですけど、デザイン側でチューニングすることでパフォーマンスが向上するわけで、今後はこういうのを取り入れていってみたいなと思いました。

また、今までに担当したサイトなどでも評価してみようかなと思いました。
まずは、今朝CSS Nite In ISHIKAWAに行く直前に障害対応していたサイトなんてどうかなっと(笑)