2006年04月30日（日） コメント:0 トラックバック:1
FC2ブログ管理画面のHTMLソースにおける無駄なタグを削るとどれくらい軽量化できるのか、 試しに「テーブルレイアウト→HTML＋CSSレイアウト」の書き換えをしてみました。
- FC2ブログ管理画面Before（HTML 33.4KB, 外部CSS 5.68KB）
- FC2ブログ管理画面After （HTML 15.6KB, 外部CSS 1.70KB）
（どちらもオリジナルファイルに含まれていたJavaScriptは削除しています。）
書き換え後は元のものを完全再現したものではありませんが、ファイルサイズは半分以下になりました。（ただし、書き換え後のCSSはトップページ用のものだけであるのに対し、オリジナルの外部CSSは管理画面のすべてのページで使用されるスタイルが書かれているためサイズが大きい。外部CSSを含めなければファイルサイズの削減は50%程度になる。）
元のソースには相当無駄な記述（無意味なtable要素）が多かったわけですが、書き換え後のソースでは不要なtableを無くすだけでなく、なるべく記述量を減らすようにしています。
- レイアウトはCSSで
-
元のソースはtable要素の複雑な入れ子、widthやbgcolorなどの見た目のための属性がたくさん使われている一方、見出しやリストといった構造を記述する要素はほとんどありません。
書き換え後はhn要素やdl要素、p要素を使って情報を整理し、大まかなレイアウト（2段組）のためにひとつのレイアウトテーブルを使います。 余白や色の指定はすべてCSSで行うほうが効率的です。
- 終了タグの省略
-
HTML4.01ではいくつかの要素で終了タグを省略できます。とくに頻出するdd要素、option要素、li要素、td要素などの終了タグを省略することでファイルサイズを抑えます。
p要素の終了タグも省略可能ですが、p要素は上記の要素と比べて終了箇所があまり明確ではなく、ブラウザによっては不具合があるらしいので終了タグの省略はしません。
- 訪問者履歴の軽量化
-
<option value="blogID">blogID</option><option>blogID
option要素はvalue属性を省略すると、要素内容が送信されます。つまりvalue属性値と要素内容が同じであるなら、value属性を省略しても結果は同じになるのです。 ついでに終了タグも省略すれば、option要素はほぼ半分の記述量で済みます。
アクセス数の少ない個人サイトならこの程度の軽量化は微々たるものですが、PVの多いサイトでは転送量を半分程度にまで削減できることは馬鹿にできません。 つまり、AjaxよりもHTMLをどうにかしてほしいなぁということです。
コメント（0件）