読者です 読者をやめる 読者になる 読者になる

せかいや

いまいるここを、おもしろく http://sekai-in-the-box.appspot.com/

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

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

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

ハイパフォーマンス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; } 


■テスト結果

以前
f:id:sekaiya:20131019134451j:plain


 
今回
f:id:sekaiya:20131019134504j:plain

確かに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日前)↓
f:id:sekaiya:20131019152012j:plain

現在

f:id:sekaiya:20131019152019j:plain


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


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

sekai in the box!