スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

CSSセレクタの使い方によってウェブページの表示速度は変わってきます。

劇的に速くなるということはないと思いますが、「ページの読み込みが0.5秒遅くなると、検索数が20%減少する」とか「ページの読み込みが0.1秒遅くなると、売り上げが1%減少する」なんて聞くと試してみたくなるのではないでしょうか。

webspeedselector.png

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

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

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

CSS
div ul li {color:red;}

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

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

CSS
h2 + p {...}

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

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

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

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

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

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

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

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

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

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

CSS
<div id=”navi”>...</div>
CSS
div#navi {...}
idは1つしかないユニークなものなのでわざわざ要素を加えて長くする必要ありません。classについても同じ要素に使うことが多いので同じことがいえます。
CSS
#navi {...}

これだけで十分ですね。

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

CSS
body div ul li {...}

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

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

CSS
div li {...}

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

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

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

CSS
<ul id="navi">
  <li>sample1</li>
  <li>sample2</li>
</ul>
CSS
ul#navi li {...}
これは私もよく使ってしまうのですが、これだとすべてのliから親にnaviというid名がついたulを探しにいくので処理に時間がかかります。
CSS
<ul id="navi">
  <li class="navi-li">sample1</li>
  <li class="navi-li">sample2</li>
</ul>
CSS
.navi-li {...}

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

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

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

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

まとめ

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。