オンラインPC館

CSS高速化

CSSの処理速度

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

  1. 効率の良いセレクタ：idセレクタ＞classセレクタ
  2. 効率の悪いセレクタ：子孫セレクタ、全称セレクタ、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による画像の高速化

画像の高速化

CSSを利用した画像の高速化方法にはCSS Spriteなどがあります。
CSS Spriteは少し扱いが手間ですが、SCSS環境を構築すれば一連の生成作業を自動化する事ができます。
CSS Sprite

サイトパーツの軽量化

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

CSS Sprite

複数の画像を1枚にまとめる

CSS Spriteとは複数の画像を1枚にまとめる手法で、画像の表示速度を高速化するCSSテクニックです。
Sprite画像の作成方法は色々ありますが、Generatorを利用するのが簡単です。
Generatorの設定は初期設定で問題ありませんが、変更したい項目があれば設定してください。
ただし、CSS Spriteはその性質上、頻繁に変更や追加を行う画像には向きません。
CSSスプライト作成

  1. メリット：ファイル数やhttp接続数が1つに抑えられる
  2. デメリット：頻繁に変更や追加を行うには不向き

SCSSでCSS Spriteを作成する方法

SCSSの環境を構築すれば、ローカル環境で簡単にSprite画像を作成する事ができます。
また、生成や圧縮の自動化も可能になるため、非常に便利に活用する事ができます。
SCSSの使い方

サイトのパーツ画像を1枚にまとめる

CSS Spriteで最も効果的と思われるのがサイトのパーツ画像をまとめる使い方です。
パーツ画像は全てのページに共通して利用されている事が多く、頻繁に更新する必要もないため、CSS Spriteの利用に適しています。

  1. Sprite画像の作成：Sprite画像とCSSを作成
  2. CSSの書式：.sprite {background:url(sprite画像ファイルのパス); background-position:画像の表示位置を指定;}
  3. HTMLの書式：<div class="sprite" alt="">

通常画像でCSS Spriteを利用する

CSS Spriteは主にサイトのパーツ画像に利用しますが、HTMLに記述されている通常の画像に利用する事もできます。
これには先ほどのCSS Spriteとspacer.gif（透過gif）を利用すれば可能です。
CSSは上記と同じですが、HTMLのimage要素の部分でspacer.gifを指定するように変更してください。

  1. CSS Sprite：Sprite画像とCSSを作成
  2. spacer.gif：spacer.gifをダウンロード→spacer.gifを画像ディレクトリに移動
  3. CSSの書式：.sprite {background:url(sprite画像ファイルのパス); background-position:画像の表示位置を指定;}
  4. HTMLの書式：<img src="画像ファイルのパス">→<img src="spacer.gifのパス" class="sprite" alt="">
オンラインPC館