Webサイトからユーザーを逃さない基本テクニック

30分でできる！Webサイトを高速化する6大原則

2009年09月09日 07時00分更新

文● Web Directions East

2.画像はサイズを指定せよ！

　画像サイズは必ずHTMLのwidth属性とheight属性、もしくはCSSのプロパティで指定する。サイズを指定することによって、ブラウザーは画像ファイルのダウンロードが完了する前にレイアウトを計算できる。結果、ページの表示にかかる時間は短縮される。

●記述例：HTMLのwidth属性、height属性を利用した場合


<img src="web+directions+east.png" alt="画像　Web　Directions East　ロゴ" width="100" height="100" />

●記述例：CSSのwidthプロパティとheightプロパティ利用した場合


img{
      width: 100px;
      height: 100px;
}

　このとき、画像自体のサイズとHTMLで指定するサイズを一致させることが大切だ。たとえば、200×200ピクセルの画像を100×100ピクセルで表示したい場合は、画像自体を必ず100×100ピクセルにリサイズしておく。画像の表示サイズを小さくする目的でwidth属性やheight属性を指定すると、ブラウザーに余計な処理が発生し、表示スピードが低下する。

3.HTTPリクエストは最小にせよ！

　HTTPリクエストを少なくすれば、Webページの表示スピードは改善できる。ではどうすればいいのだろうか？　代表的なのが「CSS Sprite」と呼ばれるテクニックだ。CSS Spriteとは、ページ内で使う背景画像を1枚の大きな画像ファイルにまとめ、CSSのbackground-positionで表示位置をコントロールするテクニック。Yahoo!やYouTubeなど、大規模サイトでは当たり前のように使われている。以下は、YouTubeでのCSS Spriteの利用例だ。

　CSS Spriteを使うと、Webサイトのパフォーマンスを飛躍的に改善できる。このCSS Spriteを簡単に作成できるツールが「CSS Sprite Generator」だ。

●CSS Sprite Generator
　http://spritegen.website-performance.org/

　まず、まとめたい画像ファイルをzipファイルにしてアップロードする。

　次に、同じ画像が含まれていた場合（重複していた場合）の処理方法を選択する。「Ignore duplicate images」は、同じ画像があっても無視して別のCSS（background-position）を出力する。「Remove duplicate images but merge CSS rules」は同じ画像があった場合、片方の画像を取り除く。

　続いて、画像の拡大／縮小サイズを選択する。「Build Directions」は画像を並べる方向で、「vertical」なら縦、「horizontal」なら横に配置する。「Offset」はそれぞれの画像同士の間隔だ。「Opera bug」はOperaで発生するバグを回避するためのオプションだが、Opera10以降では特に気にしなくていいだろう。「background color」は背景色、「Output format」は画像の出力形式を指定する。