cssの書き方でもっとサイト表示が速くなるという話

Yslowやpagespeedを使ってサイトを最適化していくことが多い最近なんですが、cssの書き方次第ではわずかですが

パフォーマンスを改善できるらいいです。

１．不要なクラス・ID、未使用のスタイルは削除する

CSSのルールは必要最小限であればあるほどいいので、不要なスタイルはファイルサイズ、転送時間の肥大化につながります。とりあえず、見直しましょう。

２．ユニバーサルセレクタでのKey・タグセレクタでのKeyは使わない

まず、ユニバーサルセレクタではブラウザはすべてのDOMを走査してしまうため、非効率です。

`

body * {…}

#navi * {…}

`

次に非効率なのはタグセレクタでこれも余計にdomを走査してしまうことが考えられます。

`

#footer div {…}

#side p {…}

`

３．IDを過度に修飾しない

ＩＤは一意的なものであるため、過度に就職をする必要がありません。

無駄に冗長的な表現をすることは避けるほうがいいと思います。

`

div#navi{…}・・・Not Good

form#order{…}・・・Not Good

#navi{…}・・・Good

#order{…}・・・Good

`

４．子セレクターの使用はできれば避ける

それほどパフォーマンスに影響はしませんが、頻繁に辿るようなルールは非効率です。無駄なコストを避けるべきです。

できるならクラスやIDで直接指定する方がコストは削減されます。

`

ul > li > a {…}

dl > dt { … }

`

** ５．:hover擬似セレクタを使わない**

:hoverはとにかくパフォーマンスに悪影響を及ぼし、aタグ以外の場合はややこしいことにもなりかねません。

マウスオーバーの表示の切り替えはjavascriptで処理する方が効率的です。

６．@import構文を使わない

複数のcssの管理に便利な@import構文ですが、これを使うとcssの並列読み込みが妨げられる事があります。基本的にブラウザは複数のcssファイルを並列で読み込みますが、@import構文を使うと直列でしか読み込まなくなる場合があります。読み込みに数秒でしょうがロスが生じるので、可能ならさける方がよいでしょう。特にIEとか。

あとは基本的に親要素からの継承をうまく理解して、無駄な指定を省くことでパフォーマンスのよいCSSを作成できるというわけです。しかし、日々のメンテナンスを考えると、パフォーマンス優先でマークアップルールを作るのは困難かな・・・。

ということで、ここに書いたものは、

Google Page Speed Optimize browser renderingのUse efficient CSS selectorsより抜粋しました。