【Webサイト】サイトの高速化（CSSスプライトの利用）、 TTFB (Time To First Byte)の改善

　
自分のサイトを早くしてるよー。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

この本を読んでるよ。

CSSスプライトの利用

　　
このサイトでスプライトを作成したよ。
CSS Sprite Generator | Project Fondue
　
■変更前

<div class="animefont" id="anime2"style="display: none"><img src="img/anime2.png"></div>

　
■変更後

<div class="sprite" id="anime2"style="display: none"></div>

.sprite {background: url('../img/anime.png') no-repeat top left;}
#anime1{ @include css3(opacity, 0); background-position: 0 0; width: 475px; height: 67px; } 

■テスト結果

以前

　
今回

確かにHTTPリクエストの数は減っているものの、大きな改善はない。

こうやって見てると、jsファイルの TTFB (Time To First Byte)がすごく時間を取っている。
このあたりを何とかしてみよう。

→→↓（追記）

　
色々見てみたけれども、TTFBはサーバーの性能に依存するもので、
クライアント側で出来ることはなさそう。

TCP 接続時間も、TCP レベルでの受信確認応答も速いにもかかわらず、その後の TTFB (Time To First Byte) データ応答パケットに時間がかかるようなら、低速なサーバーであることが疑われます。

http://msdn.microsoft.com/ja-jp/magazine/dd188562.aspx

　
GAEはどうも TTFB (Time To First Byte)の数値が良くないみたい。

http://stackoverflow.com/questions/6788740/google-app-engine-slow-ttfbhttps://plus.google.com/101646122693107667041/posts/UtPDnMVyBgv

無料版だからかもしれない。
　
jqueryファイルの TTFB 値が良いのは、性能のいいCDNサーバーを使ってるからなんだ。
なるほど。

いったんはここまで！

振り返り

リファクタ前の状態をまとめていた記事を見ると、
■キャッシュを使ったアクセス

onContentLoad 637
onLoad 720

↓

onContentLoad": 322
onLoad": 346

■初回アクセス
初めてwebPagetestを使ったときのスクリーンショット（わずか2日前）↓

現在
↓

レンダリング開始時間が
1.96→0.89
ほぼ50％削減できた。これはいい感じ。

高速化、いったんはここまで。

sekai in the box!