Home / Diary / ニュースサイト向けの即席サイト軽量化法前編

ニュースサイト向けの即席サイト軽量化法前編

ターゲットは中途半端にCSSを利用しつつ、fontやcenterタグが入り乱れているニュースサイト。構成次第では一般のサイトでも利用可能。

a+font

<p>
<font color="#994400" size="3">[サイト名](http://hoge/)</font><br />
<font color="#994400" size="3">[サイト名](http://hoge/)</font><br />
<font color="#994400" size="3">[サイト名](http://hoge/)</font><br />
...
</p>

サイトのブックマークなんだろうが、このようなタグがずら～～～～～っと並んでいる場合。基本的にfontタグで出来ることはCSSでも可能なのでCSSを利用する。例えばこれなら

a:link {
color : #994400;
font-size : 0.75em;
}

CSSにこう記述するのと同じ意味となる。上の例ならfontタグのサイズ×リンクの数だけHTMLファイルを軽量化できる。特定のリンクだけに適用したいのならクラスを指定すればよい。

<div class="bookmark">
[サイト名](http://hoge/)<br />
[サイト名](http://hoge/)<br />
[サイト名](http://hoge/)<br />
...
</div>

.bookmark a:link {
color : #994400;
font-size : 1.3em;
}

これは、bookmarkというclassが指定されたタグ内のaタグでリンクされたもの全てに適用するという意味。上の例ならdivの中のリンク全てになる。

center

用途が広すぎて例を示せないが、例えばtext-align:centerと指定すれば、その中にあるものは全て中央に寄せられる。問答無用で。

div { text-align : center; }
p { text-align : left; }

<div>
<h2>2005年3月2日</h2>
<p>適当な文字列...</p>
...
...
</div>

この例だとdivの中身は全て中央に寄せられるが、pにはleftを指定しているので、pの中身だけは左寄せとなる。

マーカー

<font color="#ffff00" SIZE="5">★</font>

こーゆーのを文字列の頭とかに持ってきてるサイト。★じゃなくて■だったり□だったりするパターンもある。要は色とサイズを指定できればよいので、文字数の少ないタグで代用する。

em {
color : #ffff00;
font-size : 1.5em;
font-style : normal;
}

<em>★</em>

たったこれだけでfontタグを一切使わず、且つスマートにマーカーを表示できた。font-styleを指定しているのは、emはデフォルトでfont-style:italicとなっているので、それを打ち消すため。

背景画像を利用することでも軽量化することができるが、即席ではなくなるので割愛。

target=”_blank”

ほぼ全てのリンクにtarget=”_blank”があるサイト。いっそのことbaseタグで一括指定してみてはどうか？　head内に以下のように記述するだけだ。

<base target="_blank" />

これで全てのリンクが新しいウインドウで開かれるようになる。個別に指定すればそちらが優先になるので、サイト内リンクにはtargetに_selfを指定すればよい。

[Link](link.html)

…

行間が欲しい為だけにbrを連打。非常に無駄だ。これはhrタグで置き換えることができる。普通にhrを置いただけでは横線が出るだけなので

hr {
  margin : 2em 0;
  color : #fff;
  border : 0;
}

こうすることで、hrの上下に2文字分のスペースを作りながら、横線を非表示にすることができる。colorは背景と同じ色にすること。こうすることでIEでは横線を非表示にできる。ただしFireFoxでは意味が無いのでborderを0にすることで、FireFoxなどで横線を非表示にすることができる。

CSSは外部ファイルに

<style type="text/css"><!--
body { ...
--></style>

ってな形でHTMLに書いているサイトが多いが、とてつもなく無駄なので、以下のようにhead内に記述することで軽量化を図ることができる。

<link rel="StyleSheet" type="text/css" href="style.css" />

こうする理由はブラウザのキャッシュ機能が働くからだ。IEだろうがFireFoxだろうが、一度アクセスしたファイルはHDDのtempフォルダに保存され、再アクセスした際に更新されていなかったなら同じファイルをtempフォルダから拾ってくる。

例えば複数ページで同じスタイルを利用している場合。HTML部分に直接記述しているサイトは、ページを移動するたびにスタイル部分を含んだHTMLページを読み込むが、あらかじめ外部ファイルにしておけば、最初にスタイルが記述されたCSSを読み込んで、以降はスタイル部分を省いたHTMLを読み込むだけで済む。つまり、ページ移動数×CSSファイルサイズだけ計量化したことになる。

CSSファイルを外部ファイルにして複数のHTMLから呼び出すということは、CSSファイルを変更すれば全てのHTMLに反映されるということだ。これを知らない人は、サイトデザインを変える為に全てのHTMLファイルに手を加えるハメになる。よっぽどの暇人且つマゾでないなら外部ファイルを積極的に利用しよう。

なお、これらはJavaScriptにも言える。こちらも外部ファイルにしよう。

どれぐらい効果があるのか？

色々とHTMLを軽量化をする方法を紹介したが、それらは実際にどれぐらい効果があるのか？　と思う人も少なからずいると思われるので、とあるサイト3つを利用して実験してみた。

	軽量化前	軽量化後	減少量
サイトA	86,148	73,728	12,420
サイトB	116,564	98,304	18,260
サイトC	68,120	58,551	9,569

数値の単位はバイト。大体10KBから20KB前後の軽量化に成功しているが、サイトの構成によりけりなので必ずしもこうなるとは断言できない。しかし、効果があることは確かだ。

次は実践方法

結局はスタイルに置き換えられる部分をスタイルに置き換えていっただけだ。そして、これをひたすら積み重ねていくことで、軽量化・最適化されたサイトに仕上がるだろう。

とりあえず前編はここまで。中編では実際にどうやってこれらを書き換えるかを説明していく。さすがにテキストエディタで一つ一つ手直しは億劫になるので、こういった作業を劇的に楽にしてくれるソフトウェアの紹介と使い方を。

Info

投稿日: 2005年3月2日
このエントリのURL
このエントリへのリンク（HTMLタグ）
ブックマークに追加する

Navigation

関連のあるエントリ: No related posts.
新しいエントリ（日付順）: エンジェリック・ヴェール新伝～エフェメール島綺譚～体験版公開
古いエントリ（日付順）: IEのリンクで新しいウィンドウを抑止する「New2Fwd」

Comment

投稿したコメントは公開されません。サイトオーナーのみが閲覧できます。
返信等を希望する場合は、コメント内に連絡先のメールアドレスかサイトのURLを入力してください。

2005
0302

⇧

ニュースサイト向けの即席サイト軽量化法 前編