ウェブページ高速化に効果的なCSSセレクタ

ウェブページの高速化とCSSセレクタの関係については「CSSセレクタの高速化の話し - Webtech Walker」で紹介されていましたが、先日GoogleのPage Speedのページでなかで「Use efficient CSS selectors（効率のよいCSSセレクタを使う）」と紹介されていて内容も若干違うので、こちらを簡単に例などを交えて解説してみます。

ブラウザはセレクタを右から左へ判別していく

まず知っておきたいのは「ブラウザはセレクタを右から左へマッチするか探していく」ということです。逆に考えていた人も多いのではないでしょうか。

div ul li {color:red;}

このような例では、まず liを探しに行き、見つかったliのなかで親要素にulがあるものを探し、さらに親要素にdivを持つものに適用するという感じになります。

という風にこの場合は右から左へ3段階の作業をおこなっています。

h2 + p {...}

このような場合、pタグすべての中から隣にh2タグがあるものに適用するという感じに2段階で適用する要素を探します。

ウェブページ高速化のためにすべきこと

ここからはRecommendations（推奨）として紹介されている項目について解説します。

ユニバーサルセレクタは避ける

ユニバーサルセレクタはすべての要素に対して適用されます。

p * {...}

このように指定するとpタグの中にある要素すべてとなります。

しかし、ブラウザはすべての要素のなかで親要素にpタグを探しにいくので時間がかかります。

できるだけidやclassを設定する

idやclassは段階を踏まず、1回で適用する要素を探し出すので、ウェブページ高速化を考えたとき効率的な指定方法といえます。後で紹介する子孫セレクタ対策にもなります。

idやclassに要素名をつけない

<div id=”navi”>...</div>

div#navi {...}

idは1つしかないユニークなものなのでわざわざ要素を加えて長くする必要ありません。classについても同じ要素に使うことが多いので同じことがいえます。

#navi {...}

これだけで十分ですね。

子孫セレクタ(特に無駄なセレクタ)は使用しない

body div ul li {...}

子孫セレクタは右から順番にマッチするか探していくので、表示を遅くする原因となります。ですので、ページ高速化を考えたとき、できるだけ使わない方がよいといえます。

どうしても使わないといけないときは仕方ありませんが、最低限必要のないセレクタは取り除いておくべきです。

div li {...}

bodyはすべての要素の親になるものですので別になくてもいいですね。ulあたりも必要ないケースが多いと思います。

子孫セレクタよりclassを使う

子孫セレクタは段階を踏んで適用する要素を探し出すため非効率ですので、適用する要素に直接class割り振った方がより効率的だといえます。

<ul id="navi">
  <li>sample1</li>
  <li>sample2</li>
</ul>

ul#navi li {...}

これは私もよく使ってしまうのですが、これだとすべてのliから親にnaviというid名がついたulを探しにいくので処理に時間がかかります。

<ul id="navi">
  <li class="navi-li">sample1</li>
  <li class="navi-li">sample2</li>
</ul>

.navi-li {...}

とすれば、直接navi-liの名のついた要素を探しに行くので時間は短縮されます。

aタグなんかは子孫セレクタで一括して指定していることが多いのではないでしょうか。

リンク以外に:hoverを使わない

div.onmouse:hover {...}

IE7と8では:hoverを使えますが、表示が遅くなるバグが報告されています。高速化を考えたとき使用を避けた方が無難です。どうしても使う必要があるときはjavascriptのonmouseover を使いましょう。

まとめ

最初に紹介したようにユーザーは表示速度に敏感です。こういった小さな積み重ねが大切だと思うのでぜひ対応させたいです。

ただ、使うことで不便になることも考えられるので、絶対に守った方がよいというわけではないですが、知っておいて損はないと思います。