Help us understand the problem. What is going on with this article?

CSSOMとパフォーマンス

More than 1 year has passed since last update.

はじめに

Webのパフォーマンスチューニングについて調べていたりすると、ちょくちょく見かけるCSSOMという言葉。DOMのCSSバージョンなんだろうなぁと何となく理解したつもりになっていましたが、ふと気になって改めて調べなおしてみました。この記事ではCSSOMについての説明、そして、それに関連するパフォーマンスについてまとめてみます。

CSSOMとは

CSSOMは、CSS Object Modelを意味する略語であり、ブラウザでロードされたCSSのツリー構造を保持する仕組みです。例えば、bodyにはこのスタイル、bodyの下にあるdivには別のスタイル、というようなイメージですね。ブラウザは、このCSSのツリー構造をDOMに対して適用することで、上位のスタイルからより具体的な下位のスタイルへと連鎖的にスタイルを決定していきます。このようにして処理されたものはレンダリングツリーと呼ばれ、これに基いてレイアウトの計算処理と描画処理が行われます。

パフォーマンスにどう関係するの?

CSSOMがどのようにウェブのパフォーマンスへと影響を与えるのでしょうか。それは、CSSOMの構築はウェブページのレンダリングをブロックするという点です。言い換えると、CSSOMが構築されるまではウェブページには何も表示されず、ユーザの目にはただただ白い画面だけが映し出されます。そのため、CSSOMの構築に要する時間がUXへと影響を及ぼします。(より正確にはDOMとJavaScriptも含めてクリティカルレンダリングパスと呼び、コンテンツが描画されるまでに時間に影響します)

また、CSSOMはキャッシュという仕組みを持ちません。そのためCSSファイルをブラウザがキャッシュしていたとしても、リロードや別ページへの遷移が発生する度にCSSOMは再構築されることになります。なので、いくらキャッシュしていたとしても、巨大なCSSはCSSOMの構築に毎回時間をかけることになります。

CSSOMの処理を最適化するには?

CSSOMの処理パフォーマンスを上げるためには、以下のような方法が取られます。

複数のCSSファイルを1つのファイルにまとめる

CSSファイルが複数に分割されている場合、ブラウザは(HTTP/2でない限り)それぞれのファイルをダウンロードしなければいけません。そこでCSSファイルの内容をバンドラなどを使用して事前にまとめておけば、ダウンロードに要する時間を短縮することができます。

他のCSSファイルをインポートしない

CSSファイルをインポートすることは、パフォーマンスの低下につながります。以下のCSSを見てみましょう。

@import url("another-style.css")

この例では、CSSファイル内で@importを使用することにより他のCSSを取り込んでいますが、ファイルをダウンロードするためのリクエストが別途発生してしまい、レンダリングをブロックしてしまいます。そのため、@importを使用せず、上記と同じようにファイルをまとめておくのがベターです。

mediaを使用して必要な場合だけファイルを取得する

CSSの中には、モバイル機器にしか使われないスタイル定義、印刷時にしか使わないスタイル定義のように、特定の状況下のみで使用されるものがあります。そのようなケースで使用できるのが、<link>要素のmediaです。以下の例を見てみましょう。(Web Fundamentalsより引用)

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

この例では、style.cssに基本的なスタイル定義がしてあり、print.cssother.cssには、特定の状況下でページを閲覧している場合のためのスタイル定義が含まれています。それぞれのmediaで指定した条件を満たさない場合はレンダリングをブロックしないため、パフォーマンスを向上させることができます。

最後に

この記事ではCSSに焦点を当てて記述しましたが、パフォーマンス改善、つまりクリティカルレンダリングパスの短縮にはHTMLとJavaScriptを含めて総合的に判断する必要があります。

また、現状のサイトのパフォーマンスを簡易的に測定するには、以下のサービスやツールが役に立ちます。
- PageSpeed Insights
- Chrome Developer ToolsのAudits

参考

Tsuyoshi84
Angular/Vue.jsを用いたフロントエンド開発、Elixir/Phoenixを用いたバックエンド開発、Swiftを用いたiOSアプリ開発などを行なっています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした