このページの本文へ

Webサイトからユーザーを逃さない基本テクニック

30分でできる!Webサイトを高速化する6大原則

2009年09月09日 07時00分更新

Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

4.CSS セレクターは短く最適化せよ!

 CSSはシンプルに、短く書くことがもっとも大切だ。いくつかのポイントがあるのでぜひとも押えて欲しい。基本は、「ブラウザーはCSSを適用するときマッチング作業をしている」「マッチングの母体が大きくなればなるほど、効率は悪くなる」ということだ。

■ユニバーサルセレクター『*』は避ける

 ユニバーサルセレクター(全称セレクター)はその名のとおり“ユニバーサル”(すべて)であり、マッチングに相当の時間がかかる。つまり、


*{
    margin: 0;
    padding: 0;
}

というCSSリセットはレンダリングを遅くしてしまうため、なるべく使うべきではない。


■id名にタグやclassを付け加えるな

 idはもともとユニークなもの。タグやclassを付け加える必要はない。余計なものを付ければレンダリングは遅くなる。

●悪い例:


ul#global-nav

●良い例:


#global nav



■子孫セレクターは避けろ

 子孫セレクターもマッチングに時間がかかる。なるべくなら利用は避けたい。

●悪い例:


html body #global-navigation ul li a{
    color: red
}

●良い例:


.global-nav-link{
    color: red;
}



■子セレクターも避けろ

 子セレクターもブラウザーに大きな負担をかける。

●悪い例:


html>body>ul>li>a{
    color: red;
}

●良い例:


a{
    color: red;
}


■継承を利用せよ

 ベストな方法は、継承をうまく利用して、なるべく余計な指定をしないことだ。

●悪い例:


#bookmarkMenuItem > .menu-left { list-style-image: url(oxox); }

●良い例:


#bookmarkMenuItem { list-style-image: url(oxox); }


■IE7とIE8では、:hoverに注意

 a要素以外の要素に:hoverを利用すると、Internet Explorer (IE)7とIE8ではレンダリング速度が落ちてしまう。この症状は、DOCTYPEにstrictを指定した場合に特に発生する。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング