CSS高速化

CSSの処理速度

CSSの記述の仕方によっては処理速度が変わります。
一般的にはidセレクタやclassセレクタは効率的ですが、子孫セレクタ、全称セレクタ、CSSインポートは非常に効率が悪いとされています。
また、CSS3の中には速度低下に繋がるものが多いので、利用する際は注意が必要です。
さらに効果的に処理されるようにソースを構成する事で、短時間でのレンダリングが可能になります。
30分でできる！Webサイトを高速化する6大原則
 ウェブページ高速化に効果的なCSSセレクタ
 CSSレンダリング高速化の5つのポイント

効率の良いセレクタ：idセレクタ＞classセレクタ
効率の悪いセレクタ：子孫セレクタ、全称セレクタ、CSSインポート

ショートハンドの活用

意外と効果的なのがショートハンドを利用したCSSの軽量化方法です。
CSSも肥大化すると読み込みに結構時間をとられるので、ショートハンドで適度に軽量化を行うと効果的です。
CSSショートハンド

CSSの使い分け

1つのCSSを利用する

全てのスタイルを1つのCSSで利用する方法です。
文字数が少ないなら1つのCSSに全て記述する事で、リクエスト数が少なくキャッシュ効果も得られて管理も楽になります。
ただし、特定ページのみに指定するようなスタイルも含む場合は、読み込むデータ量が無駄に大きくなります。

注意点：ショートハンドを利用したり、無駄な記述を減らしてできるだけデータ量を少なくする

複数のCSSを利用する

複数のCSSを作成してページに合わせてCSSを使い分ける方法です。
いくつかのページで共通のスタイルがある場合は、CSSを複数作成すれば他のページで不要部分を読み込ませずに済みます。
この方法では通常ページ用のCSSと、特定ページだけに指定するスタイルを追加したCSSの2種類を利用する形になります。
ただし、利用するCSSが増えるため、管理が少し手間になります。

注意点：必ず全てのCSSにベースとなるスタイル部分も記述し、1つのページで1つのCSSだけを読み込ませるようにする
例：HTML1～HTML10はベースの「style.css」を利用し、HTML11～HTML15はもう一つの「style2.css」を利用する

CSSをインライン化する

CSSの一部をインライン化する方法です。
特定ページだけにスタイルを指定したい場合は、HTMLに直接記述すればCSSの無駄な肥大化を防ぐ事ができます。
また、データ量が少ない場合はCSS全体をインライン化する事もできますが、その場合は利便性が大幅に低下します。
CSS の配信を最適化する

注意点：データ量が多いと逆効果になる、CSPではブロックされる、styleの二重指定をしない
記述方法：HTMLのヘッダ内に<style>～</style>として記述する

CSSによる画像の高速化

サイトパーツの軽量化

サイトのパーツには加工した画像を利用しますが、CSS3ならパーツの多くをCSSだけで構成する事ができます。
CSSで利用できるエフェクトには、グラデーション、シャドウ、角丸、透過、変形、回転、アニメーションなどがあります。
これらをうまく利用すればパーツ部分の軽量化が可能です。
CSSエフェクト