CSSのプロパティやセレクタの記述の仕方で表示速度にどのくらい影響が出るのかテストしてみた

Update:

私達がせっせとマークアップしたコードを、ブラウザはどう読み解き、それがどの程度表示スピードに影響が出るのか。

CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォ...
当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。 パフォーマンスを意識すると、実装も変わってくる

ブラウザがCSSの記述を後ろから見ていくと知ったのは今年になってから。詳しくは上記colissさんの記事を参照してください。

だけれども、実際に差が出るのかは、検索してもなかなか出てこない。それなら自分で実験してみましょう。

デモサイトを作ります

コーディングの勉強も兼ねて、こんな感じで作りました（レスポンシブ未対応です）。

サンプルサイトデザイン

同じデザインで、CSSの記述をテストページ01とテストページ02とで変えます（使用している画像は同じものですが、キャッシュでスピードに影響が出ないよう、複製して名前を変えて参照しています）。

テストページ01

子要素にそれぞれclassを当てて、CSSの記述が反映されるように構築しています。

ブラウザはclass指定された該当子要素を参照する

ブラウザさんに↑こういう感じで参照してもらえるようにします。

例

<section class="mv-area">
  <div class="mv-container">
    <div class="mv-inner">
      <h6 class="mv-h6">CSSのプロパティやセレクタでどの程度スピードに影響がでるのか</h6>
      <h2 class="mv-h2">スピードテスト test01</h2>
      <p class="mv-p">子要素にclassを当てていったバージョン。<br>
      そこまでガチガチに作ったわけではないですが。</p>
      <div class="btn">
        <a href="#">ボタンはこちら</a>
      </div>
    </div>
  </div>
</section>
#test01 .mv-area {
  margin-top: 80px; background: #16204E; color: #fff;
}
#test01 .mv-container {
  height: 70vh; min-height: 680px; max-height: 740px; max-width: 1200px;
  padding: 0 50px; margin-right: auto; margin-left: auto;
}
#test01 .mv-inner {
  display: flex; flex-direction: column; justify-content: center; position: relative; height: 100%;
}
#test01 .mv-inner h6.mv-h6 {
  color: #4284EC; font-size: 24px; font-weight: 900;
}
#test01 .mv-inner h2.mv-h2 {
  font-size: 44px; font-weight: 900; margin-bottom: 20px;
}
#test01 .mv-inner p.mv-p {
  margin-bottom: 40px;
}
（省略）
テストページ01

bodyタグにid振ってるのは癖です。微妙に表示崩れがありますが、見逃してください。

テストページ02

親要素から辿ってCSSの記述が反映されるように構築しています。

ブラウザはCSSの記述の後ろから当てはまるものを全部参照してなが辿っていく

HTML上ではclassを当てるのを最低限にして、CSSの方で子要素の指定を駆使するやり方です。
HTMLを見る分にはスッキリしてるのですが、CSSをパッと見てこれがどの要素の指定なのかは分かりずらいです。

例

<section>
  <div>
    <div>
      <h6>CSSのプロパティやセレクタでどの程度スピードに影響がでるのか</h6>
      <h2>スピードテスト test02</h2>
      <p>親要素にclassを当てていったバージョン。<br>
      配下の子要素にcssで行った指定が反映される。</p>
      <div class="btn">
        <a href="#">ボタンはこちら</a>
      </div>
    </div>
  </div>
</section>
#test02 section:first-child {
  margin-top: 80px; background: #16204E;
 color: #fff;
}
#test02 section:first-child > div {
  height: 70vh; min-height: 680px; max-height: 740px; max-width: 1200px; padding: 0 50px; margin-right: auto; margin-left: auto;
}
#test02 section:first-child > div > div {
  display: flex; flex-direction: column; justify-content: center; position: relative; height: 100%;
}
#test02 section:first-child > div > div h6 {
  color: #4284EC; font-size: 24px; font-weight: 900;
}
#test02 section:first-child > div > div h2 {
  font-size: 44px; font-weight: 900; margin-bottom: 20px;
}
#test02 section:first-child > div > div p {
  margin-bottom: 40px;
}
（省略）
テストページ02

スピードテストをします

使用したのはchromeの機能拡張の「Lighthouse」です。

結果

テストページ01のスピード結果

テストページ01のスピード結果

テストページ02のスピード結果

テストページ02のスピード結果

一緒！！！

ええ……頑張ってテストページ作り分けた労力が……。
「こんな感じで差がでるんですね〜。」ってドヤりたかったのに……。
シンプルなページだったので（レスポンシブ非対応だし）差が出なかったのかもしれません。でも、複雑に構築してテストするほど頑張りたくないかな。。

関連記事: