今回の「よくわかるSEO対策」はスタイルシート（CSS）編です。
多くの人が
「SEO対策なのに、CSSの説明をするの？」
と思うかも知れませんが、これには意外な関係性があったのです。
現在CSSを学んでいる人、そしてCSSの書き方ならマスターしているといった人でも、SEOのことまでを考慮した記述ができていなければ、まだまだサイトを改善させることができるということです。
最後まで読めば、SEO対策の知識はもちろん、今よりもCSSについても理解が深まるはずです。
CSSとSEOの関係性
CSSの目的の大部分は、ページの見た目をきれいにすることです。
見やすくて楽しさのあるページはユーザーを楽しませてくれたり、ブログ記事をスムーズに読ませてくれたり、ネットショップであれば商品を美しく、そして買いたくなるように購買意欲を刺激することもあります。
ページの質を上げるという意味でも、ユーザー目線でのサイト作りはSEO対策としては重要なことです。
しかし今回解説していくのは、そういった操作性や楽しさといった見た目にテコ入れする方法ではありません。
CSSの記述を意識することによる、ページの読み込み速度を上げるといった内部施策をご紹介します。
レンダリングの高速化
ページへアクセスすると、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を解析するまでにこの３工程が行われているのです。
- rain-textクラスの確認
- pタグであるかの確認
- １階層上にweather-blockクラスがあるか確認
- 確認終了
では、二つ目をみてみましょう。
section .rain-text{
margin-botom: 8px;
}
先ほどより指定が少なく簡潔になりましたが、処理についてはどうでしょうか。
この場合であれば、まず「クラスがrain-text」のタグを探し、その後それが「sectionタグの子孫であるか」をチェックするために、rain-textクラスより上位のタグをすべてチェックする必要があります。先ほどであれば１階層だけだったのですが、今回は祖先すべてが対象です。
２工程ではありますが、実際にチェックする量については階層が下であればあるほど膨大になるのです。
- rain-textクラスの確認
- 上位タグにsectionがあるか上位タグすべてを確認
- 確認終了
最後はクラスのみの指定です。
.rain-text{
margin-botom: 8px;
}
これであれば、「クラスがrain-text」であれば解決なので処理がすぐに終了します。その分、レンダリングにかかる時間は短くて済みます。
- rain-textクラスの確認
- 確認終了
人間はCSSコードを左から右に記述していきます。
また、上位の親からしっかりと絞り込んで言ったほうが、他の部分に影響を与えることなくクラスをピンポイントで指定して、スタイルを反映することができるので、余計な親要素まで書いてしまうことが多々あります。
しかし、サーバー側からすると人間と違って「右から左」という順番に解析していくため、安易に親の指定がされていると「本当にその条件にあっているのか」という確認に無駄な処理を繰り返してしまっていることがあるのです。
そのため、CSSはできるだけ簡潔にクラスやIDを指定することで反映させる方が、ページのレンダリング速度が格段に上がるということです。
まとめ
SEO対策と聞くと、メタタグやリンクタグ、階層化や外部施策、キーワードの選定などといった方法が思い浮かぶ人がほとんどではないでしょうか。
もちろんそれらは大切ですが、それ以外の部分にも要因があるということを知っておかなければなりません。
ページのレンダリング速度を上げることで、よりスムーズにユーザーにページの内容を伝えてあげられます。
しかしページの読み込みが遅いと、その時点でページの閲覧を諦めてしまいサイトから離脱してしまいます。１秒遅くなれば、それだけ何倍ものユーザーが離れていってしまうのです。
最後に、今回のポイントをまとめておきます。
レンダリングにかかる時間を短くする
CSSの指定はできるだけ簡潔する
記述量が膨大になればなるほど、それだけ解析に必要な時間は増えていきます。そんなとき、一つ一つの時間をできるだけ短縮できていれば、比べたときにより大きな効果があります。
今までCSSを見た目だけを意識して記述していた人は、是非記述方法一つでSEO対策をしているということも考えながら取り組んでいくと、よりよいサイトが作れるようになるでしょう。
関係がないと思っていたものでも、実際に詳しく知ることで意外な関係性が出てくるのです。
せっかく作るのであれば、より得られる効果の高いものにしていきましょう。
他にもSEO対策については記事をまとめているので、これを機にSEO対策へ本格的に取り組みたい人は是非参考にしてください。
HTMLの基本設計「よくわかるSEO対策」構造化（マークアップ）編
