lowply.github.io/blog

mixiを脱テーブル化するスタディ

ためになるエントリーが多い3ping.orgからmixiをXHTML+CSSで組みなおすというエントリー。

- テーブルで組まれたmixiのhtmlファイル容量が48KB (自分のページ調べ)
- XHTML+CSSで構成されたhtmlファイル容量が16KB

この軽量化率が他のページにも当てはまるとすれば、mixiをXHTML+CSSで書き直すだけでhtmlファイルのトラフィックを3分の1にする事が出来る。mixiの1日のPVは1000万と聞いたけど、削減される転送量は月で何テラだろう。サーバー管理費にするといくらだろう。

3ping.org

3分の1というのは素晴らしい。CSSのソースも非常に洗練されていて、「一通りプロパティを覚えてCSSを使えるようになった」という人は絶対目を通したほうが良いと思います。一意のdiv要素内のタグに対して、極力クラス名を割り当てないでスタイルを適用するという、「カスケーディング」の理解が深まるはず。これがCSSの本当の魅力なんだと思います。 XHTMLとCSSの詳細な構造をグラフィカルにたどれるFirefoxの拡張FireBugを使うと、より勉強になります。最新バージョンにはJSのデバッガも付いて、かなり強力なコーディングツールになってます。

- JavaScript debugger for stepping through code one line at a time
- Status bar icon shows you when there is an error in a web page
- A console that shows errors from JavaScript and CSS
- Log messages from JavaScript in your web page to the console (bye bye "alert debugging")
- An JavaScript command line (no more "javascript:" in the URL bar)
- Spy on XMLHttpRequest traffic
- Inspect HTML source, computed style, events, layout and the DOM

from Mozilla Add-ons
2006/05/28追記

東京webデザイナー日記:日経平均銘柄225社サイトの脱テーブル率調査 興味深い資料です。