ブックマクロ開発に

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

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

体感速度を向上させる。

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

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

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

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

表示しながらダウンロードをプログレッシブダウンロードと呼びます。

しかし表示中にチカチカしたり、コンテンツ位置が移動するのは避けたい。

高速化原則

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

基本ポリシー

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

次に画像。

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

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 （最小１⇒⇒最大９）
	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は要らない子なんじゃないか

Permalink | コメント(0) | トラックバック(0) | 15:11