【レポート】CSS Nite LP, Disk 23: 表示速度最適化

2012年6月30日にベルサール九段で開催された「CSS Nite LP, Disk 23:表示速度最適化」に行ってきました。

Measuring Web Performance(石本光司さん)

  • 『80:20』表示速度の80%はフロントエンドに原因がある
  • Performance Impact of CSS Selectors(2009年)」によると1,000コのCSSセレクタを最適化しても20ミリ秒しか改善されない
  • CSS Selector Performance has changed!(2011年)」によると、ブラウザの進化により5ミリ秒の改善に留まってきている
  • チリも積もればと言いますが、CSSセレクタの改善は劇的な効果を産まない
  • HTTPリクエストを減らせ!話はそれからだ

さらにセッション中には様々な測定ツールを紹介してくださいました。

  1. 評価アドバイス系
  2. ASP系
  3. ディベロッパーツール系
    • 「Chrome Developer Tools」
    • Firebug
  4. スポット計測系
画像の最適化で地球をエコに(岡部和昌さん)

  • PNG vs GIF ・・・PNGの方が圧縮性にすぐれている
  • 画像の最適化「メタデータの削除」「圧縮方式を最適化」「色数を減らす」
  • ImageOptim(Mac)」「PNGGauntlet(win)」メタデータの削除や圧縮方式を最適化してくれるツール。画像の見た目に変化がない。
  • ImageAlpha(Mac)」「OPTPiX Snap(Win)」「OPTPiX WebFree」「JPEGmini」色数を減らすツール。見た目に変化がある。
  • SpritePad」「SpriteMe」「Stitches」CSS Spriteの画像やCSSを簡便に書き出してくれるツール
モバイルWebパフォーマンス最適化(斉藤祐也さん)

  • スマホは6〜7年前のパソコンに少し新しいGPUが搭載された程度のデバイス
  • ページのロードに5秒以下しか待たないユーザーの割合は74%
  • HTMLで、CSSは上に、jsは下に記述する(CSSはページロードを妨げるが、jsはモダンブラウザではページロードを妨げない)
  • リダイレクト(foo.jp→m.foo.jp)は避けた方がいい
  • CSSのパフォーマンス改善は心配しすぎないこと。共有化できるプロパティは共通のクラスで定義する。
設計段階から実装まで、今すぐ始める高速化(こもりまさあきさん)

  • 目に見えない部分を改善する。それもデザインのひとつ
  • 分割されすぎたCSSやjsは可能な限りまとめる
  • excssive.com」CSSに含まれる余分な改行やコメントを削除してくれるツール
  • twitterのボタンやFacebookのjsなど外部サービスのコードは定期的に見直す
  • 変更の少ない画像やCSSやjs、jQueryなどのライブラリはキャッシュさせた方がいい
  • 画像をFlickrから表示、jQueryをGoogleコードから読み込む、よく使うファイルを別サーバーから読み込むなど、バイパスを作ってあげる
  • 箱づくりのファイル(HTML, CSS, js)はとにかく速く!設計段階からちゃんと考えること

今まで表示速度最適化については、なんとなく意識してはいたものの、しっかりやっていなかったと反省しました。できることは、まだまだある・・・そう感じました。

測定ツールや画像の最適化ツールなど、便利なツールの紹介が多かったのもLP23の特徴だったのではないでしょうか。明日から使えるTipsが盛りだくさんで、おなかいっぱいになる1日でした。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働きながら、個人でもWebサイト制作業務を請け負う。趣味ではシャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー