連載インデックスへ

WebデザイナのためのHTMLチューニング入門（3）

CSS Spriteなどブラウザとサーバの通信を減らすテク

株式会社ライブドア
マークアップエンジニア 浜 俊太朗
2009/6/8

□ CSS Spriteの3つの注意点

　CSS Spriteを使う際は速度のことだけでなく、そのほかの運用も含めてメリット・デメリットを考えてから画像を作成するとよいでしょう。以下のような注意点があります。

• 【1】使えない種類の画像がある

　今回のサンプルでも、いくつかは通常の方式で背景画像を指定しています。なぜなら、background-repeatプロパティで繰り返しを指定することや、要素の下端に画像を表示することが不向きだからです。

• 【2】後々の更新を考えておく

　画像の並び順とbackground-positionプロパティで指定する座標は関連しているので、画像を追加する際には注意が必要です。これまでの画像の位置を変えてしまうと、CSSも一緒に修正することになってしまいます。

• 【3】コンテンツとしての画像はimg要素で

　当たり前のことですが、統合する画像は「背景画像など意味を持たない画像」のみです。コンテンツとして意味を持っている画像はimg要素で記述し、alt属性を適切に付けましょう。新しい技術を試すときは、周りが見えなくなってしまいがちなので注意が必要です。

□ CSS Spriteに便利なジェネレータ

　画像ファイルをzip圧縮して読み込ませると、統合した画像とCSSのソースコードを出力してくれる「CSS Sprite Generator」という便利なツールがあります。設定で画像同士の間隔やファイル形式などを変更できるので、いろいろ試してみるとよいでしょう。

サーバの設定についても知っておこう

　本連載では詳しくは取り上げませんが、サーバの設定によって転送の効率を上げることも可能です。今回は、Apache 2.2での設定項目について軽くご紹介します。これらの設定は、ほんの一例です。最適な値はWebサイトの性質やアクセスの傾向で変わるので、サーバ管理者やプログラマと相談して設定してもらうようにしてください。

□ KeepAlive設定の確認

　1ファイルごとにコネクションを切るのではなく、コネクションを維持したまま複数ファイルを転送する設定です。コネクションのオーバーヘッドが減る半面、1クライアントがコネクションを占有する時間が延びるので、やみくもに長くしてもアクセスが多いサイトでは逆効果なことがあります。

• KeepAlive On/Off
  KeepAliveの有効無効を切り替える
• KeepAliveTimeout seconds
  次のリクエストまで待つ時間

□ キャッシュ関連設定の確認

　Webブラウザがすでにキャッシュに保持しているファイルが更新されていなければ、サーバが「304 Not Modified」というメッセージを返し、キャッシュされているファイルの利用を促すことで実際のデータ転送を省略して転送量を軽減できます。

　このファイルの更新の有無を判別するために、ETag（ファイルの固有値）などの値が使われますが、Apacheのデフォルト設定ではこのETagの生成を「ディスク上のファイルの位置」「最終更新時刻」「ファイルサイズ」から生成しています。

• FileETag MTime Size

　負荷分散のためにサーバを複数台使用している場合には、各サーバでこの値を同一にしないと効果的なキャッシュが行われないことがあります。以下のことなどを確認した方がよいでしょう。

• ファイル転送に使用するクライアントでファイル更新時刻を保持する設定にする
• Apacheの設定でディスク上のファイルの位置をETag生成元から外す

　また、ExpiresヘッダやCache-Controlヘッダをきちんと出力することもキャッシュを有効利用する点では大事です。ただし、Webブラウザにキャッシュされてしまうと更新の際に困るようなCSSなどの場合は、ファイル名に日付けを含めるなどの工夫を行って意図したファイルを正しく読み込ませるようにしましょう。

• ExpiresActive On
• ExpiresDefault "access plus 2 weeks"
• ExpiresByType text/css "access plus 3 days"

□ 圧縮転送

　HTTP/1.1では、圧縮転送をサポートしているクライアント／サーバ同士ではファイルの内容をgzip圧縮して転送できます。

　もともと圧縮されている画像ファイルでは、ほとんど効果がありません。しかし、CSSやJavaScriptなどのテキストファイルでは、大幅に転送量の削減が可能です。昨今のCPU速度では、圧縮・解凍にかかるオーバーヘッドはほぼ無視できるので、転送にかかる時間の短縮に効果的です。積極的に利用してもよいでしょう。

　大規模なJavaScriptライブラリでは、前回の記事「Webページを速く見せるための5つのちょっとした工夫」で紹介したソースコードファイルレベルでの圧縮に加えて転送時のgzip圧縮を併用することを勧めている場合もあります。

• AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

CSSファイルの分割は、よく考えて行おう

　CSSコーディングにおける作業効率を上げるために、CSSファイルを分割して管理する「コンポーネント化」と呼ばれる手法があります。この手法自体を否定するわけではありませんが、HTTPのリクエストメッセージを減らすという目的においてはお勧めできません。CSSファイルの数だけ通信が発生してしまうからです。

　とはいえ、作業効率の向上も大事な要素なので、Webサイトやスタッフの規模などに応じてその時々で判断するとよいでしょう。

　今回のサンプルのソースコードはこちらです。

■ ＠IT関連記事

デザイナーのためのWeb学習帳 Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう！ 「デザインハック」コーナー

D89 Web標準HTMLタグリファレンス Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします 「デザインハック」コーナー

どこまでできる？ 無料ツールでWebサイト作成 無料のWebサイト作成は業務レベルでどの程度使えるのか？ 本連載では、さまざまな無料ツールを使用したサイト開発を掘り下げていく

Webブラウザ非互換性の温床となったのは何か？ AcidテストとWebブラウザの仕組み（前編）　IE8.0やFirefox3.0の出現で、注目されるWebブラウザ。いまこそ、復習しよう。Webブラウザの非互換性の発生源を探ろう 「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/3

Webブラウザ標準適合性のわなとAcidテストの正体 AcidテストとWebブラウザの仕組み（後編）　1つのWebページを開くだけで100項目のWebブラウザの標準適合性が検証できるAcidテスト。Acidテストの正体に踏み込む 「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/31

株式会社ライブドア マークアップエンジニア 浜俊太朗（hamashun） livedoor labs EDGE・livedoor blog・livedoor プロフィールなどを担当。 主な活動に、CSS Niteでの講演やコーディング大会の審査員などがある。趣味はインテリアとおいしいものを食べること Webサイト：hamashun.com 著書：「一週間でマスターするXHTML & CSS for Windows」毎日コミュニケーションズ

2/2

INDEX
WebデザイナのためのHTMLチューニング入門（3）　 CSS Spriteなどブラウザとサーバの通信を減らすテク
	Page1 HTTPにおけるリクエストの数を意識してますか？ 画像を統合してファイル数を減らす「CSS Sprite」とは
	Page2 サーバの設定についても知っておこう CSSファイルの分割は、よく考えて行おう

[an error occurred while processing this directive]

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）