SEOに悪影響を及ぼすCSSセレクタとは？

photo by Igor ™

Googleでは今年からページの表示スピードをSEOの評価基準に加えることを発表しましたが、Googleが推奨する速度アップの改善方法の一つにCSSの指定方法があることが分かりました。

以下にGoogleで挙げられていた項目をリストアップしてみたので御覧ください。

良くない方法

過度な子孫セレクタ

例えば、次のようなHTMLがあるとします。

<div id="gnavi">
<ul>
<li><a href="about.html">当店について</a></li>
<li><a href="product.html">製品情報</a></li>
<li><a href="support.html">お問い合わせ</a></li>
</ul>
</div>

この中の<li>要素に対してスタイルを適用させたいとします。

その際、次のように多くの子孫を定義してしまうと、確認する要素が過剰になってしまい、ブラウザ表示のスピード（レンダリングスピード）が遅くなってしまいます。

#gnavi ul li { ... }

他にリスト要素がないのであれば、このようにします。

li { ... }

あるいは、他にもリスト要素があるようであれば、<div id=”gnavi”>の所を利用して次のようにします。

#gnavi li { ... }

また、ユニバーサルセレクタ「*」は過度な子孫セレクタの代表格なので、極力避けるようにしましょうね。

子セレクタ・隣接セレクタ

子セレクタ

「子セレクタ（子供セレクタ）」は、ある要素の1つ下の階層の要素を指定するためのセレクタです。　たとえば、上に挙げたHTMLで<li>要素を指定したい場合に「ulタグの一つ下」というところを定義するには以下のようにします。

ul > li { ... }

隣接セレクタ

「隣接セレクタ」は、ある要素と隣り合っている要素を指定するために指定します。　以下のように指定すると、直前の要素が<li>になっている<li>タグにスタイルが適用されます。

li + li { ... }

ブラウザ「あ、（子 or 隣接）セレクタですか…じゃ、他の所も見ないと…」←遅い

これら子セレクタや隣接セレクタを指定してしまうと、ブラウザはレンダリングする際に他の要素を比較検討しないといけなくなります。　これがレンダリングスピードを鈍らせ、表示スピードが落ちてしまいます。

階層を見て、必要なければ子セレクタを外すとか、IDで要素を命名して隣接セレクタを回避するなどして対策しましょう。

過剰に定義したセレクタ

たとえば<div id=”gnavi”>という部分に以下のような過剰な定義をしてしまうことです。

div#gnavi { ... }

ID属性はページ内で一意なものにつけることになっているので、divは必要ありません。

#gnavi { ... }

「:hover」を<a>タグ以外に定義する

次のようにアンカータグ（<a>）以外に擬似属性である「hover」を定義してしまうと、IE7とIE8でパフォーマンスが低下するという報告があります。　避けられる場合は避けておきましょう。

div:hover { ... }

このページをシェアする

コメントを残すコメントをキャンセル

2010-06-04