てんぽ: FC2ブログ管理画面をCSSレイアウトで軽量化

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

FC2ブログ管理画面をCSSレイアウトで軽量化

2006年04月30日(日)

FC2ブログ管理画面のHTMLソースにおける無駄なタグを削るとどれくらい軽量化できるのか、 試しに「テーブルレイアウト→HTML+CSSレイアウト」の書き換えをしてみました。

(どちらもオリジナルファイルに含まれていたJavaScriptは削除しています。)

書き換え後は元のものを完全再現したものではありませんが、ファイルサイズは半分以下になりました。(ただし、書き換え後のCSSはトップページ用のものだけであるのに対し、オリジナルの外部CSSは管理画面のすべてのページで使用されるスタイルが書かれているためサイズが大きい。外部CSSを含めなければファイルサイズの削減は50%程度になる。)

元のソースには相当無駄な記述(無意味なtable要素)が多かったわけですが、書き換え後のソースでは不要なtableを無くすだけでなく、なるべく記述量を減らすようにしています。

レイアウトはCSSで

元のソースはtable要素の複雑な入れ子、widthやbgcolorなどの見た目のための属性がたくさん使われている一方、見出しやリストといった構造を記述する要素はほとんどありません。

書き換え後はhn要素やdl要素、p要素を使って情報を整理し、大まかなレイアウト(2段組)のためにひとつのレイアウトテーブルを使います。 余白や色の指定はすべてCSSで行うほうが効率的です。

終了タグの省略

HTML4.01ではいくつかの要素で終了タグを省略できます。とくに頻出するdd要素、option要素、li要素、td要素などの終了タグを省略することでファイルサイズを抑えます。

p要素の終了タグも省略可能ですが、p要素は上記の要素と比べて終了箇所があまり明確ではなく、ブラウザによっては不具合があるらしいので終了タグの省略はしません。

訪問者履歴の軽量化
  1. <option value="blogID">blogID</option>
  2. <option>blogID

option要素はvalue属性を省略すると、要素内容が送信されます。つまりvalue属性値と要素内容が同じであるなら、value属性を省略しても結果は同じになるのです。 ついでに終了タグも省略すれば、option要素はほぼ半分の記述量で済みます。

アクセス数の少ない個人サイトならこの程度の軽量化は微々たるものですが、PVの多いサイトでは転送量を半分程度にまで削減できることは馬鹿にできません。 つまり、AjaxよりもHTMLをどうにかしてほしいなぁということです。

#88
カテゴリ:FC2ブログ
タグ[ FC2ブログ CSS HTML ]

(-0件)

コメントの投稿

トラックバック(-1件)

http://mb.blog7.fc2.com/tb.php/88-55fa1948

FC2がブログ管理画面の統合をするそうです。延期されました。

FC2がやりました。 ウマがやりました。 最初はこんなこといってます。 平素はFC2ブログ(http://blog.fc2.com/)をご利用頂きありがとうございます。 現在新管理画面を現行の管理画面と並行して運用を行い、 統

  • 2007年12月10日(月)20:56:28
  • from 荒らしは放置

<<トグルはわかりにくい | FC2ブログのプラグイン変数まとめ>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。