それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

WEBサイトのパフォーマンスチューニング


ハイパフォーマンスWEBサイトよんだ。まとめ。と個人的雑感

体感速度を向上させる。

体感速度を向上させるためには次の方法が在ります。

  1. ダウンロード速度の高速化
  2. 表示しながらダウンロード。

一般的には8秒ルールなどといわれます。昨今のユーザは8秒でも遅いと感じます。YahooやGoogleなどミリ秒単位で表示されるページ増えて、1秒程度でページを閲覧している。

「ダウンロード速度の高速化」は8秒ルールの実現に主眼が置かれるが、キャッシュ、データベースなど限界も多い。また、システム全体を見渡す必要がある。敷居が高い。簡単に早くさせるために、「表示しながらダウンロード」に主眼を置いてチューニングするべきです。

表示しながらダウンロードをプログレッシブダウンロードと呼びます。
しかし表示中にチカチカしたり、コンテンツ位置が移動するのは避けたい。

高速化原則

  1. JSファイルでdocument.writeしない
  2. CSSで@importを使わない
  3. CSSはHEAD内だけに記述する
  4. JSは直前に置く
  5. JS/CSSとも最小枚数を目指す。

基本ポリシー

  1. HTTPのコネクション数を減らす
  2. キャッシュ制御する
  3. Dom構築・レンダリングを妨げない。

次に画像。

不要な転送を避ける。変化しない画像はキャッシュさせる。

  1. 画像1枚に一つのURL
  2. Expiresを必ずつける。
  3. E-tagは避ける
  4. 小さい画像はCSSに埋め込む。src="data:BASE64"を使う
  5. アイコンはpositionをつかう。CSSスプライト

Apacheがデフォルトで付記するのE-tagは、HDDのi-nodeから算出される。サーバーをミラーしたらE-tagが変わる。同じ画像を複数サーバーに分散させてDNSラウンドロビンで分けたのに、E-tagがサーバー毎に変化してキャッシュ制御が大変。制御が手間なのでE-tagは忘れる。
画像が変化することは考えにくいのでかなり大きな値(一年以上でも構わない)にする。

トリッキーな画像でコネクション数削減

  1. マウスオーバー画像・アイコンはCSSスプライトにする。
.prev_icon {background-position:  0px, 0;}
.next_icon {background-position: 16px, 0;}
.home_icon {background-position: 32px, 0;}
  1. インライン画像を使う。imgタグのSRCやCSSのurl()を次のようにする
<img src="data:image/png;base64,TGGAfhafdsghjer984275rpyafh...." />
.icon background-image:url( data:image/png;base64,TGGAfhafdsghjer984275rpyafh....");

HTTPのコネクション数を減らすことで早くなる。負荷が下がる。サーバー台数減らせる。メリットは大きい。

GZIP圧縮する。

mod_deflate(2.2.x)/mod_gzip(1.3.x) を使う。
転送量を減らすと、読込が早くなる。転送が早くなる。
転送量課金されるAmazonS3やAmazonEC2を使う時は必須。料金を抑えられる。

プロキシサーバーがある場合は、Expiresに注意する。
mod_deflateの設定例

<IfModule mod_deflate.c>
	# 圧縮率1-9 (最小1⇒⇒最大9)
	DeflateCompressionLevel 6
	# 圧縮するもの ( content-typeで指定:JPEGを圧縮しても無意味なんだからね)
	AddOutputFilterByType DEFLATE text/html text/plain text/xml text/json text/css
	# DEFLATEの有効化
	SetOutputFilter DEFLATE
	#GZipするブラウザ指定する。きりがない。
	#BrowserMatch ^Mozilla/4 gzip-only-text/html
	#BrowserMatch ^Mozilla/4\.0[678] no-gzip
	#BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>

deferを使う。

document.writeを使わないJSにはdeferをつける。
IEやOperaだと圧倒的に早くなる。

<script defer="defer" ... />

deferはFirefox非対応。あとレンダリングのタイミングがFirefoxは遅いので要注意。Firefoxは要らない子なんじゃないか

広告を非表示にする