CSSを書き換えてサイトを高速化(Page Speedでサイトを高速化)

Page Speedで計測した結果に出てくる項目のうち簡単にできそうな部分に手をつけていこうと思います。
簡単にできそうな部分ということでCSSを書き換えるだけでできそうな部分に手を付けます。
まず、最初は「Remove unused CSS」の項目から。そのあと、「Use efficient CSS selectors」と書かれている項目に着手。
「Put CSS in the document head」や「Combine external CSS」はHTML側で読み込むCSSを書き換えないといけないっぽいので今回はパスします。
Remove unused CSS
使っていないCSSセレクタはCSSから削除しましょう、というアドバイス。
「Remove unused CSS」にプラスのアイコンがついていれば、使っていないセレクタがCSSに記述されているということになります。
このブログではプラスのアイコンが出なかったので(出ると思ったんですが)、他のサイトを計測した結果を貼り付けておきます。
画像のサイトでは、3.6KBのCSSファイルのうち856Byte(全体の21%)も使っていないセレクタが書かれていました。
その下には書かれている行番号とセレクタの一覧が表示されるので、それらを削除すればCSSのダイエットをすることができます。
Use efficient CSS selectors

まず、Use efficient CSS selectorsってどういう意味か。gooの辞書にefficientを突っ込んでみると「効力のある」という結果が返ってきたので、「もっと(高速化に)効力のあるCSSセレクタを使え」っていう意味でしょうか。
効力のあるCSSのセレクタって何だ?って思いますが、直した方がよい場所の一覧は出ているので、その一覧とGoogle Page SpeedのOptimize browser renderingというページとを照らし合わせつつ直していきます。
といっても英語なのでざっくりと適当にかいつまんで書き残しておきます
ユニバーサルセレクタ(*)は使わない
ユニバーサルセレクタというのはbody * みたいなやつのことです。
これを使うと全部の要素を見にいってしまうようで、なるべく使わないようにしましょうとのことです。
ただ、reset.cssなんかで良く使われるものではあるのでここは無視しちゃいました。
セレクタとしてタグは使わない(clssやidを使う)
セレクタとしてタグを使った場合もユニバーサルセレクタと同様にそのタグを全部見に行っちゃうっぽいです。
子孫セレクタの代わりにclassセレクタを使う
ul li { display: inline }
ではなく
.class { display: inline; }
を使った方がよいということみたいです。
不必要に長いセレクタにしない
自分はよくやってしまうんですが、余計な親をつけない方が良いみたいです。
例えば ul li a ではなく、ul a にできるんだったらその方がよいっていう意味でしょうか。
IDセレクタとタグを一緒に使わない
ul#id { ... }
こんな書き方は非効率だよってことみたいです。
そもそもidはユニークなものなので、頭にタグをつけたからって意味ないじゃん、ってことなんでしょうか。
もともとファイルサイズが小さいCSSファイルなので、劇的な効果ってほどではないと思いますが、まず手始めにこんなところから始めてみると簡単だと思います。
COMMENTS
コメントはまだありません。ぜひあなたの一言を!
GIVE ME A COMMENT!