goods and life +

CSSセレクタによる高速化?!

CSSセレクタによる高速化は fanblogs でも効果がある ?(*゜▽゜*)♪

で、fanblogs の CSS 見たんです、CSS。
fanblogs の CSS ってのは要素が多めに入ってる。そん代わり id が少なめ。これ。
しかしこれをやると id や class の名前で HTML 側の文字数が増えるかもしれない諸刃の剣、素人にはお薦め出来ない。
…っていう、まるでどっかで見た事がある有名なコピペのようなお話です。
ぶっちゃけていうと、より負荷がすくなくなる CSS を書けば一石二鳥だっていうお話ですが、これだけでほんとに効果があるのでしょうか?

Web ページを高速化する

非常に効果がある 20 (プラスアルファ) のヒント
…によると、塵も積もればなんとかで、最小主義者に徹して軽量化や高速化はやって損はない、どんな小さな積み重ねでもそれが無駄になるってことはないって感じで吹き込まれた inali ですが…。

さらに高速化について検索してみると 30分でできる!Webサイトを高速化する6大原則 とか!
たったの30分で表示時間によってユーザーが感じるフラストレーションを減らせるとか!

30日に見たときの様子

さっき見たときの様子

 

30分でできる!Webサイトを高速化する6大原則に書いてあるのが


【Webサイトを高速化する6大原則】

 ・画像は最適化してから使え!
 ・画像はサイズを指定せよ!
 ・HTTPリクエストは最小にせよ!
 ・CSSセレクターは短く最適化せよ!
 ・CSSは上に、JavaScriptは下に『まとめて』記述せよ!
 ・プロファイリングツールを使いこなせ!

のマークが多いわりには普通のことだったりしますが、inali がやっていなかった事も入ってます。

でも、いわれてみれば記事中の写真とか、軽さと汚さの天秤で重くはならないようにはしてても、fanblogs の「画像/ファイル」で挿入する事が多いのでいちいちサイズ書いてないなあ…
でも、ちゃんと書いとけば読み込む前にブラウザが先に画像のサイズを計算するので、書いてないよりも速くなるんですよね。

…とかいろいろ見てたそんなおり、おーとえすさんの記事でちょっぴり興味を持っていたCSSの高速化の件。

CSSセレクタの基礎?で紹介されていた、Webtech WalkerさんとこのCSSセレクタの高速化(リンク切れ)の記事があります。

CSSのセレクタは body .contents .header span aというように左から右により詳細になっていくように指定するけど、ブラウザは逆に右から左にセレクタを解釈しながら描画していくため、ワイルドカード的な役割を果たす便利なユニバーサルセレクタや子孫セレクタなどがつかわれていると全部読みにいくのですごくコストがかかって、そのかわりそれぞれに idや class を設定して、おまけに idやclass に要素名をつけなければその分描画は速くなる、そもそも id なんて元々固有のものなんだから並べる必然性もなし、というものです。

そしてさらに、それにどれほど効果があるのかを検証する 0xFFさんとこのCSSセレクタの高速化の話を検証っていう記事がありました。
それによると、どうやら元ネタは続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスで、さらに元ネタの元ネタが Writing Efficient CSS for use in the Mozilla UI – MDC らしくて、Mozilla の記事に in the Mozilla UI とある通り、Firefox などの Mozilla 系ブラウザの UIレベルの話で、なんでも CSS でスタイルを指定できる(ので指定するから)ゆえ、その分 CSS のパフォーマンスについて考慮するというべきものだったというお話らしくて…。

で、実際に測ってテストをされた上で、その結果がこんな感じでまとめられていました。


・セレクタを複雑にしてもパフォーマンスにはほとんど影響はない
・クラス名だけのセレクタは保守性を下げるだけだから、IDをつけたりして範囲を明確にしたほうが良い
・クラス名だけのセレクタにするために要素という要素にクラス名を追加してたら、その結果こんどは HTML が無駄に大きくなって逆に(転送やパースに)コストがかかってお釣りがくるかもしれない
・JavaScript から querySelectorAll を使うときはクラス名だけのほうが高速だけど、IE6,7 のことを考えるならせめてタグ名は指定したほうが良い

さらに、NAVER Engineers’ Blog の CSSセレクタによる高速化、実際のところってのがありまして、それによると、


「場合によっては開発、運用時のコスト増加とトレードオフとなる場合があるため、やみくもに導入する前に、その施策にはどの程度効果があるのかという点を理解しておく必要があります。」

こういった施策にどの程度効果があるのか、サンプルコードのファイルを作って実際に測ってテストをおこなった結果、「スタイルを当てる要素にはできるだけclass又はIDを指定する、子孫セレクタは重いのでできるだけ減らすという施策に一定の効果はあるようですが、その効果が如実に現れるのはHTML、CSSのコードが非常に大きいページに限られるようだ。そのなかでも、子孫セレクタを減らす施策よりも、スタイルを当てる要素にはできるだけclass名を指定する施策のほうが効果があるようです。」というものでした。

まあでも fanblogs は実際に表示も速くないので、ちょっとした施策で少しでも軽くなるのならできる範囲のことはやってみたい、どうせ一度設定したスタイルをたびたび変更する事とかもまずないかと思うし、施策や運用を含めた作業のコストとのバランスとかそんなに考える必要もないですし…。

…ってことで、inali もマネしてやってみました。

inali が使ってるテンプレは左カラムだけしかないんだから body#doubleR とかそもそもイラネ、body#doubleL だけにしようとか、そうした上でさらに body#doubleL #container って、#container は1個しかないんだから #container だけでいいじゃね?とか、#entries .entryDate って.entryDate は他のスタイルで使ってないから .entryDate だけでいいじゃね?とか、#content > table > tbody > tr > td.entry_text って<td class=”entry_text”>しかないから .entry_text でいいじゃね?とか….。

そんな感じでアミバ様のように1個1個突いては様子を確認しつつ、無理めでダメだった所は「あるれぇ~、まちがったかな~??」とかいいながら戻したりしてみたのです。

あと、インラインで書かれたCSSはブラウザにキャッシュされないとか小耳にはさみ、表示されるまでにちょっと重い気がしている Google カスタム検索、これの長~いインライン CSS の中の一部を除いて、残り大半をフリースキンの編集にあるスタイルシートの中に入れてみました。
これで一度読み込まれた後はブラウザにキャッシュされるはずなので、もしかしたらもうちょっと軽くなるのかな~?

…ってことで、CSS セレクタによる高速化は fanblogs で使われているスタイルシートの記述量程度のサイズのブログで実際にどの程度効果がでるのか、来週頃まで様子見してみてから、Google ウェブマスターツールの「サイトのパフォーマンスの統計の表示」でチェックしてみます~(*゜▽゜*)♪

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス [大型本]

オライリー♪~(゚ε゚( )

URL :
TRACKBACK URL :

  • コメント ( 4 )
  • トラックバック ( 0 )
  1. こんばんは

    すごくけんきゅうしていますね。

    また、あしのほうみました、。

    確かにがぞうにんしょうしかないのかな・・・

    私自身が、みにくくてね・・・

  2. 確かに見にくいですよね~、GとCとか、9なのかgなのかとか
    まぎらわしくて、inali もたびたび間違えちゃいます

    でも画像認証だと、離れている間に荒らされ放題とかはなくなりますし
    消しても消しても次つぎ来るってのもなくなって、いたちごっこには
    なりにくいので、毎回IPを登録する場合とどっちが楽になるかですね…

  3. お疲れ様です。
    どれくらい効果が出るんでしょうかね。ファンブログのCSSはかなり無駄にセレクタの記述があるので、結構記述量的には削減出来るんですが、紹介されている記事の感じだとほとんど効果はないかもですね。。w

    ページの表示速度とか、測定出来るページとかサービスとかあるので、それで何の読み込み、表示に時間がかかっているのか、ってのを見て、その時間がかかっている物を改善するってのが割と簡単なページ標示速度の削減方法かな、って思います。

    例えば、
    http://sp.longseller.org/
    ってサイトがあるんですが、ここはファイルのダウンロード時間をそれとなく調べてくれるので、どの程度正確かは分りませんが、これを参考に多少ページのカスタマイズをしてた時期もありますよ。
    やはり、画像の読み込みとか、スクリプトの読み込み、表示ってのは時間がかかるので、そういうのを減らすと表示速度は変わるかもですね。

    サイドバーにたくさん広告があるので、それを少し減らすだけでも結構早くなるかもですよ? 分かりませんけど。。w

  4. >紹介されている記事の感じだとほとんど効果はないかも

    そうなんです、これの10倍くらいの量のCSSじゃないと目に見えた成果は出ないかも…。

    sp.longseller.org
    見てみました。
    FolliFollieのハートのブレスが他の10倍も重いなんて…!
    これ春夏にぴったりでかわいいんだけどなあ~、ん~

この記事にコメントする

Return Top