CSSレンダリング高速化の5つのポイント

2012年04月26日| WEBサイトテクニック

CSSレンダリング高速化の5つのポイント

せっかくマークアップしたサイトが表示後に妙に動きが引っかかる、なんとなく重い気がする。
それはCSSのレンダリングの問題かもしれません。
CSSセレクタから今一度サイト高速化を見直してみることにしましょう。

CSSのレンダリングの問題はどのようなものか？

PCサイトを作る上ではこれまでさほど意識してこなかったCSSのレンダリング。
いざスマートフォンサイトを作ってみるとこのレンダリングは非常に重要で、
CSSのレンダリングが遅いと

・スクロールがひっかかる
・リンクの反応が鈍い。
・CSS3のbackgroundがなかなか表示されない
・とにかく全体的に動きがカクカクしてストレスが溜まる

という問題が起こります。そこでレンダリングについて今一度学んでみるべく、海外の有名サイトより、こんな記事を紹介します。

Efficiently Rendering CSS | CSS-Tricks

CSSセレクタは右から左へ

ul > li a[title="home"]

このようなセレクタがあったとします。CSSセレクタでは右から解釈していくので、この場合1番最初に読まれるパーツはa[title=”home”]です。
この部分は部分は、最終的に、それが選択されている要素であるという点で “キーセレクタ”と呼ばれています。

IDは最も普遍的で、最も効率的である

セレクタのIDは最も普遍的で最も効率がよい。
確かにIDはユニーク、他とかぶらないということですから最も効率がよいはずです。
以下は4種類のセレクター(ID、class、タグ、ユニバーサルセレクタ)を、効率のよい順に並べたものです。
下から4つ目まではよく見ますが、タグレベルだったり、『*』や、属性値にあてていくのはレンダリング的には効率が悪いそうです。

#main-navigation { } /* ID (Fastest) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (Slowest) */
#content [title=’home’] /* Universal */

あまり意味のないセレクタ

これはそれほど効率的でないことは確認されています。
IDはブラウザから最初に検索されるので、その子供の要素を見つけることが容易なのでしょう。

#main-nav > li

タグにIDをあてるのは意味がない

ul#main-navigation

IDはそもそもユニークなのでタグと組み合わせても意味がない。
(ごもっともです。でもITかあさんは癖でやってしまうことがあります。)

子孫セレクタは最悪

『これはもう公害です』とまでおっしゃっています。

html body ul li a

セレクタを書く意味をもう一度考えてみる

#main-navigation li a { font-family: Georgia, Serif; }

こんなことをするなら

#main-navigation{ font-family: Georgia, Serif; }

こうしたほうがいいに決まっていますね。

CSS3は効率的か

まことに悲しいお知らせです。

”CSS3 について悲しいことは、
ページのパフォーマンスを気にする場合、
全てにおいて使用すべきではないことです”

CSS3のセレクタ（例えば、は、：nth-child）、マークアップをきれいに、セマンティック維持しながら、私たちがしたい要素をターゲットにするうえで非常に素晴らしいです。
(センスのないClass名やID名で悩まなくていいですからね！)
しかし、このセレクタはブラウザのリソースが集中的であることから　高速化を意識するのであれば使うべきではないということです。