CSSとの意外な関係「よくわかるSEO対策」スタイルシート編

レンダリングの高速化

ページへアクセスすると、HTMLファイルを上から順番に解析していきます。そしてCSSファイルがあればそれを読み込んでから、次のCSSファイルやHTMLタグなどの処理をします。

そして最後の行まで処理を終えるとページの生成が完了です。このページを生成していくしことをレンダリングといいます。

Googleのページ評価の指標に、このレンダリングのスピードがあります。そのため、CSSファイルもminify化して、余計な行や空白を削除するような方法は実際に用いられています。

※common.min.cssなど

また、CSSファイルを読み込みしないようにHTMLファイル内に記述するケースも少なく有りません。

多少の記述量であれば確かに理にかなっているのですが、量が膨大になれば１つのファイルへ記述してしまうことは作業効率はもちろん、保守安全性が乏しくなってしまいますので注意が必要です。

こういった圧縮作業や記述場所についても大切ですが、CSSのレンダリングの流れを理解しておけば、記述に気をつけておくだけでレンダリングにかかる時間を短くすることができるのです。

具体的な記述方法

例えば、以下のようなHTMLコードがあったとしましょう。

<section class="weather-block">

              <p class="rain-text">明日は雨ですよ！</p>

</section>

このrain-textの下には少し多めに余白が欲しいので、CSSでmargin-bottomを指定します。

その例を複数みてみましょう。

/* パターン１ */
.weather-block > p.rain-text{
              margin-botom: 8px;
}

/* パターン2 */
section .rain-text{
              margin-botom: 8px;
}

/* パターン3 */
.rain-text{
              margin-botom: 8px;
}

記述方法は他にもありますが、今回はこの３つの例にみていきます。

上記３つの例では、実際に出力される結果は同じですが、レンダリング処理には違いがあります。

まず一つ目の記述方法についてです。

.weather-block > p.rain-text{
              margin-botom: 8px;
}

CSSは右から左という順番で解析されていきます。

そのため、上記の記述方法であればまず、「クラスがrain-text」のタグを探します。

見つかれば、それが「pタグであるかどうか」を確認して、さらにそれが「wether-blockの子であるか」を確認するために１階層上のタグをみます。時間としてはコンマの世界になりますが、実際にCSSを解析するまでにこの３工程が行われているのです。

では、二つ目をみてみましょう。

section .rain-text{
              margin-botom: 8px;
}

先ほどより指定が少なく簡潔になりましたが、処理についてはどうでしょうか。

この場合であれば、まず「クラスがrain-text」のタグを探し、その後それが「sectionタグの子孫であるか」をチェックするために、rain-textクラスより上位のタグをすべてチェックする必要があります。先ほどであれば１階層だけだったのですが、今回は祖先すべてが対象です。

２工程ではありますが、実際にチェックする量については階層が下であればあるほど膨大になるのです。

最後はクラスのみの指定です。

.rain-text{
              margin-botom: 8px;
}

これであれば、「クラスがrain-text」であれば解決なので処理がすぐに終了します。その分、レンダリングにかかる時間は短くて済みます。

人間はCSSコードを左から右に記述していきます。

また、上位の親からしっかりと絞り込んで言ったほうが、他の部分に影響を与えることなくクラスをピンポイントで指定して、スタイルを反映することができるので、余計な親要素まで書いてしまうことが多々あります。

しかし、サーバー側からすると人間と違って「右から左」という順番に解析していくため、安易に親の指定がされていると「本当にその条件にあっているのか」という確認に無駄な処理を繰り返してしまっていることがあるのです。

そのため、CSSはできるだけ簡潔にクラスやIDを指定することで反映させる方が、ページのレンダリング速度が格段に上がるということです。